Adds pathname to effect dependencies

Ensures the effect hook updates correctly when the pathname changes,
improving synchronization with route-based state changes.

.github/CONTRIBUTING.md

@@ -20,15 +20,42 @@ npm run lint     # Check lint errors
 npm run check    # Run all checks (CI)
 ```
 
-Pre-commit hooks via Husky will run Biome automatically on staged files.
+Git hooks via Husky run automatically:
+- **Pre-commit**: Biome (format/lint) + TypeScript type check
+- **Pre-push**: Unit tests
 
 For a better experience, install the [Biome VS Code extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome) for real-time linting and format-on-save.
 
+## Testing
+
+Run tests before submitting PRs:
+
+```bash
+npm run test        # Unit tests (Vitest)
+npm run test:e2e    # E2E tests (Playwright)
+```
+
+E2E tests use mocked API responses - no AI provider needed. Tests are in `tests/e2e/`.
+
+To run a specific test file:
+```bash
+npx playwright test tests/e2e/diagram-generation.spec.ts
+```
+
+To run tests with UI mode:
+```bash
+npx playwright test --ui
+```
+
 ## Pull Requests
 
 1. Create a feature branch
-2. Make changes and ensure `npm run check` passes
-3. Submit PR against `main` with a clear description
+2. Make changes (pre-commit runs lint + type check automatically)
+3. Run E2E tests with `npm run test:e2e`
+4. Push (pre-push runs unit tests automatically)
+5. Submit PR against `main` with a clear description
+
+CI will run the full test suite on your PR.
 
 ## Issues
 

.github/renovate.json

@@ -1,7 +1,7 @@
 {
     "$schema": "https://docs.renovatebot.com/renovate-schema.json",
     "extends": ["config:recommended"],
-    "schedule": ["after 10am on saturday"],
+    "schedule": ["after 10am on the first day of the month"],
     "timezone": "Asia/Tokyo",
     "packageRules": [
         {
@@ -13,6 +13,7 @@
         {
             "matchUpdateTypes": ["major"],
             "matchPackagePatterns": ["*"],
+            "groupName": "major dependencies",
             "automerge": false
         },
         {

.github/workflows/electron-release.yml

@@ -11,7 +11,8 @@ on:
         required: false
 
 jobs:
-  build:
+  # Mac and Linux: Build and publish directly (no signing needed)
+  build-mac-linux:
     permissions:
       contents: write
     strategy:
@@ -20,13 +21,9 @@ jobs:
         include:
           - os: macos-latest
             platform: mac
-          - os: windows-latest
-            platform: win
           - os: ubuntu-latest
             platform: linux
-
     runs-on: ${{ matrix.os }}
-
     steps:
       - name: Checkout code
         uses: actions/checkout@v6
@@ -37,10 +34,80 @@ 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
 
-      - name: Build and publish Electron app
+      - name: Build and publish
         run: npm run dist:${{ matrix.platform }}
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  # Windows: Build, sign with SignPath, then publish
+  build-windows:
+    permissions:
+      contents: write
+    runs-on: windows-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          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
+
+      # Build WITHOUT publishing
+      - name: Build Windows app
+        run: npm run dist:win:build
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload unsigned artifacts for signing
+        uses: actions/upload-artifact@v6
+        id: upload-unsigned
+        with:
+          name: windows-unsigned
+          path: release/*.exe
+          retention-days: 1
+
+      - name: Sign with SignPath
+        uses: signpath/github-action-submit-signing-request@v2
+        with:
+          api-token: ${{ secrets.SIGNPATH_API_TOKEN }}
+          organization-id: '880a211d-2cd3-4e7b-8d04-3d1f8eb39df5'
+          project-slug: 'next-ai-draw-io'
+          signing-policy-slug: 'release-signing'
+          artifact-configuration-slug: 'windows-exe'
+          github-artifact-id: ${{ steps.upload-unsigned.outputs.artifact-id }}
+          wait-for-completion: true
+          output-artifact-directory: release-signed
+
+      - name: Upload signed artifacts to release
+        uses: softprops/action-gh-release@v2
+        with:
+          files: release-signed/*.exe
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -0,0 +1,75 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [main]
+  push:
+    branches: [main]
+
+jobs:
+  lint-and-unit:
+    name: Lint & Unit Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run lint
+        run: npm run check
+
+      - name: Run unit tests
+        run: npm run test -- --run
+
+  e2e:
+    name: E2E Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Cache Playwright browsers
+        uses: actions/cache@v5
+        id: playwright-cache
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
+
+      - name: Install Playwright browsers
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: npx playwright install chromium --with-deps
+
+      - name: Install Playwright deps (cached)
+        if: steps.playwright-cache.outputs.cache-hit == 'true'
+        run: npx playwright install-deps chromium
+
+      - name: Build app
+        run: npm run build
+
+      - name: Run E2E tests
+        run: npm run test:e2e
+        env:
+          CI: true
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v6
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7

.gitignore

@@ -14,6 +14,8 @@ packages/*/dist
 
 # testing
 /coverage
+/playwright-report/
+/test-results/
 
 # next.js
 /.next/
@@ -54,6 +56,8 @@ push-via-ec2.sh
 /dist-electron/
 /release/
 /electron-standalone/
+# Draw.io static files (downloaded during CI build)
+public/drawio/
 *.dmg
 *.exe
 *.AppImage
@@ -65,4 +69,6 @@ CLAUDE.md
 .spec-workflow
 
 # edgeone
-.edgeone
+.edgeone
+opencode.json
+ai-models.json

.husky/pre-commit

@@ -1 +1,2 @@
 npx lint-staged
+npx tsc --noEmit

.husky/pre-push

@@ -0,0 +1,4 @@
+# Skip if node_modules not installed (e.g., on EC2 push server)
+if [ -d "node_modules" ]; then
+  npm run test -- --run
+fi

Dockerfile

@@ -30,6 +30,10 @@ ENV NEXT_PUBLIC_DRAWIO_BASE_URL=${NEXT_PUBLIC_DRAWIO_BASE_URL}
 ARG NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE=false
 ENV NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE=${NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE}
 
+# Build-time argument for subdirectory deployment (e.g., /nextaidrawio)
+ARG NEXT_PUBLIC_BASE_PATH=""
+ENV NEXT_PUBLIC_BASE_PATH=${NEXT_PUBLIC_BASE_PATH}
+
 # Build Next.js application (standalone mode)
 RUN npm run build
 

README.md

@@ -40,11 +40,12 @@ https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
     - [Installation](#installation)
   - [Deployment](#deployment)
     - [Deploy to EdgeOne Pages](#deploy-to-edgeone-pages)
-    - [Deploy on Vercel (Recommended)](#deploy-on-vercel-recommended)
+    - [Deploy on Vercel](#deploy-on-vercel)
     - [Deploy on Cloudflare Workers](#deploy-on-cloudflare-workers)
   - [Multi-Provider Support](#multi-provider-support)
   - [How It Works](#how-it-works)
   - [Support \& Contact](#support--contact)
+  - [FAQ](#faq)
   - [Star History](#star-history)
 
 ## Examples
@@ -185,7 +186,7 @@ Check out the [Tencent EdgeOne Pages documentation](https://pages.edgeone.ai/doc
 
 Additionally, deploying through Tencent EdgeOne Pages will also grant you a [daily free quota for DeepSeek models](https://pages.edgeone.ai/document/edge-ai).
 
-### Deploy on Vercel (Recommended)
+### Deploy on Vercel 
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
 
@@ -206,11 +207,13 @@ See the [Next.js deployment documentation](https://nextjs.org/docs/app/building-
 -   OpenAI
 -   Anthropic
 -   Google AI
+-   Google Vertex AI
 -   Azure OpenAI
 -   Ollama
 -   OpenRouter
 -   DeepSeek
 -   SiliconFlow
+-   ModelScope
 -   SGLang
 -   Vercel AI Gateway
 
@@ -219,6 +222,10 @@ 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.
@@ -245,6 +252,10 @@ For support or inquiries, please open an issue on the GitHub repository or conta
 
 -   Email: me[at]jiang.jp
 
+## FAQ
+
+See [FAQ](./docs/en/FAQ.md) for common issues and solutions.
+
 ## Star History
 
 [![Star History Chart](https://api.star-history.com/svg?repos=DayuanJiang/next-ai-draw-io&type=date&legend=top-left)](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)

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

@@ -1,7 +1,7 @@
 import type { Metadata } from "next"
-import Image from "next/image"
 import Link from "next/link"
 import { FaGithub } from "react-icons/fa"
+import Image from "@/components/image-with-basepath"
 
 export const metadata: Metadata = {
     title: "关于 - Next AI Draw.io",
@@ -10,18 +10,7 @@ export const metadata: Metadata = {
     keywords: ["AI图表", "draw.io", "AWS架构", "GCP图表", "Azure图表", "LLM"],
 }
 
-function formatNumber(num: number): string {
-    if (num >= 1000) {
-        return `${num / 1000}k`
-    }
-    return num.toString()
-}
-
 export default function AboutCN() {
-    const dailyRequestLimit = Number(process.env.DAILY_REQUEST_LIMIT) || 20
-    const dailyTokenLimit = Number(process.env.DAILY_TOKEN_LIMIT) || 500000
-    const tpmLimit = Number(process.env.TPM_LIMIT) || 50000
-
     return (
         <div className="min-h-screen bg-gray-50">
             {/* Navigation */}
@@ -108,42 +97,6 @@ export default function AboutCN() {
                                 </p>
                             </div>
 
-                            {/* Usage Limits */}
-                            <p className="text-sm text-gray-600 mb-3">
-                                当前使用限制：
-                            </p>
-                            <div className="grid grid-cols-3 gap-3 mb-5">
-                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    <p className="text-lg font-bold text-amber-600">
-                                        {formatNumber(dailyRequestLimit)}
-                                    </p>
-                                    <p className="text-xs text-gray-500">
-                                        请求/天
-                                    </p>
-                                </div>
-                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    <p className="text-lg font-bold text-amber-600">
-                                        {formatNumber(dailyTokenLimit)}
-                                    </p>
-                                    <p className="text-xs text-gray-500">
-                                        Token/天
-                                    </p>
-                                </div>
-                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    <p className="text-lg font-bold text-amber-600">
-                                        {formatNumber(tpmLimit)}
-                                    </p>
-                                    <p className="text-xs text-gray-500">
-                                        Token/分钟
-                                    </p>
-                                </div>
-                            </div>
-
-                            {/* Divider */}
-                            <div className="flex items-center gap-3 my-5">
-                                <div className="flex-1 h-px bg-gradient-to-r from-transparent via-amber-300 to-transparent" />
-                            </div>
-
                             {/* Bring Your Own Key */}
                             <div className="text-center">
                                 <h4 className="text-base font-bold text-gray-900 mb-2">
@@ -339,11 +292,13 @@ 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>
                         <li>DeepSeek</li>
                         <li>SiliconFlow</li>
+                        <li>ModelScope</li>
                     </ul>
                     <p className="text-gray-700 mt-4">
                         注意：<code>claude-sonnet-4-5</code>{" "}

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

@@ -1,7 +1,7 @@
 import type { Metadata } from "next"
-import Image from "next/image"
 import Link from "next/link"
 import { FaGithub } from "react-icons/fa"
+import Image from "@/components/image-with-basepath"
 
 export const metadata: Metadata = {
     title: "概要 - Next AI Draw.io",
@@ -17,18 +17,7 @@ export const metadata: Metadata = {
     ],
 }
 
-function formatNumber(num: number): string {
-    if (num >= 1000) {
-        return `${num / 1000}k`
-    }
-    return num.toString()
-}
-
 export default function AboutJA() {
-    const dailyRequestLimit = Number(process.env.DAILY_REQUEST_LIMIT) || 20
-    const dailyTokenLimit = Number(process.env.DAILY_TOKEN_LIMIT) || 500000
-    const tpmLimit = Number(process.env.TPM_LIMIT) || 50000
-
     return (
         <div className="min-h-screen bg-gray-50">
             {/* Navigation */}
@@ -116,42 +105,6 @@ export default function AboutJA() {
                                 </p>
                             </div>
 
-                            {/* Usage Limits */}
-                            <p className="text-sm text-gray-600 mb-3">
-                                現在の使用制限：
-                            </p>
-                            <div className="grid grid-cols-3 gap-3 mb-5">
-                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    <p className="text-lg font-bold text-amber-600">
-                                        {formatNumber(dailyRequestLimit)}
-                                    </p>
-                                    <p className="text-xs text-gray-500">
-                                        リクエスト/日
-                                    </p>
-                                </div>
-                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    <p className="text-lg font-bold text-amber-600">
-                                        {formatNumber(dailyTokenLimit)}
-                                    </p>
-                                    <p className="text-xs text-gray-500">
-                                        トークン/日
-                                    </p>
-                                </div>
-                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    <p className="text-lg font-bold text-amber-600">
-                                        {formatNumber(tpmLimit)}
-                                    </p>
-                                    <p className="text-xs text-gray-500">
-                                        トークン/分
-                                    </p>
-                                </div>
-                            </div>
-
-                            {/* Divider */}
-                            <div className="flex items-center gap-3 my-5">
-                                <div className="flex-1 h-px bg-gradient-to-r from-transparent via-amber-300 to-transparent" />
-                            </div>
-
                             {/* Bring Your Own Key */}
                             <div className="text-center">
                                 <h4 className="text-base font-bold text-gray-900 mb-2">
@@ -354,11 +307,13 @@ 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>
                         <li>DeepSeek</li>
                         <li>SiliconFlow</li>
+                        <li>ModelScope</li>
                     </ul>
                     <p className="text-gray-700 mt-4">
                         注：<code>claude-sonnet-4-5</code>

app/[lang]/about/page.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next"
-import Image from "next/image"
 import Link from "next/link"
 import { FaGithub } from "react-icons/fa"
+import Image from "@/components/image-with-basepath"
 
 export const metadata: Metadata = {
     title: "About - Next AI Draw.io",
@@ -17,18 +17,7 @@ export const metadata: Metadata = {
     ],
 }
 
-function formatNumber(num: number): string {
-    if (num >= 1000) {
-        return `${num / 1000}k`
-    }
-    return num.toString()
-}
-
 export default function About() {
-    const dailyRequestLimit = Number(process.env.DAILY_REQUEST_LIMIT) || 20
-    const dailyTokenLimit = Number(process.env.DAILY_TOKEN_LIMIT) || 500000
-    const tpmLimit = Number(process.env.TPM_LIMIT) || 50000
-
     return (
         <div className="min-h-screen bg-gray-50">
             {/* Navigation */}
@@ -118,42 +107,6 @@ export default function About() {
                                 </p>
                             </div>
 
-                            {/* Usage Limits */}
-                            <p className="text-sm text-gray-600 mb-3">
-                                Please note the current usage limits:
-                            </p>
-                            <div className="grid grid-cols-3 gap-3 mb-5">
-                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    <p className="text-lg font-bold text-amber-600">
-                                        {formatNumber(dailyRequestLimit)}
-                                    </p>
-                                    <p className="text-xs text-gray-500">
-                                        requests/day
-                                    </p>
-                                </div>
-                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    <p className="text-lg font-bold text-amber-600">
-                                        {formatNumber(dailyTokenLimit)}
-                                    </p>
-                                    <p className="text-xs text-gray-500">
-                                        tokens/day
-                                    </p>
-                                </div>
-                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    <p className="text-lg font-bold text-amber-600">
-                                        {formatNumber(tpmLimit)}
-                                    </p>
-                                    <p className="text-xs text-gray-500">
-                                        tokens/min
-                                    </p>
-                                </div>
-                            </div>
-
-                            {/* Divider */}
-                            <div className="flex items-center gap-3 my-5">
-                                <div className="flex-1 h-px bg-gradient-to-r from-transparent via-amber-300 to-transparent" />
-                            </div>
-
                             {/* Bring Your Own Key */}
                             <div className="text-center">
                                 <h4 className="text-base font-bold text-gray-900 mb-2">
@@ -373,11 +326,13 @@ 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>
                         <li>DeepSeek</li>
                         <li>SiliconFlow</li>
+                        <li>ModelScope</li>
                     </ul>
                     <p className="text-gray-700 mt-4">
                         Note that <code>claude-sonnet-4-5</code> has trained on

app/[lang]/layout.tsx

@@ -41,19 +41,24 @@ export async function generateMetadata({
     params: Promise<{ lang: string }>
 }): Promise<Metadata> {
     const { lang: rawLang } = await params
-    const lang = (rawLang in { en: 1, zh: 1, ja: 1 } ? rawLang : "en") as Locale
+    const lang = (
+        rawLang in { en: 1, zh: 1, ja: 1, "zh-Hant": 1 } ? rawLang : "en"
+    ) as Locale
 
     // Default to English metadata
     const titles: Record<Locale, string> = {
         en: "Next AI Draw.io - AI-Powered Diagram Generator",
         zh: "Next AI Draw.io - AI powered diagram generator",
         ja: "Next AI Draw.io - AI-powered diagram generator",
+        "zh-Hant": "Next AI Draw.io - AI 驅動的圖表產生器",
     }
 
     const descriptions: Record<Locale, string> = {
         en: "Create AWS architecture diagrams, flowcharts, and technical diagrams using AI. Free online tool integrating draw.io with AI assistance for professional diagram creation.",
         zh: "Use AI to create AWS architecture diagrams, flowcharts, and technical diagrams. Free online tool integrated with draw.io and AI assistance for professional diagram creation.",
         ja: "Create AWS architecture diagrams, flowcharts, and technical diagrams using AI. Create professional diagrams with a free online tool that integrates draw.io with an AI assistant.",
+        "zh-Hant":
+            "使用 AI 建立 AWS 架構圖、流程圖和技術圖表。免費線上工具整合 draw.io 與 AI 輔助，輕鬆建立專業圖表。",
     }
 
     return {
@@ -80,7 +85,14 @@ export async function generateMetadata({
             type: "website",
             url: "https://next-ai-drawio.jiang.jp",
             siteName: "Next AI Draw.io",
-            locale: lang === "zh" ? "zh_CN" : lang === "ja" ? "ja_JP" : "en_US",
+            locale:
+                lang === "zh"
+                    ? "zh_CN"
+                    : lang === "zh-Hant"
+                      ? "zh_HK"
+                      : lang === "ja"
+                        ? "ja_JP"
+                        : "en_US",
             images: [
                 {
                     url: "/architecture.png",
@@ -115,6 +127,7 @@ export async function generateMetadata({
                 en: "/en",
                 zh: "/zh",
                 ja: "/ja",
+                "zh-Hant": "/zh-Hant",
             },
         },
     }

app/[lang]/page.tsx

@@ -4,7 +4,6 @@ import { Suspense, useCallback, useEffect, useRef, useState } from "react"
 import { DrawIoEmbed } from "react-drawio"
 import type { ImperativePanelHandle } from "react-resizable-panels"
 import ChatPanel from "@/components/chat-panel"
-import { STORAGE_CLOSE_PROTECTION_KEY } from "@/components/settings-dialog"
 import {
     ResizableHandle,
     ResizablePanel,
@@ -13,9 +12,6 @@ import {
 import { useDiagram } from "@/contexts/diagram-context"
 import { i18n, type Locale } from "@/lib/i18n/config"
 
-const drawioBaseUrl =
-    process.env.NEXT_PUBLIC_DRAWIO_BASE_URL || "https://embed.diagrams.net"
-
 export default function Home() {
     const { drawioRef, handleDiagramExport, onDrawioLoad, resetDrawioReady } =
         useDiagram()
@@ -29,7 +25,10 @@ export default function Home() {
     const [darkMode, setDarkMode] = useState(false)
     const [isLoaded, setIsLoaded] = useState(false)
     const [isDrawioReady, setIsDrawioReady] = useState(false)
-    const [closeProtection, setCloseProtection] = useState(false)
+    const [isElectron, setIsElectron] = 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)
@@ -66,11 +65,15 @@ export default function Home() {
             document.documentElement.classList.toggle("dark", prefersDark)
         }
 
-        const savedCloseProtection = localStorage.getItem(
-            STORAGE_CLOSE_PROTECTION_KEY,
-        )
-        if (savedCloseProtection === "true") {
-            setCloseProtection(true)
+        // 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`)
         }
 
         setIsLoaded(true)
@@ -146,20 +149,6 @@ export default function Home() {
         return () => window.removeEventListener("keydown", handleKeyDown)
     }, [])
 
-    // Show confirmation dialog when user tries to leave the page
-    useEffect(() => {
-        if (!closeProtection) return
-
-        const handleBeforeUnload = (event: BeforeUnloadEvent) => {
-            event.preventDefault()
-            return ""
-        }
-
-        window.addEventListener("beforeunload", handleBeforeUnload)
-        return () =>
-            window.removeEventListener("beforeunload", handleBeforeUnload)
-    }, [closeProtection])
-
     return (
         <div className="h-screen bg-background relative overflow-hidden">
             <ResizablePanelGroup
@@ -183,7 +172,7 @@ export default function Home() {
                                     className={`h-full w-full ${isDrawioReady ? "" : "invisible absolute inset-0"}`}
                                 >
                                     <DrawIoEmbed
-                                        key={`${drawioUi}-${darkMode}-${currentLang}`}
+                                        key={`${drawioUi}-${darkMode}-${currentLang}-${isElectron}`}
                                         ref={drawioRef}
                                         onExport={handleDiagramExport}
                                         onLoad={handleDrawioLoad}
@@ -197,6 +186,10 @@ export default function Home() {
                                             noExitBtn: true,
                                             dark: darkMode,
                                             lang: currentLang,
+                                            // Enable offline mode in Electron to disable external service calls
+                                            ...(isElectron && {
+                                                offline: true,
+                                            }),
                                         }}
                                     />
                                 </div>
@@ -243,7 +236,6 @@ export default function Home() {
                                 darkMode={darkMode}
                                 onToggleDarkMode={handleDarkModeChange}
                                 isMobile={isMobile}
-                                onCloseProtectionChange={setCloseProtection}
                             />
                         </Suspense>
                     </div>

app/api/chat/route.ts

@@ -18,6 +18,11 @@ import {
     supportsPromptCaching,
 } from "@/lib/ai-providers"
 import { findCachedResponse } from "@/lib/cached-responses"
+import {
+    isMinimalDiagram,
+    replaceHistoricalToolInputs,
+    validateFileParts,
+} from "@/lib/chat-helpers"
 import {
     checkAndIncrementRequest,
     isQuotaEnabled,
@@ -29,98 +34,12 @@ 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"
 
 export const maxDuration = 120
 
-// File upload limits (must match client-side)
-const MAX_FILE_SIZE = 2 * 1024 * 1024 // 2MB
-const MAX_FILES = 5
-
-// Helper function to validate file parts in messages
-function validateFileParts(messages: any[]): {
-    valid: boolean
-    error?: string
-} {
-    const lastMessage = messages[messages.length - 1]
-    const fileParts =
-        lastMessage?.parts?.filter((p: any) => p.type === "file") || []
-
-    if (fileParts.length > MAX_FILES) {
-        return {
-            valid: false,
-            error: `Too many files. Maximum ${MAX_FILES} allowed.`,
-        }
-    }
-
-    for (const filePart of fileParts) {
-        // Data URLs format: data:image/png;base64,<data>
-        // Base64 increases size by ~33%, so we check the decoded size
-        if (filePart.url?.startsWith("data:")) {
-            const base64Data = filePart.url.split(",")[1]
-            if (base64Data) {
-                const sizeInBytes = Math.ceil((base64Data.length * 3) / 4)
-                if (sizeInBytes > MAX_FILE_SIZE) {
-                    return {
-                        valid: false,
-                        error: `File exceeds ${MAX_FILE_SIZE / 1024 / 1024}MB limit.`,
-                    }
-                }
-            }
-        }
-    }
-
-    return { valid: true }
-}
-
-// Helper function to check if diagram is minimal/empty
-function isMinimalDiagram(xml: string): boolean {
-    const stripped = xml.replace(/\s/g, "")
-    return !stripped.includes('id="2"')
-}
-
-// Helper function to replace historical tool call XML with placeholders
-// This reduces token usage and forces LLM to rely on the current diagram XML (source of truth)
-// Also fixes invalid/undefined inputs from interrupted streaming
-function replaceHistoricalToolInputs(messages: any[]): any[] {
-    return messages.map((msg) => {
-        if (msg.role !== "assistant" || !Array.isArray(msg.content)) {
-            return msg
-        }
-        const replacedContent = msg.content
-            .map((part: any) => {
-                if (part.type === "tool-call") {
-                    const toolName = part.toolName
-                    // Fix invalid/undefined inputs from interrupted streaming
-                    if (
-                        !part.input ||
-                        typeof part.input !== "object" ||
-                        Object.keys(part.input).length === 0
-                    ) {
-                        // Skip tool calls with invalid inputs entirely
-                        return null
-                    }
-                    if (
-                        toolName === "display_diagram" ||
-                        toolName === "edit_diagram"
-                    ) {
-                        return {
-                            ...part,
-                            input: {
-                                placeholder:
-                                    "[XML content replaced - see current diagram XML in system context]",
-                            },
-                        }
-                    }
-                }
-                return part
-            })
-            .filter(Boolean) // Remove null entries (invalid tool calls)
-        return { ...msg, content: replacedContent }
-    })
-}
-
 // Helper function to create cached stream response
 function createCachedStreamResponse(xml: string): Response {
     const toolCallId = `cached-${Date.now()}`
@@ -199,7 +118,10 @@ 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-api-key")
+        req.headers.get("x-ai-provider") &&
+        (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
@@ -250,6 +172,7 @@ 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
@@ -261,8 +184,30 @@ 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 = {
-        provider,
+        // Server model provider takes precedence over client header
+        provider: serverModelConfig.provider || provider,
         baseUrl,
         apiKey: req.headers.get("x-ai-api-key"),
         modelId: req.headers.get("x-ai-model"),
@@ -271,6 +216,10 @@ 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 && {
@@ -281,6 +230,10 @@ 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)
@@ -523,6 +476,13 @@ ${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

@@ -0,0 +1,104 @@
+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
+
+export async function POST(req: Request) {
+    try {
+        const { url } = await req.json()
+
+        if (!url || typeof url !== "string") {
+            return NextResponse.json(
+                { error: "URL is required" },
+                { status: 400 },
+            )
+        }
+
+        // Validate URL format
+        try {
+            new URL(url)
+        } catch {
+            return NextResponse.json(
+                { error: "Invalid URL format" },
+                { status: 400 },
+            )
+        }
+
+        // SSRF protection
+        if (!allowPrivateUrls && isPrivateUrl(url)) {
+            return NextResponse.json(
+                { error: "Cannot access private/internal URLs" },
+                { status: 400 },
+            )
+        }
+
+        // Extract article content with timeout to avoid tying up server resources
+        const controller = new AbortController()
+        const timeoutId = setTimeout(() => {
+            controller.abort()
+        }, EXTRACT_TIMEOUT_MS)
+
+        let article
+        try {
+            article = await extract(url, undefined, {
+                headers: {
+                    "User-Agent": "Mozilla/5.0 (compatible; NextAIDrawio/1.0)",
+                },
+                signal: controller.signal,
+            })
+        } catch (err: any) {
+            if (err?.name === "AbortError") {
+                return NextResponse.json(
+                    { error: "Timed out while fetching URL content" },
+                    { status: 504 },
+                )
+            }
+            throw err
+        } finally {
+            clearTimeout(timeoutId)
+        }
+
+        if (!article || !article.content) {
+            return NextResponse.json(
+                { error: "Could not extract content from URL" },
+                { status: 400 },
+            )
+        }
+
+        // Convert HTML to Markdown
+        const turndownService = new TurndownService({
+            headingStyle: "atx",
+            codeBlockStyle: "fenced",
+        })
+
+        // Remove unwanted elements before conversion
+        turndownService.remove(["script", "style", "iframe", "noscript"])
+
+        const markdown = turndownService.turndown(article.content)
+
+        // Check content length
+        if (markdown.length > MAX_CONTENT_LENGTH) {
+            return NextResponse.json(
+                {
+                    error: `Content exceeds ${MAX_CONTENT_LENGTH / 1000}k character limit (${(markdown.length / 1000).toFixed(1)}k chars)`,
+                },
+                { status: 400 },
+            )
+        }
+
+        return NextResponse.json({
+            title: article.title || "Untitled",
+            content: markdown,
+            charCount: markdown.length,
+        })
+    } catch (error) {
+        console.error("URL extraction error:", error)
+        return NextResponse.json(
+            { error: "Failed to fetch or parse URL content" },
+            { status: 500 },
+        )
+    }
+}

app/api/server-models/route.ts

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

@@ -0,0 +1,136 @@
+/**
+ * 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,74 +3,16 @@ 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
@@ -80,6 +22,8 @@ interface ValidateRequest {
     awsAccessKeyId?: string
     awsSecretAccessKey?: string
     awsRegion?: string
+    // Vertex AI specific
+    vertexApiKey?: string // Express Mode API key
 }
 
 export async function POST(req: Request) {
@@ -93,6 +37,8 @@ export async function POST(req: Request) {
             awsAccessKeyId,
             awsSecretAccessKey,
             awsRegion,
+            // Note: Express Mode only needs vertexApiKey
+            vertexApiKey,
         } = body
 
         if (!provider || !modelId) {
@@ -103,7 +49,7 @@ export async function POST(req: Request) {
         }
 
         // SECURITY: Block SSRF attacks via custom baseUrl
-        if (baseUrl && isPrivateUrl(baseUrl)) {
+        if (baseUrl && !allowPrivateUrls && isPrivateUrl(baseUrl)) {
             return NextResponse.json(
                 { valid: false, error: "Invalid base URL" },
                 { status: 400 },
@@ -121,6 +67,16 @@ 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" },
@@ -158,6 +114,15 @@ 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,
@@ -202,7 +167,7 @@ export async function POST(req: Request) {
             case "siliconflow": {
                 const sf = createOpenAI({
                     apiKey,
-                    baseURL: baseUrl || "https://api.siliconflow.com/v1",
+                    baseURL: baseUrl || "https://api.siliconflow.cn/v1",
                 })
                 model = sf.chat(modelId)
                 break
@@ -251,16 +216,98 @@ export async function POST(req: Request) {
             }
 
             case "doubao": {
-                // ByteDance Doubao uses DeepSeek-compatible API
-                const doubao = createDeepSeek({
-                    apiKey,
-                    baseURL:
-                        baseUrl || "https://ark.cn-beijing.volces.com/api/v3",
-                })
-                model = doubao(modelId)
+                // ByteDance Doubao: use DeepSeek for DeepSeek/Kimi models, OpenAI for others
+                const doubaoBaseUrl =
+                    baseUrl || "https://ark.cn-beijing.volces.com/api/v3"
+                const lowerModelId = modelId.toLowerCase()
+                if (
+                    lowerModelId.includes("deepseek") ||
+                    lowerModelId.includes("kimi")
+                ) {
+                    const doubao = createDeepSeek({
+                        apiKey,
+                        baseURL: doubaoBaseUrl,
+                    })
+                    model = doubao(modelId)
+                } else {
+                    const doubao = createOpenAI({
+                        apiKey,
+                        baseURL: doubaoBaseUrl,
+                    })
+                    model = doubao.chat(modelId)
+                }
                 break
             }
 
+            case "modelscope": {
+                const baseURL =
+                    baseUrl || "https://api-inference.modelscope.cn/v1"
+                const startTime = Date.now()
+
+                try {
+                    // Initiate a streaming request (required for QwQ-32B and certain Qwen3 models)
+                    const response = await fetch(
+                        `${baseURL}/chat/completions`,
+                        {
+                            method: "POST",
+                            headers: {
+                                "Content-Type": "application/json",
+                                Authorization: `Bearer ${apiKey}`,
+                            },
+                            body: JSON.stringify({
+                                model: modelId,
+                                messages: [
+                                    { role: "user", content: "Say 'OK'" },
+                                ],
+                                max_tokens: 20,
+                                stream: true,
+                                enable_thinking: false,
+                            }),
+                        },
+                    )
+
+                    if (!response.ok) {
+                        const errorText = await response.text()
+                        throw new Error(
+                            `ModelScope API error (${response.status}): ${errorText}`,
+                        )
+                    }
+
+                    const contentType =
+                        response.headers.get("content-type") || ""
+                    const isValidStreamingResponse =
+                        response.status === 200 &&
+                        (contentType.includes("text/event-stream") ||
+                            contentType.includes("application/json"))
+
+                    if (!isValidStreamingResponse) {
+                        throw new Error(
+                            `Unexpected response format: ${contentType}`,
+                        )
+                    }
+
+                    const responseTime = Date.now() - startTime
+
+                    if (response.body) {
+                        response.body.cancel().catch(() => {
+                            /* Ignore cancellation errors */
+                        })
+                    }
+
+                    return NextResponse.json({
+                        valid: true,
+                        responseTime,
+                        note: "ModelScope model validated (using streaming API)",
+                    })
+                } catch (error) {
+                    console.error(
+                        "[validate-model] ModelScope validation failed:",
+                        error,
+                    )
+                    throw error
+                }
+            }
+
             default:
                 return NextResponse.json(
                     { valid: false, error: `Unknown provider: ${provider}` },

app/globals.css

@@ -244,6 +244,19 @@
     .scrollbar-thin::-webkit-scrollbar-thumb:hover {
         background-color: oklch(0.75 0.01 260);
     }
+
+    /* Dark mode scrollbar */
+    .dark .scrollbar-thin {
+        scrollbar-color: oklch(0.35 0.015 260) transparent;
+    }
+
+    .dark .scrollbar-thin::-webkit-scrollbar-thumb {
+        background-color: oklch(0.35 0.015 260);
+    }
+
+    .dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
+        background-color: oklch(0.45 0.015 260);
+    }
 }
 
 /* Smooth page transitions */

components/ai-elements/model-selector.tsx

@@ -134,6 +134,7 @@ export const ModelSelectorLogo = ({
     }
 
     return (
+        // biome-ignore lint/performance/noImgElement: External URL from models.dev
         <img
             {...props}
             alt={`${provider} logo`}
@@ -168,3 +169,27 @@ 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

@@ -4,11 +4,19 @@ import {
     Download,
     History,
     Image as ImageIcon,
+    Link,
     Loader2,
     Send,
 } from "lucide-react"
 import type React from "react"
-import { useCallback, useEffect, useRef, useState } from "react"
+import {
+    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"
@@ -18,11 +26,15 @@ import { SaveDialog } from "@/components/save-dialog"
 
 import { Button } from "@/components/ui/button"
 import { Textarea } from "@/components/ui/textarea"
+import { UrlInputDialog } from "@/components/url-input-dialog"
 import { useDiagram } from "@/contexts/diagram-context"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { formatMessage } from "@/lib/i18n/utils"
 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
@@ -133,6 +145,10 @@ function showValidationErrors(errors: string[], dict: any) {
     }
 }
 
+export interface ChatInputRef {
+    focus: () => void
+}
+
 interface ChatInputProps {
     input: string
     status: "submitted" | "streaming" | "ready" | "error"
@@ -144,6 +160,8 @@ interface ChatInputProps {
         File,
         { text: string; charCount: number; isExtracting: boolean }
     >
+    urlData?: Map<string, UrlData>
+    onUrlChange?: (data: Map<string, UrlData>) => void
 
     sessionId?: string
     error?: Error | null
@@ -152,93 +170,216 @@ interface ChatInputProps {
     selectedModelId?: string
     onModelSelect?: (modelId: string | undefined) => void
     showUnvalidatedModels?: boolean
-    onConfigureModels?: () => void
+    // Focus control props
+    shouldFocus?: boolean
+    onFocused?: () => void
 }
 
-export function ChatInput({
-    input,
-    status,
-    onSubmit,
-    onChange,
-    files = [],
-    onFileChange = () => {},
-    pdfData = new Map(),
-    sessionId,
-    error = null,
-    models = [],
-    selectedModelId,
-    onModelSelect = () => {},
-    showUnvalidatedModels = false,
-    onConfigureModels = () => {},
-}: ChatInputProps) {
-    const dict = useDictionary()
-    const {
-        diagramHistory,
-        saveDiagramToFile,
-        showSaveDialog,
-        setShowSaveDialog,
-    } = useDiagram()
+export const ChatInput = forwardRef<ChatInputRef, ChatInputProps>(
+    function ChatInput(
+        {
+            input,
+            status,
+            onSubmit,
+            onChange,
+            files = [],
+            onFileChange = () => {},
+            pdfData = new Map(),
+            urlData,
+            onUrlChange,
+            sessionId,
+            error = null,
+            models = [],
+            selectedModelId,
+            onModelSelect = () => {},
+            showUnvalidatedModels = false,
+            shouldFocus = false,
+            onFocused,
+        },
+        ref,
+    ) {
+        const dict = useDictionary()
+        const {
+            chartXML,
+            diagramHistory,
+            saveDiagramToFile,
+            showSaveDialog,
+            setShowSaveDialog,
+        } = useDiagram()
 
-    const textareaRef = useRef<HTMLTextAreaElement>(null)
-    const fileInputRef = useRef<HTMLInputElement>(null)
-    const [isDragging, setIsDragging] = useState(false)
-    const [showHistory, setShowHistory] = useState(false)
-    // Allow retry when there's an error (even if status is still "streaming" or "submitted")
-    const isDisabled =
-        (status === "streaming" || status === "submitted") && !error
+        const textareaRef = useRef<HTMLTextAreaElement>(null)
+        const fileInputRef = useRef<HTMLInputElement>(null)
+        const [isDragging, setIsDragging] = useState(false)
 
-    const adjustTextareaHeight = useCallback(() => {
-        const textarea = textareaRef.current
-        if (textarea) {
-            textarea.style.height = "auto"
-            textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`
+        // Expose focus method via ref
+        useImperativeHandle(ref, () => ({
+            focus: () => {
+                textareaRef.current?.focus()
+            },
+        }))
+
+        // Focus the textarea when shouldFocus becomes true
+        // Use setTimeout to ensure focus happens after drawio iframe settles
+        useEffect(() => {
+            if (shouldFocus) {
+                const timer = setTimeout(() => {
+                    textareaRef.current?.focus()
+                    onFocused?.()
+                }, 150)
+                return () => clearTimeout(timer)
+            }
+        }, [shouldFocus, onFocused])
+
+        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
+
+        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>) => {
+            onChange(e)
+            adjustTextareaHeight()
         }
-    }, [])
-    // Handle programmatic input changes (e.g., setInput("") after form submission)
-    useEffect(() => {
-        adjustTextareaHeight()
-    }, [input, adjustTextareaHeight])
 
-    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        onChange(e)
-        adjustTextareaHeight()
-    }
+        const handleKeyDown = (e: React.KeyboardEvent) => {
+            const shouldSend =
+                sendShortcut === "enter"
+                    ? e.key === "Enter" &&
+                      !e.shiftKey &&
+                      !e.ctrlKey &&
+                      !e.metaKey
+                    : (e.metaKey || e.ctrlKey) && e.key === "Enter"
 
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-        if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-            e.preventDefault()
-            const form = e.currentTarget.closest("form")
-            if (form && input.trim() && !isDisabled) {
-                form.requestSubmit()
+            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 handlePaste = async (e: React.ClipboardEvent) => {
+            if (isDisabled) return
 
-        const items = e.clipboardData.items
-        const imageItems = Array.from(items).filter((item) =>
-            item.type.startsWith("image/"),
-        )
+            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 },
-                        )
-                    }),
+            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,
                 )
-            ).filter((f): f is File => f !== null)
+                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(
-                imageFiles,
+                supportedFiles,
                 files.length,
                 dict,
             )
@@ -247,202 +388,218 @@ export function ChatInput({
                 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])
+        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)
+            }
         }
 
-        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])
-        }
-    }
-
-    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 previews */}
-            {files.length > 0 && (
-                <div className="mb-3">
-                    <FilePreviewList
-                        files={files}
-                        onRemoveFile={handleRemoveFile}
-                        pdfData={pdfData}
-                    />
-                </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"
-                />
-
-                <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>
-
-                        <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}
+        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>
-                    <ModelSelector
-                        models={models}
-                        selectedModelId={selectedModelId}
-                        onSelect={onModelSelect}
-                        onConfigure={onConfigureModels}
+                )}
+                <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}
-                        showUnvalidatedModels={showUnvalidatedModels}
+                        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="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 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}
+                            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>
-            </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)}`}
-            />
-        </form>
-    )
-}
+                <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,13 +9,13 @@ import {
     Copy,
     FileCode,
     FileText,
+    Link,
     Pencil,
     RotateCcw,
     ThumbsDown,
     ThumbsUp,
     X,
 } from "lucide-react"
-import Image from "next/image"
 import type { MutableRefObject } from "react"
 import { useCallback, useEffect, useRef, useState } from "react"
 import ReactMarkdown from "react-markdown"
@@ -28,6 +28,9 @@ 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 Image from "@/components/image-with-basepath"
 import { ScrollArea } from "@/components/ui/scroll-area"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { getApiEndpoint } from "@/lib/base-path"
@@ -38,7 +41,6 @@ import {
     replaceNodes,
     validateAndFixXml,
 } from "@/lib/utils"
-import ExamplePanel from "./chat-example-panel"
 
 // Helper to extract complete operations from streaming input
 function getCompleteOperations(
@@ -58,20 +60,20 @@ function getCompleteOperations(
 
 import { useDiagram } from "@/contexts/diagram-context"
 
-// Helper to split text content into regular text and file sections (PDF or text files)
+// Helper to split text content into regular text and file/URL sections (PDF, text files, or URLs)
 interface TextSection {
-    type: "text" | "file"
+    type: "text" | "file" | "url"
     content: string
     filename?: string
     charCount?: number
-    fileType?: "pdf" | "text"
+    fileType?: "pdf" | "text" | "url"
 }
 
 function splitTextIntoFileSections(text: string): TextSection[] {
     const sections: TextSection[] = []
-    // Match [PDF: filename] or [File: filename] patterns
+    // Match [PDF: filename], [File: filename], or [URL: url] patterns
     const filePattern =
-        /\[(PDF|File):\s*([^\]]+)\]\n([\s\S]*?)(?=\n\n\[(PDF|File):|$)/g
+        /\[(PDF|File|URL):\s*([^\]]+)\]\n([\s\S]*?)(?=\n\n\[(PDF|File|URL):|$)/g
     let lastIndex = 0
     let match
 
@@ -82,28 +84,34 @@ function splitTextIntoFileSections(text: string): TextSection[] {
             sections.push({ type: "text", content: beforeText })
         }
 
-        // Add file section
-        const fileType = match[1].toLowerCase() === "pdf" ? "pdf" : "text"
+        // Add file/url section
+        const sectionType = match[1].toLowerCase()
+        const fileType =
+            sectionType === "pdf"
+                ? "pdf"
+                : sectionType === "url"
+                  ? "url"
+                  : "text"
         const filename = match[2].trim()
-        const fileContent = match[3].trim()
+        const content = match[3].trim()
         sections.push({
-            type: "file",
-            content: fileContent,
+            type: sectionType === "url" ? "url" : "file",
+            content: content,
             filename,
-            charCount: fileContent.length,
+            charCount: content.length,
             fileType,
         })
 
         lastIndex = match.index + match[0].length
     }
 
-    // Add remaining text after last file section
+    // Add remaining text after last section
     const remainingText = text.slice(lastIndex).trim()
     if (remainingText) {
         sections.push({ type: "text", content: remainingText })
     }
 
-    // If no file sections found, return original text
+    // If no file/url sections found, return original text
     if (sections.length === 0) {
         sections.push({ type: "text", content: text })
     }
@@ -122,8 +130,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: ...] and [File: ...] sections that were appended
-    const filePattern = /\n\n\[(PDF|File):\s*[^\]]+\]\n[\s\S]*$/
+    // Strip out [PDF: ...], [File: ...], and [URL: ...] sections that were appended
+    const filePattern = /\n\n\[(PDF|File|URL):\s*[^\]]+\]\n[\s\S]*$/
     return fullText.replace(filePattern, "").trim()
 }
 
@@ -149,6 +157,8 @@ 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({
@@ -166,6 +176,8 @@ export function ChatMessageDisplay({
     onSelectSession,
     onDeleteSession,
     loadedMessageIdsRef,
+    validationStates = {},
+    onImproveWithSuggestions,
 }: ChatMessageDisplayProps) {
     const dict = useDictionary()
     const { chartXML, loadDiagram: onDisplayChart } = useDiagram()
@@ -430,11 +442,15 @@ 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) => ({
-                                ...prev,
-                                [toolCallId]: false,
-                            }))
+                            setExpandedTools((prev) => {
+                                // Only auto-collapse if not already set (user hasn't interacted)
+                                if (prev[toolCallId] === undefined) {
+                                    return { ...prev, [toolCallId]: false }
+                                }
+                                return prev
+                            })
                         }
 
                         if (
@@ -912,30 +928,56 @@ 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 (
-                                                            <ToolCallCard
+                                                            <div
                                                                 key={`${message.id}-tool-${group.startIndex}`}
-                                                                part={
-                                                                    group
-                                                                        .parts[0] as ToolPartLike
-                                                                }
-                                                                expandedTools={
-                                                                    expandedTools
-                                                                }
-                                                                setExpandedTools={
-                                                                    setExpandedTools
-                                                                }
-                                                                onCopy={
-                                                                    copyMessageToClipboard
-                                                                }
-                                                                copiedToolCallId={
-                                                                    copiedToolCallId
-                                                                }
-                                                                copyFailedToolCallId={
-                                                                    copyFailedToolCallId
-                                                                }
-                                                                dict={dict}
-                                                            />
+                                                            >
+                                                                <ToolCallCard
+                                                                    part={
+                                                                        toolPart
+                                                                    }
+                                                                    expandedTools={
+                                                                        expandedTools
+                                                                    }
+                                                                    setExpandedTools={
+                                                                        setExpandedTools
+                                                                    }
+                                                                    onCopy={
+                                                                        copyMessageToClipboard
+                                                                    }
+                                                                    copiedToolCallId={
+                                                                        copiedToolCallId
+                                                                    }
+                                                                    copyFailedToolCallId={
+                                                                        copyFailedToolCallId
+                                                                    }
+                                                                    dict={dict}
+                                                                />
+                                                                {/* Show validation card for display_diagram tools */}
+                                                                {isDisplayDiagram &&
+                                                                    validationState && (
+                                                                        <ValidationCard
+                                                                            state={
+                                                                                validationState
+                                                                            }
+                                                                            onImproveWithSuggestions={
+                                                                                onImproveWithSuggestions
+                                                                            }
+                                                                        />
+                                                                    )}
+                                                            </div>
                                                         )
                                                     }
 
@@ -1049,12 +1091,14 @@ export function ChatMessageDisplay({
                                                                                     ) => {
                                                                                         if (
                                                                                             section.type ===
-                                                                                            "file"
+                                                                                                "file" ||
+                                                                                            section.type ===
+                                                                                                "url"
                                                                                         ) {
-                                                                                            const pdfKey = `${message.id}-file-${partIndex}-${sectionIndex}`
+                                                                                            const sectionKey = `${message.id}-${section.type}-${partIndex}-${sectionIndex}`
                                                                                             const isExpanded =
                                                                                                 expandedPdfSections[
-                                                                                                    pdfKey
+                                                                                                    sectionKey
                                                                                                 ] ??
                                                                                                 false
                                                                                             const charDisplay =
@@ -1063,10 +1107,27 @@ 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={
-                                                                                                        pdfKey
+                                                                                                        sectionKey
                                                                                                     }
                                                                                                     className="rounded-lg border border-border/60 bg-muted/30 overflow-hidden"
                                                                                                 >
@@ -1081,7 +1142,7 @@ export function ChatMessageDisplay({
                                                                                                                     prev,
                                                                                                                 ) => ({
                                                                                                                     ...prev,
-                                                                                                                    [pdfKey]:
+                                                                                                                    [sectionKey]:
                                                                                                                         !isExpanded,
                                                                                                                 }),
                                                                                                             )
@@ -1089,13 +1150,10 @@ 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">
-                                                                                                            {section.fileType ===
-                                                                                                            "pdf" ? (
-                                                                                                                <FileText className="h-4 w-4 text-red-500" />
-                                                                                                            ) : (
-                                                                                                                <FileCode className="h-4 w-4 text-blue-500" />
-                                                                                                            )}
-                                                                                                            <span className="text-xs font-medium">
+                                                                                                            <Icon
+                                                                                                                className={`h-4 w-4 ${iconColor}`}
+                                                                                                            />
+                                                                                                            <span className="text-xs font-medium truncate max-w-[200px]">
                                                                                                                 {
                                                                                                                     section.filename
                                                                                                                 }
@@ -1115,7 +1173,7 @@ export function ChatMessageDisplay({
                                                                                                         )}
                                                                                                     </button>
                                                                                                     {isExpanded && (
-                                                                                                        <div className="px-3 py-2 border-t border-border/40 max-h-48 overflow-y-auto bg-muted/30">
+                                                                                                        <div className="px-3 py-2 border-t border-border/40 max-h-48 overflow-y-auto bg-muted/30 scrollbar-thin">
                                                                                                             <pre className="text-xs whitespace-pre-wrap text-foreground/80">
                                                                                                                 {
                                                                                                                     section.content

components/chat-panel.tsx

@@ -8,8 +8,7 @@ import {
     PanelRightOpen,
     Settings,
 } from "lucide-react"
-import Image from "next/image"
-import { useRouter, useSearchParams } from "next/navigation"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import type React from "react"
 import {
     useCallback,
@@ -22,6 +21,7 @@ import { flushSync } from "react-dom"
 import { Toaster, toast } from "sonner"
 import { ButtonWithTooltip } from "@/components/button-with-tooltip"
 import { ChatInput } from "@/components/chat-input"
+import Image from "@/components/image-with-basepath"
 import { ModelConfigDialog } from "@/components/model-config-dialog"
 import { SettingsDialog } from "@/components/settings-dialog"
 import { useDiagram } from "@/contexts/diagram-context"
@@ -29,14 +29,18 @@ 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"
 
@@ -69,13 +73,13 @@ interface ChatPanelProps {
     darkMode: boolean
     onToggleDarkMode: () => void
     isMobile?: boolean
-    onCloseProtectionChange?: (enabled: boolean) => void
 }
 
 // Constants for tool states
 const TOOL_ERROR_STATE = "output-error" as const
 const DEBUG = process.env.NODE_ENV === "development"
-const MAX_AUTO_RETRY_COUNT = 1
+// Increased to 3 to support VLM validation retries (matches MAX_VALIDATION_RETRIES)
+const MAX_AUTO_RETRY_COUNT = 3
 
 const MAX_CONTINUATION_RETRY_COUNT = 2 // Limit for truncation continuation retries
 
@@ -110,7 +114,6 @@ export default function ChatPanel({
     darkMode,
     onToggleDarkMode,
     isMobile = false,
-    onCloseProtectionChange,
 }: ChatPanelProps) {
     const {
         loadDiagram: onDisplayChart,
@@ -121,12 +124,14 @@ export default function ChatPanel({
         latestSvg,
         clearDiagram,
         getThumbnailSvg,
+        captureValidationPng,
         diagramHistory,
         setDiagramHistory,
     } = useDiagram()
 
     const dict = useDictionary()
     const router = useRouter()
+    const pathname = usePathname()
     const searchParams = useSearchParams()
     const urlSessionId = searchParams.get("session")
 
@@ -158,6 +163,7 @@ export default function ChatPanel({
 
     // File processing using extracted hook
     const { files, pdfData, handleFileChange, setFiles } = useFileProcessor()
+    const [urlData, setUrlData] = useState<Map<string, UrlData>>(new Map())
 
     const [showSettingsDialog, setShowSettingsDialog] = useState(false)
     const [showModelConfigDialog, setShowModelConfigDialog] = useState(false)
@@ -173,6 +179,8 @@ 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(() => {
@@ -182,6 +190,14 @@ 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"))
@@ -269,6 +285,46 @@ 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,
@@ -277,6 +333,11 @@ export default function ChatPanel({
         onDisplayChart,
         onFetchChart,
         onExport,
+        captureValidationPng,
+        validateDiagram: validateWithFallback,
+        enableVlmValidation: vlmValidationEnabled,
+        sessionId,
+        onValidationStateChange: handleValidationStateChange,
     })
 
     const { messages, sendMessage, addToolOutput, status, error, setMessages } =
@@ -425,6 +486,11 @@ 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(() => {
@@ -710,6 +776,8 @@ export default function ChatPanel({
                         input,
                         files,
                         pdfData,
+                        undefined,
+                        urlData,
                     )
 
                     setMessages([
@@ -735,6 +803,7 @@ export default function ChatPanel({
                     setInput("")
                     sessionStorage.removeItem(SESSION_STORAGE_INPUT_KEY)
                     setFiles([])
+                    setUrlData(new Map())
                     return
                 }
             }
@@ -755,6 +824,7 @@ export default function ChatPanel({
                     files,
                     pdfData,
                     parts,
+                    urlData,
                 )
 
                 // Add the combined text as the first part
@@ -779,6 +849,7 @@ export default function ChatPanel({
                 setInput("")
                 sessionStorage.removeItem(SESSION_STORAGE_INPUT_KEY)
                 setFiles([])
+                setUrlData(new Map())
             } catch (error) {
                 console.error("Error fetching chart data:", error)
             }
@@ -814,6 +885,7 @@ export default function ChatPanel({
                 } else {
                     justLoadedSessionIdRef.current = null
                 }
+                setValidationStates({}) // Clear validation states when switching sessions
                 syncUIWithSession(sessionData)
                 router.replace(`?session=${sessionId}`, { scroll: false })
             }
@@ -830,10 +902,10 @@ export default function ChatPanel({
             if (result.wasCurrentSession) {
                 // Deleted current session - clear UI and URL
                 syncUIWithSession(null)
-                router.replace(window.location.pathname, { scroll: false })
+                router.replace(pathname, { scroll: false })
             }
         },
-        [sessionManager, syncUIWithSession, router],
+        [sessionManager, syncUIWithSession, router, pathname],
     )
 
     const handleNewChat = useCallback(async () => {
@@ -851,9 +923,12 @@ 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()
             .toString(36)
             .slice(2, 9)}`
@@ -863,7 +938,10 @@ export default function ChatPanel({
         toast.success(dict.dialogs.clearSuccess)
 
         // Clear URL param to show blank state
-        router.replace(window.location.pathname, { scroll: false })
+        router.replace(pathname, { scroll: false })
+
+        // After starting a fresh chat, move focus back to the chat input
+        setShouldFocusInput(true)
     }, [
         clearDiagram,
         handleFileChange,
@@ -875,6 +953,7 @@ export default function ChatPanel({
         dict.dialogs.clearSuccess,
         buildSessionData,
         setDiagramHistory,
+        pathname,
     ])
 
     const handleInputChange = (
@@ -957,6 +1036,14 @@ 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",
@@ -972,6 +1059,7 @@ export default function ChatPanel({
         files: File[],
         pdfData: Map<File, FileData>,
         imageParts?: any[],
+        urlDataParam?: Map<string, UrlData>,
     ): Promise<string> => {
         let userText = baseText
 
@@ -1002,6 +1090,14 @@ export default function ChatPanel({
             }
         }
 
+        if (urlDataParam) {
+            for (const [url, data] of urlDataParam) {
+                if (data.content) {
+                    userText += `\n\n[URL: ${url}]\nTitle: ${data.title}\n\n${data.content}`
+                }
+            }
+        }
+
         return userText
     }
 
@@ -1185,6 +1281,7 @@ export default function ChatPanel({
                                 status === "streaming" || status === "submitted"
                             }
                             className="hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed"
+                            data-testid="new-chat-button"
                         >
                             <MessageSquarePlus
                                 className={`${isMobile ? "h-4 w-4" : "h-5 w-5"} text-muted-foreground`}
@@ -1197,6 +1294,7 @@ export default function ChatPanel({
                             size="icon"
                             onClick={() => setShowSettingsDialog(true)}
                             className="hover:bg-accent"
+                            data-testid="settings-button"
                         >
                             <Settings
                                 className={`${isMobile ? "h-4 w-4" : "h-5 w-5"} text-muted-foreground`}
@@ -1236,6 +1334,8 @@ export default function ChatPanel({
                     onSelectSession={handleSelectSession}
                     onDeleteSession={handleDeleteSession}
                     loadedMessageIdsRef={loadedMessageIdsRef}
+                    validationStates={validationStates}
+                    onImproveWithSuggestions={handleImproveWithSuggestions}
                 />
             </main>
 
@@ -1262,26 +1362,31 @@ export default function ChatPanel({
                     files={files}
                     onFileChange={handleFileChange}
                     pdfData={pdfData}
+                    urlData={urlData}
+                    onUrlChange={setUrlData}
                     sessionId={sessionId}
                     error={error}
                     models={modelConfig.models}
                     selectedModelId={modelConfig.selectedModelId}
                     onModelSelect={modelConfig.setSelectedModelId}
                     showUnvalidatedModels={modelConfig.showUnvalidatedModels}
-                    onConfigureModels={() => setShowModelConfigDialog(true)}
+                    shouldFocus={shouldFocusInput}
+                    onFocused={() => setShouldFocusInput(false)}
                 />
             </footer>
 
             <SettingsDialog
                 open={showSettingsDialog}
                 onOpenChange={setShowSettingsDialog}
-                onCloseProtectionChange={onCloseProtectionChange}
                 drawioUi={drawioUi}
                 onToggleDrawioUi={onToggleDrawioUi}
                 darkMode={darkMode}
                 onToggleDarkMode={onToggleDarkMode}
                 minimalStyle={minimalStyle}
                 onMinimalStyleChange={setMinimalStyle}
+                vlmValidationEnabled={vlmValidationEnabled}
+                onVlmValidationChange={handleVlmValidationChange}
+                onOpenModelConfig={() => setShowModelConfigDialog(true)}
             />
 
             <ModelConfigDialog

components/chat/ChatLobby.tsx

@@ -8,9 +8,9 @@ import {
     Trash2,
     X,
 } from "lucide-react"
-import Image from "next/image"
 import { useState } from "react"
 import ExamplePanel from "@/components/chat-example-panel"
+import Image from "@/components/image-with-basepath"
 import {
     AlertDialog,
     AlertDialogAction,

components/chat/ToolCallCard.tsx

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

components/chat/ValidationCard.tsx

@@ -0,0 +1,328 @@
+"use client"
+
+import {
+    AlertTriangle,
+    Check,
+    ChevronDown,
+    ChevronUp,
+    Eye,
+    ImageIcon,
+    RefreshCw,
+    X,
+} from "lucide-react"
+import { useState } from "react"
+import Image from "@/components/image-with-basepath"
+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/file-preview-list.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import { FileCode, FileText, Loader2, X } from "lucide-react"
-import Image from "next/image"
+import { FileCode, FileText, Link, Loader2, X } from "lucide-react"
 import { useEffect, useRef, useState } from "react"
+import Image from "@/components/image-with-basepath"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
 
@@ -20,12 +20,19 @@ interface FilePreviewListProps {
         File,
         { text: string; charCount: number; isExtracting: boolean }
     >
+    urlData?: Map<
+        string,
+        { url: string; title: string; charCount: number; isExtracting: boolean }
+    >
+    onRemoveUrl?: (url: string) => void
 }
 
 export function FilePreviewList({
     files,
     onRemoveFile,
     pdfData = new Map(),
+    urlData,
+    onRemoveUrl,
 }: FilePreviewListProps) {
     const dict = useDictionary()
     const [selectedImage, setSelectedImage] = useState<string | null>(null)
@@ -77,7 +84,7 @@ export function FilePreviewList({
         }
     }, [imageUrls, selectedImage])
 
-    if (files.length === 0) return null
+    if (files.length === 0 && (!urlData || urlData.size === 0)) return null
 
     return (
         <>
@@ -152,6 +159,59 @@ export function FilePreviewList({
                         </div>
                     )
                 })}
+                {/* URL previews */}
+                {urlData && urlData.size > 0 && (
+                    <div className="flex flex-wrap gap-2">
+                        {Array.from(urlData.entries()).map(
+                            ([url, data], index) => (
+                                <div
+                                    key={url + index}
+                                    className="relative group"
+                                >
+                                    <div className="w-20 h-20 border rounded-md overflow-hidden bg-muted">
+                                        <div className="flex flex-col items-center justify-center h-full p-1">
+                                            {data.isExtracting ? (
+                                                <>
+                                                    <Loader2 className="h-6 w-6 text-blue-500 mb-1 animate-spin" />
+                                                    <span className="text-[10px] text-muted-foreground">
+                                                        {dict.file.reading}
+                                                    </span>
+                                                </>
+                                            ) : (
+                                                <>
+                                                    <Link className="h-6 w-6 text-blue-500 mb-1" />
+                                                    <span className="text-xs text-center truncate w-full px-1">
+                                                        {data.title.length > 10
+                                                            ? `${data.title.slice(0, 7)}...`
+                                                            : data.title}
+                                                    </span>
+                                                    {data.charCount && (
+                                                        <span className="text-[10px] text-green-600 font-medium">
+                                                            {formatCharCount(
+                                                                data.charCount,
+                                                            )}{" "}
+                                                            {dict.file.chars}
+                                                        </span>
+                                                    )}
+                                                </>
+                                            )}
+                                        </div>
+                                    </div>
+                                    {onRemoveUrl && (
+                                        <button
+                                            type="button"
+                                            onClick={() => onRemoveUrl(url)}
+                                            className="absolute -top-2 -right-2 bg-destructive rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
+                                            aria-label={dict.file.removeFile}
+                                        >
+                                            <X className="h-3 w-3" />
+                                        </button>
+                                    )}
+                                </div>
+                            ),
+                        )}
+                    </div>
+                )}
             </div>
             {/* Image Modal/Lightbox */}
             {selectedImage && (

components/history-dialog.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import Image from "next/image"
 import { useState } from "react"
+import Image from "@/components/image-with-basepath"
 import { Button } from "@/components/ui/button"
 import {
     Dialog,
@@ -43,7 +43,7 @@ export function HistoryDialog({
 
     return (
         <Dialog open={showHistory} onOpenChange={onToggleHistory}>
-            <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
+            <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto scrollbar-thin">
                 <DialogHeader>
                     <DialogTitle>{dict.history.title}</DialogTitle>
                     <DialogDescription>

components/image-with-basepath.tsx

@@ -0,0 +1,16 @@
+import NextImage, { type ImageProps } from "next/image"
+import { forwardRef } from "react"
+import { getAssetUrl } from "@/lib/base-path"
+
+export default forwardRef<HTMLImageElement, ImageProps>(
+    function Image(props, ref) {
+        const src =
+            typeof props.src === "string" &&
+            props.src.startsWith("/") &&
+            !props.src.startsWith("//")
+                ? getAssetUrl(props.src)
+                : props.src
+
+        return <NextImage {...props} src={src} ref={ref} />
+    },
+)

components/model-config-dialog.tsx

@@ -78,7 +78,9 @@ const PROVIDER_LOGO_MAP: Record<string, string> = {
     sglang: "openai", // SGLang is OpenAI-compatible
     gateway: "vercel",
     edgeone: "tencent-cloud",
+    vertexai: "google",
     doubao: "bytedance",
+    modelscope: "modelscope",
 }
 
 // Provider logo component
@@ -102,6 +104,7 @@ function ProviderLogo({
 
     const logoName = PROVIDER_LOGO_MAP[provider] || provider
     return (
+        // biome-ignore lint/performance/noImgElement: External URL from models.dev
         <img
             alt={`${provider} logo`}
             className={cn("size-4 dark:invert", className)}
@@ -235,6 +238,7 @@ export function ModelConfigDialog({
             "awsAccessKeyId",
             "awsSecretAccessKey",
             "awsRegion",
+            "vertexApiKey",
         ]
         if (credentialFields.includes(field)) {
             setValidationStatus("idle")
@@ -273,11 +277,12 @@ export function ModelConfigDialog({
 
     // Validate all models
     const handleValidate = useCallback(async () => {
-        if (!selectedProvider) return
+        if (!selectedProvider || !selectedProviderId) return
 
         // 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 ||
@@ -286,6 +291,11 @@ export function ModelConfigDialog({
             ) {
                 return
             }
+        } else if (isVertexAI) {
+            // Vertex AI requires vertexApiKey for Express Mode
+            if (!selectedProvider.vertexApiKey) {
+                return
+            }
         } else if (!isEdgeOne && !selectedProvider.apiKey) {
             return
         }
@@ -326,19 +336,21 @@ 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()
 
                 if (data.valid) {
-                    updateModel(selectedProviderId!, model.id, {
+                    updateModel(selectedProviderId, model.id, {
                         validated: true,
                         validationError: undefined,
                     })
                 } else {
                     allValid = false
                     errorCount++
-                    updateModel(selectedProviderId!, model.id, {
+                    updateModel(selectedProviderId, model.id, {
                         validated: false,
                         validationError: data.error || "Validation failed",
                     })
@@ -346,7 +358,7 @@ export function ModelConfigDialog({
             } catch {
                 allValid = false
                 errorCount++
-                updateModel(selectedProviderId!, model.id, {
+                updateModel(selectedProviderId, model.id, {
                     validated: false,
                     validationError: "Network error",
                 })
@@ -357,7 +369,7 @@ export function ModelConfigDialog({
 
         if (allValid) {
             setValidationStatus("success")
-            updateProvider(selectedProviderId!, { validated: true })
+            updateProvider(selectedProviderId, { validated: true })
             // Reset to idle after showing success briefly (with cleanup)
             if (validationResetTimeoutRef.current) {
                 clearTimeout(validationResetTimeoutRef.current)
@@ -431,12 +443,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",
+                                                "text-left text-sm transition-all duration-150 border border-transparent",
                                                 "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 ring-1 ring-border-subtle",
+                                                    "bg-surface-0 shadow-sm border-border-subtle",
                                             )}
                                         >
                                             <div
@@ -865,7 +877,162 @@ export function ModelConfigDialog({
                                                     </div>
                                                 </>
                                             ) : selectedProvider.provider ===
-                                              "edgeone" ? (
+                                              "vertexai" ? (
+                                                <>
+                                                    {/* 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
@@ -1046,17 +1213,19 @@ 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
-                                                                    .baseUrl
-                                                            }
-                                                            <span className="text-muted-foreground font-normal">
+                                                                    .baseUrlWithExample,
                                                                 {
-                                                                    dict
-                                                                        .modelConfig
-                                                                        .optional
-                                                                }
-                                                            </span>
+                                                                    example:
+                                                                        PROVIDER_INFO[
+                                                                            selectedProvider
+                                                                                .provider
+                                                                        ]
+                                                                            .defaultBaseUrl ||
+                                                                        "https://api.example.com/v1",
+                                                                },
+                                                            )}
                                                         </Label>
                                                         <Input
                                                             id="base-url"
@@ -1298,20 +1467,24 @@ export function ModelConfigDialog({
                                                                                     null,
                                                                                 )
                                                                             }
-                                                                            updateModel(
-                                                                                selectedProviderId!,
-                                                                                model.id,
-                                                                                {
-                                                                                    modelId:
-                                                                                        e
-                                                                                            .target
-                                                                                            .value,
-                                                                                    validated:
-                                                                                        undefined,
-                                                                                    validationError:
-                                                                                        undefined,
-                                                                                },
-                                                                            )
+                                                                            if (
+                                                                                selectedProviderId
+                                                                            ) {
+                                                                                updateModel(
+                                                                                    selectedProviderId,
+                                                                                    model.id,
+                                                                                    {
+                                                                                        modelId:
+                                                                                            e
+                                                                                                .target
+                                                                                                .value,
+                                                                                        validated:
+                                                                                            undefined,
+                                                                                        validationError:
+                                                                                            undefined,
+                                                                                    },
+                                                                                )
+                                                                            }
                                                                         }}
                                                                         onKeyDown={(
                                                                             e,

components/model-selector.tsx

@@ -5,8 +5,9 @@ import {
     Bot,
     Check,
     ChevronDown,
+    Monitor,
     Server,
-    Settings2,
+    User,
 } from "lucide-react"
 import { useEffect, useMemo, useRef, useState } from "react"
 import {
@@ -19,6 +20,7 @@ import {
     ModelSelectorLogo,
     ModelSelectorName,
     ModelSelector as ModelSelectorRoot,
+    ModelSelectorSectionHeader,
     ModelSelectorSeparator,
     ModelSelectorTrigger,
 } from "@/components/ai-elements/model-selector"
@@ -31,7 +33,6 @@ interface ModelSelectorProps {
     models: FlattenedModel[]
     selectedModelId: string | undefined
     onSelect: (modelId: string | undefined) => void
-    onConfigure: () => void
     disabled?: boolean
     showUnvalidatedModels?: boolean
 }
@@ -49,7 +50,9 @@ 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",
 }
 
 // Group models by providerLabel (handles duplicate providers)
@@ -61,7 +64,11 @@ function groupModelsByProvider(
         { provider: string; models: FlattenedModel[] }
     >()
     for (const model of models) {
-        const key = model.providerLabel
+        // For server models, strip "Server · " prefix for cleaner grouping
+        const key =
+            model.source === "server"
+                ? model.providerLabel.replace(/^Server · /, "")
+                : model.providerLabel
         const existing = groups.get(key)
         if (existing) {
             existing.models.push(model)
@@ -76,7 +83,6 @@ export function ModelSelector({
     models,
     selectedModelId,
     onSelect,
-    onConfigure,
     disabled = false,
     showUnvalidatedModels = false,
 }: ModelSelectorProps) {
@@ -89,10 +95,26 @@ export function ModelSelector({
         }
         return models.filter((m) => m.validated === true)
     }, [models, showUnvalidatedModels])
-    const groupedModels = useMemo(
-        () => groupModelsByProvider(displayModels),
+
+    // Separate server and user models
+    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(
@@ -101,9 +123,7 @@ export function ModelSelector({
     )
 
     const handleSelect = (value: string) => {
-        if (value === "__configure__") {
-            onConfigure()
-        } else if (value === "__server_default__") {
+        if (value === "__server_default__") {
             onSelect(undefined)
         } else {
             onSelect(value)
@@ -159,7 +179,7 @@ export function ModelSelector({
                         size="sm"
                         disabled={disabled}
                         className={cn(
-                            "hover:bg-accent gap-1.5 h-8 px-2 transition-all duration-150 ease-in-out",
+                            "hover:bg-accent gap-1.5 h-8 px-2 transition-[padding,background-color] duration-150 ease-in-out",
                             !showLabel && "px-1.5 justify-center",
                         )}
                         // accessibility: expose label to screen readers
@@ -196,99 +216,171 @@ export function ModelSelector({
                                 : dict.modelConfig.noModelsFound}
                         </ModelSelectorEmpty>
 
-                        {/* Server Default Option */}
-                        <ModelSelectorGroup heading={dict.modelConfig.default}>
-                            <ModelSelectorItem
-                                value="__server_default__"
-                                onSelect={handleSelect}
-                                className={cn(
-                                    "cursor-pointer",
-                                    !selectedModelId && "bg-accent",
-                                )}
+                        {/* Server Default Option - only show when no server models are configured */}
+                        {serverModels.length === 0 && (
+                            <ModelSelectorGroup
+                                heading={dict.modelConfig.default}
                             >
-                                <Check
+                                <ModelSelectorItem
+                                    value="__server_default__"
+                                    onSelect={handleSelect}
                                     className={cn(
-                                        "mr-2 h-4 w-4",
-                                        !selectedModelId
-                                            ? "opacity-100"
-                                            : "opacity-0",
+                                        "cursor-pointer",
+                                        !selectedModelId && "bg-accent",
                                     )}
-                                />
-                                <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}
                                 >
-                                    {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>
-                            ),
+                                    <Check
+                                        className={cn(
+                                            "mr-2 h-4 w-4",
+                                            !selectedModelId
+                                                ? "opacity-100"
+                                                : "opacity-0",
+                                        )}
+                                    />
+                                    <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) => (
+                                                <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.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 */}
-                        <ModelSelectorSeparator />
-                        <ModelSelectorGroup>
-                            <ModelSelectorItem
-                                value="__configure__"
-                                onSelect={handleSelect}
-                                className="cursor-pointer"
-                            >
-                                <Settings2 className="mr-2 h-4 w-4" />
-                                <ModelSelectorName>
-                                    {dict.modelConfig.configureModels}
-                                </ModelSelectorName>
-                            </ModelSelectorItem>
-                        </ModelSelectorGroup>
                         {/* Info text */}
                         <div className="px-3 py-2 text-xs text-muted-foreground border-t">
                             {showUnvalidatedModels

components/settings-dialog.tsx

@@ -1,8 +1,9 @@
 "use client"
 
-import { Github, Info, Moon, Sun, Tag } from "lucide-react"
+import { ChevronRight, Github, Info, Moon, Sun, Tag } from "lucide-react"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { Suspense, useEffect, useState } from "react"
+import { toast } from "sonner"
 import { Button } from "@/components/ui/button"
 import {
     Dialog,
@@ -24,6 +25,7 @@ import { Switch } from "@/components/ui/switch"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { getApiEndpoint } from "@/lib/base-path"
 import { i18n, type Locale } from "@/lib/i18n/config"
+import { STORAGE_KEYS } from "@/lib/storage"
 
 // Reusable setting item component for consistent layout
 function SettingItem({
@@ -54,22 +56,24 @@ const LANGUAGE_LABELS: Record<Locale, string> = {
     en: "English",
     zh: "中文",
     ja: "日本語",
+    "zh-Hant": "繁體中文",
 }
 
 interface SettingsDialogProps {
     open: boolean
     onOpenChange: (open: boolean) => void
-    onCloseProtectionChange?: (enabled: boolean) => void
     drawioUi: "min" | "sketch"
     onToggleDrawioUi: () => void
     darkMode: boolean
     onToggleDarkMode: () => void
     minimalStyle?: boolean
     onMinimalStyleChange?: (value: boolean) => void
+    vlmValidationEnabled?: boolean
+    onVlmValidationChange?: (value: boolean) => void
+    onOpenModelConfig?: () => void
 }
 
 export const STORAGE_ACCESS_CODE_KEY = "next-ai-draw-io-access-code"
-export const STORAGE_CLOSE_PROTECTION_KEY = "next-ai-draw-io-close-protection"
 const STORAGE_ACCESS_CODE_REQUIRED_KEY = "next-ai-draw-io-access-code-required"
 
 function getStoredAccessCodeRequired(): boolean | null {
@@ -82,26 +86,33 @@ function getStoredAccessCodeRequired(): boolean | null {
 function SettingsContent({
     open,
     onOpenChange,
-    onCloseProtectionChange,
     drawioUi,
     onToggleDrawioUi,
     darkMode,
     onToggleDarkMode,
     minimalStyle = false,
     onMinimalStyleChange = () => {},
+    vlmValidationEnabled = false,
+    onVlmValidationChange = () => {},
+    onOpenModelConfig,
 }: SettingsDialogProps) {
     const dict = useDictionary()
     const router = useRouter()
     const pathname = usePathname() || "/"
     const search = useSearchParams()
     const [accessCode, setAccessCode] = useState("")
-    const [closeProtection, setCloseProtection] = useState(true)
     const [isVerifying, setIsVerifying] = useState(false)
     const [error, setError] = useState("")
     const [accessCodeRequired, setAccessCodeRequired] = useState(
         () => getStoredAccessCodeRequired() ?? false,
     )
     const [currentLang, setCurrentLang] = useState("en")
+    const [sendShortcut, setSendShortcut] = useState("ctrl-enter")
+
+    // Proxy settings state (Electron only)
+    const [httpProxy, setHttpProxy] = useState("")
+    const [httpsProxy, setHttpsProxy] = useState("")
+    const [isApplyingProxy, setIsApplyingProxy] = useState(false)
 
     useEffect(() => {
         // Only fetch if not cached in localStorage
@@ -143,13 +154,20 @@ function SettingsContent({
                 localStorage.getItem(STORAGE_ACCESS_CODE_KEY) || ""
             setAccessCode(storedCode)
 
-            const storedCloseProtection = localStorage.getItem(
-                STORAGE_CLOSE_PROTECTION_KEY,
+            const storedSendShortcut = localStorage.getItem(
+                STORAGE_KEYS.sendShortcut,
             )
-            // Default to true if not set
-            setCloseProtection(storedCloseProtection !== "false")
+            setSendShortcut(storedSendShortcut || "ctrl-enter")
 
             setError("")
+
+            // Load proxy settings (Electron only)
+            if (window.electronAPI?.getProxy) {
+                window.electronAPI.getProxy().then((config) => {
+                    setHttpProxy(config.httpProxy || "")
+                    setHttpsProxy(config.httpsProxy || "")
+                })
+            }
         }
     }, [open])
 
@@ -157,6 +175,13 @@ 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
@@ -208,6 +233,46 @@ function SettingsContent({
         }
     }
 
+    const handleApplyProxy = async () => {
+        if (!window.electronAPI?.setProxy) return
+
+        // Validate proxy URLs (must start with http:// or https://)
+        const validateProxyUrl = (url: string): boolean => {
+            if (!url) return true // Empty is OK
+            return url.startsWith("http://") || url.startsWith("https://")
+        }
+
+        const trimmedHttp = httpProxy.trim()
+        const trimmedHttps = httpsProxy.trim()
+
+        if (trimmedHttp && !validateProxyUrl(trimmedHttp)) {
+            toast.error("HTTP Proxy must start with http:// or https://")
+            return
+        }
+        if (trimmedHttps && !validateProxyUrl(trimmedHttps)) {
+            toast.error("HTTPS Proxy must start with http:// or https://")
+            return
+        }
+
+        setIsApplyingProxy(true)
+        try {
+            const result = await window.electronAPI.setProxy({
+                httpProxy: trimmedHttp || undefined,
+                httpsProxy: trimmedHttps || undefined,
+            })
+
+            if (result.success) {
+                toast.success(dict.settings.proxyApplied)
+            } else {
+                toast.error(result.error || "Failed to apply proxy settings")
+            }
+        } catch {
+            toast.error("Failed to apply proxy settings")
+        } finally {
+            setIsApplyingProxy(false)
+        }
+    }
+
     return (
         <DialogContent className="sm:max-w-lg p-0 gap-0">
             {/* Header */}
@@ -221,6 +286,27 @@ function SettingsContent({
             {/* Content */}
             <div className="px-6 pb-6">
                 <div className="divide-y divide-border-subtle">
+                    {/* API Keys & Models */}
+                    {onOpenModelConfig && (
+                        <SettingItem
+                            label={dict.settings.apiKeysModels}
+                            description={dict.settings.apiKeysModelsDescription}
+                        >
+                            <Button
+                                variant="ghost"
+                                size="sm"
+                                className="h-9 w-9 p-0"
+                                onClick={() => {
+                                    onOpenChange(false)
+                                    onOpenModelConfig()
+                                }}
+                                aria-label={dict.settings.apiKeysModels}
+                            >
+                                <ChevronRight className="h-4 w-4" />
+                            </Button>
+                        </SettingItem>
+                    )}
+
                     {/* Access Code (conditional) */}
                     {accessCodeRequired && (
                         <div className="py-4 first:pt-0 space-y-3">
@@ -333,25 +419,6 @@ function SettingsContent({
                         </Button>
                     </SettingItem>
 
-                    {/* Close Protection */}
-                    <SettingItem
-                        label={dict.settings.closeProtection}
-                        description={dict.settings.closeProtectionDescription}
-                    >
-                        <Switch
-                            id="close-protection"
-                            checked={closeProtection}
-                            onCheckedChange={(checked) => {
-                                setCloseProtection(checked)
-                                localStorage.setItem(
-                                    STORAGE_CLOSE_PROTECTION_KEY,
-                                    checked.toString(),
-                                )
-                                onCloseProtectionChange?.(checked)
-                            }}
-                        />
-                    </SettingItem>
-
                     {/* Diagram Style */}
                     <SettingItem
                         label={dict.settings.diagramStyle}
@@ -370,6 +437,110 @@ function SettingsContent({
                             </span>
                         </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}
+                        description={dict.settings.sendShortcutDescription}
+                    >
+                        <Select
+                            value={sendShortcut}
+                            onValueChange={(value) => {
+                                setSendShortcut(value)
+                                localStorage.setItem(
+                                    STORAGE_KEYS.sendShortcut,
+                                    value,
+                                )
+                                window.dispatchEvent(
+                                    new CustomEvent("sendShortcutChange", {
+                                        detail: value,
+                                    }),
+                                )
+                            }}
+                        >
+                            <SelectTrigger
+                                id="send-shortcut-select"
+                                className="w-auto h-9 rounded-xl"
+                            >
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                <SelectItem value="enter">
+                                    {dict.settings.enterToSend}
+                                </SelectItem>
+                                <SelectItem value="ctrl-enter">
+                                    {dict.settings.ctrlEnterToSend}
+                                </SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </SettingItem>
+
+                    {/* Proxy Settings - Electron only */}
+                    {typeof window !== "undefined" &&
+                        window.electronAPI?.isElectron && (
+                            <div className="py-4 space-y-3">
+                                <div className="space-y-0.5">
+                                    <Label className="text-sm font-medium">
+                                        {dict.settings.proxy}
+                                    </Label>
+                                    <p className="text-xs text-muted-foreground">
+                                        {dict.settings.proxyDescription}
+                                    </p>
+                                </div>
+
+                                <div className="space-y-2">
+                                    <Input
+                                        id="http-proxy"
+                                        type="text"
+                                        value={httpProxy}
+                                        onChange={(e) =>
+                                            setHttpProxy(e.target.value)
+                                        }
+                                        placeholder={`${dict.settings.httpProxy}: http://proxy:8080`}
+                                        className="h-9"
+                                    />
+                                    <Input
+                                        id="https-proxy"
+                                        type="text"
+                                        value={httpsProxy}
+                                        onChange={(e) =>
+                                            setHttpsProxy(e.target.value)
+                                        }
+                                        placeholder={`${dict.settings.httpsProxy}: http://proxy:8080`}
+                                        className="h-9"
+                                    />
+                                </div>
+
+                                <Button
+                                    onClick={handleApplyProxy}
+                                    disabled={isApplyingProxy}
+                                    className="h-9 px-4 rounded-xl w-full"
+                                >
+                                    {isApplyingProxy
+                                        ? "..."
+                                        : dict.settings.applyProxy}
+                                </Button>
+                            </div>
+                        )}
                 </div>
             </div>
 

components/ui/card.tsx

@@ -1,92 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Card({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card"
-      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-header"
-      className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-[data-slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-title"
-      className={cn("leading-none font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-action"
-      className={cn(
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}

components/url-input-dialog.tsx

@@ -0,0 +1,116 @@
+"use client"
+
+import { Link, Loader2 } from "lucide-react"
+import { useState } from "react"
+import { Button } from "@/components/ui/button"
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "@/components/ui/dialog"
+import { Input } from "@/components/ui/input"
+import { useDictionary } from "@/hooks/use-dictionary"
+
+interface UrlInputDialogProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    onSubmit: (url: string) => void
+    isExtracting: boolean
+}
+
+export function UrlInputDialog({
+    open,
+    onOpenChange,
+    onSubmit,
+    isExtracting,
+}: UrlInputDialogProps) {
+    const dict = useDictionary()
+    const [url, setUrl] = useState("")
+    const [error, setError] = useState("")
+
+    const handleSubmit = () => {
+        setError("")
+
+        if (!url.trim()) {
+            setError(dict.url.enterUrl)
+            return
+        }
+
+        try {
+            new URL(url)
+        } catch {
+            setError(dict.url.invalidFormat)
+            return
+        }
+
+        onSubmit(url.trim())
+    }
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === "Enter" && !isExtracting) {
+            e.preventDefault()
+            handleSubmit()
+        }
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-md">
+                <DialogHeader>
+                    <DialogTitle>{dict.url.title}</DialogTitle>
+                    <DialogDescription>
+                        {dict.url.description}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="space-y-4">
+                    <div className="space-y-2">
+                        <Input
+                            value={url}
+                            onChange={(e) => {
+                                setUrl(e.target.value)
+                                setError("")
+                            }}
+                            onKeyDown={handleKeyDown}
+                            placeholder="https://example.com/article"
+                            disabled={isExtracting}
+                            autoFocus
+                        />
+                        {error && (
+                            <p className="text-sm text-destructive">{error}</p>
+                        )}
+                    </div>
+                </div>
+
+                <DialogFooter>
+                    <Button
+                        variant="outline"
+                        onClick={() => onOpenChange(false)}
+                        disabled={isExtracting}
+                    >
+                        {dict.url.Cancel}
+                    </Button>
+                    <Button
+                        onClick={handleSubmit}
+                        disabled={isExtracting || !url.trim()}
+                    >
+                        {isExtracting ? (
+                            <>
+                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                {dict.url.Extracting}
+                            </>
+                        ) : (
+                            <>
+                                <Link className="mr-2 h-4 w-4" />
+                                {dict.url.extract}
+                            </>
+                        )}
+                    </Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}

contexts/diagram-context.tsx

@@ -31,6 +31,7 @@ interface DiagramContextType {
         successMessage?: string,
     ) => void
     getThumbnailSvg: () => Promise<string | null>
+    captureValidationPng: () => Promise<string | null>
     isDrawioReady: boolean
     onDrawioLoad: () => void
     resetDrawioReady: () => void
@@ -51,6 +52,8 @@ 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)
@@ -147,6 +150,37 @@ 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,
@@ -186,6 +220,13 @@ 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
@@ -353,6 +394,7 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
                 clearDiagram,
                 saveDiagramToFile,
                 getThumbnailSvg,
+                captureValidationPng,
                 isDrawioReady,
                 onDrawioLoad,
                 resetDrawioReady,

docs/cn/FAQ.md

@@ -0,0 +1,78 @@
+# 常见问题解答 (FAQ)
+
+---
+
+## 1. 无法导出 PDF
+
+**问题**: Web 版点击导出 PDF 后跳转到 `convert.diagrams.net/node/export` 然后无响应
+
+**原因**: 嵌入式 Draw.io 不支持直接 PDF 导出，依赖外部转换服务，在 iframe 中无法正常工作
+
+**解决方案**: 先导出为图片（PNG），再打印转成 PDF
+
+**相关 Issue**: #539, #125
+
+---
+
+## 2. 无法访问 embed.diagrams.net（离线/内网部署）
+
+**问题**: 内网环境提示"找不到 embed.diagrams.net 的服务器 IP 地址"
+
+**关键点**: `NEXT_PUBLIC_*` 环境变量是**构建时**变量，会被打包到 JS 代码中，**运行时设置无效**！
+
+**解决方案**: 必须在构建时通过 `args` 传入：
+
+```yaml
+# docker-compose.yml
+services:
+  drawio:
+    image: jgraph/drawio:latest
+    ports: ["8080:8080"]
+  next-ai-draw-io:
+    build:
+      context: .
+      args:
+        - NEXT_PUBLIC_DRAWIO_BASE_URL=http://你的服务器IP:8080/
+    ports: ["3000:3000"]
+    env_file: .env
+```
+
+**内网用户**: 在外网修改 Dockerfile 并构建镜像，再传到内网使用
+
+**相关 Issue**: #295, #317
+
+---
+
+## 3. 自建模型只思考不画图
+
+**问题**: 本地部署的模型（如 Qwen、LiteLLM）只输出思考过程，不生成图表
+
+**可能原因**:
+1. **模型太小** - 小模型难以正确遵循 tool calling 指令，建议使用 32B+ 参数的模型
+2. **未开启 tool calling** - 模型服务需要配置 tool use 功能
+
+**解决方案**: 开启 tool calling，例如 vLLM：
+```bash
+python -m vllm.entrypoints.openai.api_server \
+    --model Qwen/Qwen3-32B \
+    --enable-auto-tool-choice \
+    --tool-call-parser hermes
+```
+
+**相关 Issue**: #269, #75
+
+---
+
+## 4. 上传图片后提示"未提供图片"
+
+**问题**: 上传图片后，系统显示"未提供图片"错误
+
+**可能原因**:
+1. 模型不支持视觉功能（如 Kimi K2、DeepSeek、Qwen 文本模型）
+
+**解决方案**:
+- 使用支持视觉的模型：GPT-5.2、Claude 4.5 Sonnet、Gemini 3 Pro
+- 模型名带 `vision` 或 `vl` 的支持图片
+- 更新到最新版本（v0.4.9+）
+
+**相关 Issue**: #324, #421, #469

docs/cn/README_CN.md

@@ -37,11 +37,12 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
     - [安装](#安装)
   - [部署](#部署)
     - [部署到腾讯云EdgeOne Pages](#部署到腾讯云edgeone-pages)
-    - [部署到Vercel（推荐）](#部署到vercel推荐)
+    - [部署到Vercel](#部署到vercel)
     - [部署到Cloudflare Workers](#部署到cloudflare-workers)
   - [多提供商支持](#多提供商支持)
   - [工作原理](#工作原理)
   - [支持与联系](#支持与联系)
+  - [常见问题](#常见问题)
   - [Star历史](#star历史)
 
 ## 示例
@@ -179,7 +180,7 @@ npm run dev
 
 同时，通过腾讯云EdgeOne Pages部署，也会获得[每日免费的DeepSeek模型额度](https://edgeone.cloud.tencent.com/pages/document/169925463311781888)。
 
-### 部署到Vercel（推荐）
+### 部署到Vercel
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
 
@@ -199,11 +200,13 @@ npm run dev
 -   OpenAI
 -   Anthropic
 -   Google AI
+-   Google Vertex AI
 -   Azure OpenAI
 -   Ollama
 -   OpenRouter
 -   DeepSeek
 -   SiliconFlow
+-   ModelScope
 -   SGLang
 -   Vercel AI Gateway
 
@@ -211,6 +214,10 @@ 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 图表上进行训练，因此如果您想创建云架构图，这是最佳选择。
@@ -237,6 +244,10 @@ npm run dev
 
 -   邮箱：me[at]jiang.jp
 
+## 常见问题
+
+请参阅 [FAQ](./FAQ.md) 了解常见问题和解决方案。
+
 ## Star历史
 
 [![Star History Chart](https://api.star-history.com/svg?repos=DayuanJiang/next-ai-draw-io&type=date&legend=top-left)](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)

docs/cn/ai-providers.md

@@ -152,6 +152,19 @@ AI_PROVIDER=ollama
 AI_MODEL=llama3.2
 ```
 
+### ModelScope
+
+```bash
+MODELSCOPE_API_KEY=your_api_key
+AI_MODEL=Qwen/Qwen3-235B-A22B-Instruct-2507
+```
+
+可选的自定义端点：
+
+```bash
+MODELSCOPE_BASE_URL=https://your-custom-endpoint
+```
+
 可选的自定义 URL：
 
 ```bash
@@ -204,6 +217,63 @@ 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/FAQ.md

@@ -0,0 +1,78 @@
+# Frequently Asked Questions (FAQ)
+
+---
+
+## 1. Cannot Export PDF
+
+**Problem**: Web version redirects to `convert.diagrams.net/node/export` when exporting PDF, then nothing happens
+
+**Cause**: Embedded Draw.io doesn't support direct PDF export, it relies on external conversion service which doesn't work in iframe
+
+**Solution**: Export as image (PNG) first, then print to PDF
+
+**Related Issues**: #539, #125
+
+---
+
+## 2. Cannot Access embed.diagrams.net (Offline/Intranet Deployment)
+
+**Problem**: Intranet environment shows "Cannot find server IP address for embed.diagrams.net"
+
+**Key Point**: `NEXT_PUBLIC_*` environment variables are **build-time** variables, they get bundled into JS code. **Runtime settings don't work!**
+
+**Solution**: Must pass via `args` at build time:
+
+```yaml
+# docker-compose.yml
+services:
+  drawio:
+    image: jgraph/drawio:latest
+    ports: ["8080:8080"]
+  next-ai-draw-io:
+    build:
+      context: .
+      args:
+        - NEXT_PUBLIC_DRAWIO_BASE_URL=http://your-server-ip:8080/
+    ports: ["3000:3000"]
+    env_file: .env
+```
+
+**Intranet Users**: Modify Dockerfile and build image on external network, then transfer to intranet
+
+**Related Issues**: #295, #317
+
+---
+
+## 3. Self-hosted Model Only Thinks But Doesn't Draw
+
+**Problem**: Locally deployed models (e.g., Qwen, LiteLLM) only output thinking process, don't generate diagrams
+
+**Possible Causes**:
+1. **Model too small** - Small models struggle to follow tool calling instructions correctly, recommend 32B+ parameter models
+2. **Tool calling not enabled** - Model service needs tool use configuration
+
+**Solution**: Enable tool calling, e.g., vLLM:
+```bash
+python -m vllm.entrypoints.openai.api_server \
+    --model Qwen/Qwen3-32B \
+    --enable-auto-tool-choice \
+    --tool-call-parser hermes
+```
+
+**Related Issues**: #269, #75
+
+---
+
+## 4. "No Image Provided" After Uploading Image
+
+**Problem**: After uploading an image, the system shows "No image provided" error
+
+**Possible Causes**:
+1. Model doesn't support vision (e.g., Kimi K2, DeepSeek, Qwen text models)
+
+**Solution**:
+- Use vision-capable models: GPT-5.2, Claude 4.5 Sonnet, Gemini 3 Pro
+- Models with `vision` or `vl` in name support images
+- Update to latest version (v0.4.9+)
+
+**Related Issues**: #324, #421, #469

docs/en/ai-providers.md

@@ -33,6 +33,21 @@ 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
@@ -158,6 +173,19 @@ Optional custom URL:
 OLLAMA_BASE_URL=http://localhost:11434
 ```
 
+### ModelScope
+
+```bash
+MODELSCOPE_API_KEY=your_api_key
+AI_MODEL=Qwen/Qwen3-235B-A22B-Instruct-2507
+```
+
+Optional custom endpoint:
+
+```bash
+MODELSCOPE_BASE_URL=https://your-custom-endpoint
+```
+
 ### Vercel AI Gateway
 
 Vercel AI Gateway provides unified access to multiple AI providers through a single API key. This simplifies authentication and allows you to switch between providers without managing multiple API keys.
@@ -201,9 +229,66 @@ If you only configure **one** provider's API key, the system will automatically
 If you configure **multiple** API keys, you must explicitly set `AI_PROVIDER`:
 
 ```bash
-AI_PROVIDER=google  # or: openai, anthropic, deepseek, siliconflow, doubao, azure, bedrock, openrouter, ollama, gateway, sglang
+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,6 +22,27 @@ 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/FAQ.md

@@ -0,0 +1,78 @@
+# よくある質問 (FAQ)
+
+---
+
+## 1. PDFをエクスポートできない
+
+**問題**: Web版でPDFエクスポートをクリックすると `convert.diagrams.net/node/export` にリダイレクトされ、その後何も起こらない
+
+**原因**: 埋め込みDraw.ioは直接PDFエクスポートをサポートしておらず、外部変換サービスに依存しているが、iframe内では正常に動作しない
+
+**解決策**: まず画像（PNG）としてエクスポートし、その後PDFに印刷する
+
+**関連Issue**: #539, #125
+
+---
+
+## 2. embed.diagrams.netにアクセスできない（オフライン/イントラネットデプロイ）
+
+**問題**: イントラネット環境で「embed.diagrams.netのサーバーIPアドレスが見つかりません」と表示される
+
+**重要**: `NEXT_PUBLIC_*` 環境変数は**ビルド時**変数であり、JSコードにバンドルされます。**実行時の設定は無効です！**
+
+**解決策**: ビルド時に `args` で渡す必要があります：
+
+```yaml
+# docker-compose.yml
+services:
+  drawio:
+    image: jgraph/drawio:latest
+    ports: ["8080:8080"]
+  next-ai-draw-io:
+    build:
+      context: .
+      args:
+        - NEXT_PUBLIC_DRAWIO_BASE_URL=http://あなたのサーバーIP:8080/
+    ports: ["3000:3000"]
+    env_file: .env
+```
+
+**イントラネットユーザー**: 外部ネットワークでDockerfileを修正してイメージをビルドし、イントラネットに転送する
+
+**関連Issue**: #295, #317
+
+---
+
+## 3. 自前モデルが思考するだけで描画しない
+
+**問題**: ローカルデプロイのモデル（Qwen、LiteLLMなど）が思考過程のみを出力し、図表を生成しない
+
+**考えられる原因**:
+1. **モデルが小さすぎる** - 小さいモデルはtool calling指示に正しく従うことが難しい、32B+パラメータのモデルを推奨
+2. **tool callingが有効になっていない** - モデルサービスでtool use機能を設定する必要がある
+
+**解決策**: tool callingを有効にする、例えばvLLM：
+```bash
+python -m vllm.entrypoints.openai.api_server \
+    --model Qwen/Qwen3-32B \
+    --enable-auto-tool-choice \
+    --tool-call-parser hermes
+```
+
+**関連Issue**: #269, #75
+
+---
+
+## 4. 画像アップロード後「画像が提供されていません」と表示される
+
+**問題**: 画像をアップロードした後、「画像が提供されていません」というエラーが表示される
+
+**考えられる原因**:
+1. モデルがビジョン機能をサポートしていない（Kimi K2、DeepSeek、Qwenテキストモデルなど）
+
+**解決策**:
+- ビジョン対応モデルを使用：GPT-5.2、Claude 4.5 Sonnet、Gemini 3 Pro
+- モデル名に `vision` または `vl` が含まれているものは画像をサポート
+- 最新バージョン（v0.4.9+）にアップデート
+
+**関連Issue**: #324, #421, #469

docs/ja/README_JA.md

@@ -37,11 +37,12 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
     - [インストール](#インストール)
   - [デプロイ](#デプロイ)
     - [EdgeOne Pagesへのデプロイ](#edgeone-pagesへのデプロイ)
-    - [Vercelへのデプロイ（推奨）](#vercelへのデプロイ推奨)
+    - [Vercelへのデプロイ](#vercelへのデプロイ)
     - [Cloudflare Workersへのデプロイ](#cloudflare-workersへのデプロイ)
   - [マルチプロバイダーサポート](#マルチプロバイダーサポート)
   - [仕組み](#仕組み)
   - [サポート＆お問い合わせ](#サポートお問い合わせ)
+  - [よくある質問](#よくある質問)
   - [スター履歴](#スター履歴)
 
 ## 例
@@ -180,7 +181,7 @@ npm run dev
 
 また、Tencent EdgeOne Pagesでデプロイすると、[DeepSeekモデルの毎日の無料クォータ](https://pages.edgeone.ai/document/edge-ai)が付与されます。
 
-### Vercelへのデプロイ（推奨）
+### Vercelへのデプロイ
 
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
 
@@ -200,11 +201,13 @@ Next.jsアプリをデプロイする最も簡単な方法は、Next.jsの作成
 -   OpenAI
 -   Anthropic
 -   Google AI
+-   Google Vertex AI
 -   Azure OpenAI
 -   Ollama
 -   OpenRouter
 -   DeepSeek
 -   SiliconFlow
+-   ModelScope
 -   SGLang
 -   Vercel AI Gateway
 
@@ -212,6 +215,10 @@ 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ダイアグラムで学習されているため、クラウドアーキテクチャダイアグラムを作成したい場合は最適な選択です。
@@ -238,6 +245,10 @@ AWS BedrockとOpenRouter以外のすべてのプロバイダーはカスタム
 
 -   メール：me[at]jiang.jp
 
+## よくある質問
+
+一般的な問題と解決策については [FAQ](./FAQ.md) をご覧ください。
+
 ## スター履歴
 
 [![Star History Chart](https://api.star-history.com/svg?repos=DayuanJiang/next-ai-draw-io&type=date&legend=top-left)](https://www.star-history.com/#DayuanJiang/next-ai-draw-io&type=date&legend=top-left)

docs/ja/ai-providers.md

@@ -158,6 +158,19 @@ AI_MODEL=llama3.2
 OLLAMA_BASE_URL=http://localhost:11434
 ```
 
+### ModelScope
+
+```bash
+MODELSCOPE_API_KEY=your_api_key
+AI_MODEL=Qwen/Qwen3-235B-A22B-Instruct-2507
+```
+
+任意のカスタムエンドポイント:
+
+```bash
+MODELSCOPE_BASE_URL=https://your-custom-endpoint
+```
+
 ### Vercel AI Gateway
 
 Vercel AI Gateway は、単一の API キーで複数の AI プロバイダーへの統合アクセスを提供します。これにより認証が簡素化され、複数の API キーを管理することなくプロバイダーを切り替えることができます。
@@ -204,6 +217,63 @@ 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）を伴う長文テキストの生成を含むため、非常に強力なモデル性能が必要です。

edge-functions/api/edgeai/chat/completions.ts

@@ -99,7 +99,7 @@ function handleOptionsRequest(): Response {
     })
 }
 
-export async function onRequest({ request, env }: any) {
+export async function onRequest({ request, env: _env }: any) {
     if (request.method === "OPTIONS") {
         return handleOptionsRequest()
     }

electron/electron-builder.yml

@@ -37,10 +37,11 @@ mac:
       arch:
         - x64
         - arm64
-  hardenedRuntime: true
+  # Disable electron-builder's signing - we use custom ad-hoc signing in afterPack
+  # 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

@@ -25,6 +25,25 @@ interface ApplyPresetResult {
     env?: Record<string, string>
 }
 
+/** Proxy configuration interface */
+interface ProxyConfig {
+    httpProxy?: string
+    httpsProxy?: string
+}
+
+/** Result of setting proxy */
+interface SetProxyResult {
+    success: boolean
+    error?: string
+    devMode?: boolean
+}
+
+/** Result of setting user locale */
+interface SetUserLocaleResult {
+    success: boolean
+    error?: string
+}
+
 declare global {
     interface Window {
         /** Main window Electron API */
@@ -45,6 +64,16 @@ declare global {
             openFile: () => Promise<string | null>
             /** Save data to file via save dialog */
             saveFile: (data: string) => Promise<boolean>
+            /** Get proxy configuration */
+            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" | "zh-Hant" | undefined
+            >
+            /** Set user's preferred locale */
+            setUserLocale: (locale: string) => Promise<SetUserLocaleResult>
         }
 
         /** Settings window Electron API */
@@ -71,4 +100,10 @@ declare global {
     }
 }
 
-export { ConfigPreset, ApplyPresetResult }
+export type {
+    ConfigPreset,
+    ApplyPresetResult,
+    ProxyConfig,
+    SetProxyResult,
+    SetUserLocaleResult,
+}

electron/main/app-menu.ts

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

electron/main/config-manager.ts

@@ -137,6 +137,7 @@ interface ConfigPresetsFile {
     version: 1
     currentPresetId: string | null
     presets: ConfigPreset[]
+    userLocale?: "en" | "zh" | "ja" | "zh-Hant"
 }
 
 const CONFIG_FILE_NAME = "config-presets.json"
@@ -161,6 +162,7 @@ export function loadPresets(): ConfigPresetsFile {
             version: 1,
             currentPresetId: null,
             presets: [],
+            userLocale: undefined,
         }
     }
 
@@ -181,6 +183,7 @@ export function loadPresets(): ConfigPresetsFile {
             version: 1,
             currentPresetId: null,
             presets: [],
+            userLocale: undefined,
         }
     }
 }
@@ -351,6 +354,10 @@ const PROVIDER_ENV_MAP: Record<string, { apiKey: string; baseUrl: string }> = {
         apiKey: "SILICONFLOW_API_KEY",
         baseUrl: "SILICONFLOW_BASE_URL",
     },
+    modelscope: {
+        apiKey: "MODELSCOPE_API_KEY",
+        baseUrl: "MODELSCOPE_BASE_URL",
+    },
     gateway: { apiKey: "AI_GATEWAY_API_KEY", baseUrl: "AI_GATEWAY_BASE_URL" },
     // bedrock and ollama don't use API keys in the same way
     bedrock: { apiKey: "", baseUrl: "" },
@@ -458,3 +465,23 @@ 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" | "zh-Hant" | undefined {
+    const data = loadPresets()
+    return data.userLocale
+}
+
+/**
+ * Set user's preferred locale in config
+ */
+export function setUserLocale(
+    locale: "en" | "zh" | "ja" | "zh-Hant" | null,
+): void {
+    const data = loadPresets()
+    data.userLocale = locale === null ? undefined : locale
+    savePresets(data)
+}

electron/main/index.ts

@@ -4,6 +4,7 @@ import { getCurrentPresetEnv } from "./config-manager"
 import { loadEnvFile } from "./env-loader"
 import { registerIpcHandlers } from "./ipc-handlers"
 import { startNextServer, stopNextServer } from "./next-server"
+import { applyProxyToEnv } from "./proxy-manager"
 import { registerSettingsWindowHandlers } from "./settings-window"
 import { createWindow, getMainWindow } from "./window-manager"
 
@@ -24,6 +25,9 @@ if (!gotTheLock) {
     // Load environment variables from .env files
     loadEnvFile()
 
+    // Apply proxy settings from saved config
+    applyProxyToEnv()
+
     // Apply saved preset environment variables (overrides .env)
     const presetEnv = getCurrentPresetEnv()
     for (const [key, value] of Object.entries(presetEnv)) {

electron/main/ipc-handlers.ts

@@ -1,4 +1,5 @@
 import { app, BrowserWindow, dialog, ipcMain } from "electron"
+import { rebuildAppMenu } from "./app-menu"
 import {
     applyPresetToEnv,
     type ConfigPreset,
@@ -7,10 +8,18 @@ import {
     getAllPresets,
     getCurrentPreset,
     getCurrentPresetId,
+    getUserLocale,
     setCurrentPreset,
+    setUserLocale,
     updatePreset,
 } from "./config-manager"
 import { restartNextServer } from "./next-server"
+import {
+    applyProxyToEnv,
+    getProxyConfig,
+    type ProxyConfig,
+    saveProxyConfig,
+} from "./proxy-manager"
 
 /**
  * Allowed configuration keys for presets
@@ -209,4 +218,68 @@ export function registerIpcHandlers(): void {
             return setCurrentPreset(id)
         },
     )
+
+    // ==================== Proxy Settings ====================
+
+    ipcMain.handle("get-proxy", () => {
+        return getProxyConfig()
+    })
+
+    ipcMain.handle("set-proxy", async (_event, config: ProxyConfig) => {
+        try {
+            // Save config to file
+            saveProxyConfig(config)
+
+            // Apply to current process environment
+            applyProxyToEnv()
+
+            const isDev = process.env.NODE_ENV === "development"
+
+            if (isDev) {
+                // In development, env vars are already applied
+                // Next.js dev server may need manual restart
+                return { success: true, devMode: true }
+            }
+
+            // Production: restart Next.js server to pick up new env vars
+            await restartNextServer()
+            return { success: true }
+        } catch (error) {
+            return {
+                success: false,
+                error:
+                    error instanceof Error
+                        ? error.message
+                        : "Failed to apply proxy settings",
+            }
+        }
+    })
+
+    // ==================== 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", "zh-Hant"].includes(locale)) {
+            return { success: false, error: "Invalid locale" }
+        }
+
+        try {
+            setUserLocale(locale as "en" | "zh" | "ja" | "zh-Hant")
+            // 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

@@ -0,0 +1,211 @@
+/**
+ * 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" | "zh-Hant"
+
+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: "問題を報告",
+    },
+
+    "zh-Hant": {
+        // 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 {
+    // Check for zh-Hant before normalizing
+    if (
+        locale === "zh-Hant" ||
+        locale.toLowerCase().startsWith("zh-hant") ||
+        locale.toLowerCase().startsWith("zh-tw") ||
+        locale.toLowerCase().startsWith("zh-hk")
+    ) {
+        return translations["zh-Hant"]
+    }
+
+    // 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", "zh-Hant"
+ */
+export function detectSystemLocale(appLocale: string): MenuLocale {
+    const lower = appLocale.toLowerCase()
+
+    // Distinguish Traditional Chinese locales (TW, HK, Hant) from Simplified
+    if (
+        lower.startsWith("zh-hant") ||
+        lower.startsWith("zh-tw") ||
+        lower.startsWith("zh-hk")
+    ) {
+        return "zh-Hant"
+    }
+
+    const normalized = lower.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/main/next-server.ts

@@ -69,6 +69,8 @@ export async function startNextServer(): Promise<string> {
         NODE_ENV: "production",
         PORT: String(port),
         HOSTNAME: "localhost",
+        // Enable Node.js built-in proxy support for fetch (Node.js 24+)
+        NODE_USE_ENV_PROXY: "1",
     }
 
     // Set cache directory to a writable location (user's app data folder)
@@ -85,6 +87,13 @@ export async function startNextServer(): Promise<string> {
         }
     }
 
+    // Debug: log proxy-related env vars
+    console.log("Proxy env vars being passed to server:", {
+        HTTP_PROXY: env.HTTP_PROXY || env.http_proxy || "not set",
+        HTTPS_PROXY: env.HTTPS_PROXY || env.https_proxy || "not set",
+        NODE_USE_ENV_PROXY: env.NODE_USE_ENV_PROXY || "not set",
+    })
+
     // Use Electron's utilityProcess API for running Node.js in background
     // This is the recommended way to run Node.js code in Electron
     serverProcess = utilityProcess.fork(serverPath, [], {
@@ -114,13 +123,41 @@ export async function startNextServer(): Promise<string> {
 }
 
 /**
- * Stop the Next.js server process
+ * Stop the Next.js server process and wait for it to exit
  */
-export function stopNextServer(): void {
+export async function stopNextServer(): Promise<void> {
     if (serverProcess) {
         console.log("Stopping Next.js server...")
+
+        // Create a promise that resolves when the process exits
+        const exitPromise = new Promise<void>((resolve) => {
+            const proc = serverProcess
+            if (!proc) {
+                resolve()
+                return
+            }
+
+            const onExit = () => {
+                resolve()
+            }
+
+            proc.once("exit", onExit)
+
+            // Timeout after 5 seconds
+            setTimeout(() => {
+                proc.removeListener("exit", onExit)
+                resolve()
+            }, 5000)
+        })
+
         serverProcess.kill()
         serverProcess = null
+
+        // Wait for process to exit
+        await exitPromise
+
+        // Additional wait for OS to release port
+        await new Promise((resolve) => setTimeout(resolve, 500))
     }
 }
 
@@ -150,8 +187,8 @@ async function waitForServerStop(timeout = 5000): Promise<void> {
 export async function restartNextServer(): Promise<string> {
     console.log("Restarting Next.js server...")
 
-    // Stop the current server
-    stopNextServer()
+    // Stop the current server and wait for it to exit
+    await stopNextServer()
 
     // Wait for the port to be released
     await waitForServerStop()

electron/main/proxy-manager.ts

@@ -0,0 +1,75 @@
+import { app } from "electron"
+import * as fs from "fs"
+import * as path from "path"
+import type { ProxyConfig } from "../electron.d"
+
+export type { ProxyConfig }
+
+const CONFIG_FILE = "proxy-config.json"
+
+function getConfigPath(): string {
+    return path.join(app.getPath("userData"), CONFIG_FILE)
+}
+
+/**
+ * Load proxy configuration from JSON file
+ */
+export function loadProxyConfig(): ProxyConfig {
+    try {
+        const configPath = getConfigPath()
+        if (fs.existsSync(configPath)) {
+            const data = fs.readFileSync(configPath, "utf-8")
+            return JSON.parse(data) as ProxyConfig
+        }
+    } catch (error) {
+        console.error("Failed to load proxy config:", error)
+    }
+    return {}
+}
+
+/**
+ * Save proxy configuration to JSON file
+ */
+export function saveProxyConfig(config: ProxyConfig): void {
+    try {
+        const configPath = getConfigPath()
+        fs.writeFileSync(configPath, JSON.stringify(config, null, 2), "utf-8")
+    } catch (error) {
+        console.error("Failed to save proxy config:", error)
+        throw error
+    }
+}
+
+/**
+ * Apply proxy configuration to process.env
+ * Must be called BEFORE starting the Next.js server
+ */
+export function applyProxyToEnv(): void {
+    const config = loadProxyConfig()
+
+    if (config.httpProxy) {
+        process.env.HTTP_PROXY = config.httpProxy
+        process.env.http_proxy = config.httpProxy
+    } else {
+        delete process.env.HTTP_PROXY
+        delete process.env.http_proxy
+    }
+
+    if (config.httpsProxy) {
+        process.env.HTTPS_PROXY = config.httpsProxy
+        process.env.https_proxy = config.httpsProxy
+    } else {
+        delete process.env.HTTPS_PROXY
+        delete process.env.https_proxy
+    }
+}
+
+/**
+ * Get current proxy configuration (from process.env)
+ */
+export function getProxyConfig(): ProxyConfig {
+    return {
+        httpProxy: process.env.HTTP_PROXY || process.env.http_proxy || "",
+        httpsProxy: process.env.HTTPS_PROXY || process.env.https_proxy || "",
+    }
+}

electron/preload/index.ts

@@ -21,4 +21,14 @@ contextBridge.exposeInMainWorld("electronAPI", {
     // File operations
     openFile: () => ipcRenderer.invoke("dialog-open-file"),
     saveFile: (data: string) => ipcRenderer.invoke("dialog-save-file", data),
+
+    // Proxy settings
+    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),
 })

electron/settings/index.html

@@ -55,6 +55,7 @@
                             <option value="openrouter">OpenRouter</option>
                             <option value="deepseek">DeepSeek</option>
                             <option value="siliconflow">SiliconFlow</option>
+                            <option value="modelscope">ModelScope</option>
                             <option value="ollama">Ollama (Local)</option>
                         </select>
                     </div>

electron/settings/settings.js

@@ -288,6 +288,7 @@ function getProviderLabel(provider) {
         openrouter: "OpenRouter",
         deepseek: "DeepSeek",
         siliconflow: "SiliconFlow",
+        modelscope: "ModelScope",
         ollama: "Ollama",
     }
     return labels[provider] || provider

env.example

@@ -1,6 +1,6 @@
 # AI Provider Configuration
 # AI_PROVIDER: Which provider to use
-# Options: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, gateway
+# Options: bedrock, openai, anthropic, google, vertexai, azure, ollama, openrouter, deepseek, siliconflow, gateway
 # Default: bedrock
 AI_PROVIDER=bedrock
 
@@ -40,6 +40,14 @@ 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}
@@ -72,6 +80,10 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
 # SGLANG_API_KEY=your-sglang-api-key
 # SGLANG_BASE_URL=http://127.0.0.1:8000/v1  # Your SGLang endpoint
 
+# ModelScope Configuration
+# MODELSCOPE_API_KEY=ms-...
+# MODELSCOPE_BASE_URL=https://api-inference.modelscope.cn/v1  # Optional: Custom endpoint
+
 # ByteDance Doubao Configuration (via Volcengine)
 # DOUBAO_API_KEY=your-doubao-api-key
 # DOUBAO_BASE_URL=https://ark.cn-beijing.volces.com/api/v3  # ByteDance Volcengine endpoint
@@ -89,6 +101,11 @@ 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)
@@ -112,3 +129,8 @@ 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,4 +1,12 @@
 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"
@@ -29,11 +37,13 @@ type AddToolOutputParams = AddToolOutputSuccess | AddToolOutputError
 
 type AddToolOutputFn = (params: AddToolOutputParams) => void
 
-interface DiagramOperation {
-    operation: "update" | "add" | "delete"
-    cell_id: string
-    new_xml?: string
-}
+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>
@@ -42,6 +52,14 @@ 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
 }
 
 /**
@@ -58,7 +76,34 @@ 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,
@@ -160,7 +205,159 @@ ${finalXml}
             // Success - diagram will be rendered by chat-message-display
             if (DEBUG) {
                 console.log(
-                    "[display_diagram] Success! Adding tool output with state: output-available",
+                    "[display_diagram] Success! Checking if VLM validation is enabled...",
+                )
+            }
+
+            // 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,6 +1,8 @@
 "use client"
 
 import { useCallback, useEffect, useState } from "react"
+import { getApiEndpoint } from "@/lib/base-path"
+import type { FlattenedServerModel } from "@/lib/server-model-config"
 import { STORAGE_KEYS } from "@/lib/storage"
 import {
     createEmptyConfig,
@@ -132,14 +134,56 @@ 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 config on mount
+    // Load client 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(getApiEndpoint("/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) {
@@ -148,9 +192,33 @@ export function useModelConfig(): UseModelConfigReturn {
     }, [config, isLoaded])
 
     // Derived state
-    const models = flattenModels(config)
+    const userModels = 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
-        ? findModelById(config, config.selectedModelId)
+        ? models.find((m) => m.id === config.selectedModelId)
         : undefined
 
     // Actions
@@ -282,7 +350,7 @@ export function useModelConfig(): UseModelConfigReturn {
 
     return {
         config,
-        isLoaded,
+        isLoaded: isLoaded && serverLoaded,
         models,
         selectedModel,
         selectedModelId: config.selectedModelId,
@@ -314,6 +382,10 @@ 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: "",
@@ -325,6 +397,8 @@ export function getSelectedAIConfig(): {
         awsSecretAccessKey: "",
         awsRegion: "",
         awsSessionToken: "",
+        selectedModelId: "",
+        vertexApiKey: "",
     }
 
     if (typeof window === "undefined") return empty
@@ -347,6 +421,8 @@ export function getSelectedAIConfig(): {
             awsSecretAccessKey: "",
             awsRegion: "",
             awsSessionToken: "",
+            selectedModelId: "",
+            vertexApiKey: "",
         }
     }
 
@@ -357,12 +433,32 @@ export function getSelectedAIConfig(): {
         return { ...empty, accessCode }
     }
 
-    // No selected model = use server default
+    // No selected model = use server default (AI_PROVIDER/AI_MODEL/env auto-detect)
     if (!config.selectedModelId) {
         return { ...empty, accessCode }
     }
 
-    // Find selected model
+    // Server-side model selection (id = "server:<name-slug>:<modelId>")
+    // 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 }
@@ -379,5 +475,8 @@ 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

@@ -0,0 +1,136 @@
+"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-config.ts

@@ -1,26 +0,0 @@
-import { STORAGE_KEYS } from "./storage"
-
-/**
- * Get AI configuration from localStorage.
- * Returns API keys and settings for custom AI providers.
- * Used to override server defaults when user provides their own API key.
- */
-export function getAIConfig() {
-    if (typeof window === "undefined") {
-        return {
-            accessCode: "",
-            aiProvider: "",
-            aiBaseUrl: "",
-            aiApiKey: "",
-            aiModel: "",
-        }
-    }
-
-    return {
-        accessCode: localStorage.getItem(STORAGE_KEYS.accessCode) || "",
-        aiProvider: localStorage.getItem(STORAGE_KEYS.aiProvider) || "",
-        aiBaseUrl: localStorage.getItem(STORAGE_KEYS.aiBaseUrl) || "",
-        aiApiKey: localStorage.getItem(STORAGE_KEYS.aiApiKey) || "",
-        aiModel: localStorage.getItem(STORAGE_KEYS.aiModel) || "",
-    }
-}

lib/ai-providers.ts

@@ -4,25 +4,14 @@ 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"
 import { createOllama, ollama } from "ollama-ai-provider-v2"
+import type { ProviderName } from "@/lib/types/model-config"
 
-export type ProviderName =
-    | "bedrock"
-    | "openai"
-    | "anthropic"
-    | "google"
-    | "azure"
-    | "ollama"
-    | "openrouter"
-    | "deepseek"
-    | "siliconflow"
-    | "sglang"
-    | "gateway"
-    | "edgeone"
-    | "doubao"
+export type { ProviderName }
 
 interface ModelConfig {
     model: any
@@ -41,15 +30,21 @@ 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
+// Providers that can be selected from client settings
 const ALLOWED_CLIENT_PROVIDERS: ProviderName[] = [
     "openai",
     "anthropic",
     "google",
+    "vertexai",
     "azure",
     "bedrock",
     "openrouter",
@@ -58,7 +53,9 @@ const ALLOWED_CLIENT_PROVIDERS: ProviderName[] = [
     "sglang",
     "gateway",
     "edgeone",
+    "ollama",
     "doubao",
+    "modelscope",
 ]
 
 // Bedrock provider options for Anthropic beta features
@@ -73,6 +70,62 @@ const ANTHROPIC_BETA_HEADERS = {
     "anthropic-beta": "fine-grained-tool-streaming-2025-05-14",
 }
 
+/**
+ * Resolve baseURL based on whether user is providing their own API key.
+ * When user provides their own API key, we should NOT fall back to server's
+ * baseURL environment variable - user credentials should only be sent to
+ * user-specified endpoints or official provider endpoints.
+ *
+ * @param userApiKey - User-provided API key (if any)
+ * @param userBaseUrl - User-provided base URL (if any)
+ * @param serverBaseUrl - Server's base URL from environment variable
+ * @param defaultBaseUrl - Provider's official/default base URL (optional)
+ * @returns The resolved base URL to use
+ */
+export function resolveBaseURL(
+    userApiKey: string | null | undefined,
+    userBaseUrl: string | null | undefined,
+    serverBaseUrl: string | undefined,
+    defaultBaseUrl?: string,
+): string | undefined {
+    if (userApiKey) {
+        // User provides their own API key - only use user's baseUrl or default
+        return userBaseUrl || defaultBaseUrl || undefined
+    }
+    // No user API key - fall back to server config
+    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
  */
@@ -107,6 +160,8 @@ 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)
@@ -271,7 +326,46 @@ 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
@@ -353,6 +447,7 @@ function buildProviderOptions(
         case "siliconflow":
         case "sglang":
         case "gateway":
+        case "modelscope":
         case "doubao": {
             // These providers don't have reasoning configs in AI SDK yet
             // Gateway passes through to underlying providers which handle their own configs
@@ -372,6 +467,7 @@ 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",
@@ -381,6 +477,7 @@ const PROVIDER_ENV_VARS: Record<ProviderName, string | null> = {
     gateway: "AI_GATEWAY_API_KEY",
     edgeone: null, // No credentials needed - uses EdgeOne Edge AI
     doubao: "DOUBAO_API_KEY",
+    modelscope: "MODELSCOPE_API_KEY",
 }
 
 /**
@@ -418,9 +515,15 @@ 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(provider: ProviderName): void {
-    const requiredVar = PROVIDER_ENV_VARS[provider]
+function validateProviderCredentials(
+    provider: ProviderName,
+    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. ` +
@@ -445,7 +548,7 @@ function validateProviderCredentials(provider: ProviderName): void {
  * Get the AI model based on environment variables
  *
  * Environment variables:
- * - AI_PROVIDER: The provider to use (bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, sglang, gateway)
+ * - AI_PROVIDER: The provider to use (bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, sglang, gateway, modelscope)
  * - AI_MODEL: The model ID/name for the selected provider
  *
  * Provider-specific env vars:
@@ -460,19 +563,23 @@ function validateProviderCredentials(provider: ProviderName): void {
  * - DEEPSEEK_API_KEY: DeepSeek API key
  * - DEEPSEEK_BASE_URL: DeepSeek endpoint (optional)
  * - SILICONFLOW_API_KEY: SiliconFlow API key
- * - SILICONFLOW_BASE_URL: SiliconFlow endpoint (optional, defaults to https://api.siliconflow.com/v1)
+ * - SILICONFLOW_BASE_URL: SiliconFlow endpoint (optional, defaults to https://api.siliconflow.cn/v1)
  * - SGLANG_API_KEY: SGLang API key
  * - SGLANG_BASE_URL: SGLang endpoint (optional)
+ * - MODELSCOPE_API_KEY: ModelScope API key
+ * - MODELSCOPE_BASE_URL: ModelScope endpoint (optional)
  */
 export function getAIModel(overrides?: ClientOverrides): ModelConfig {
     // SECURITY: Prevent SSRF attacks (GHSA-9qf7-mprq-9qgm)
     // If a custom baseUrl is provided, an API key MUST also be provided.
     // This prevents attackers from redirecting server API keys to malicious endpoints.
-    // Exception: EdgeOne provider doesn't require API key (uses Edge AI runtime)
+    // Exception: EdgeOne and Ollama providers don't require API keys
     if (
         overrides?.baseUrl &&
         !overrides?.apiKey &&
-        overrides?.provider !== "edgeone"
+        !(overrides?.provider === "vertexai" && overrides?.vertexApiKey) &&
+        overrides?.provider !== "edgeone" &&
+        overrides?.provider !== "ollama"
     ) {
         throw new Error(
             `API key is required when using a custom base URL. ` +
@@ -481,7 +588,11 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
     }
 
     // Check if client is providing their own provider override
-    const isClientOverride = !!(overrides?.provider && overrides?.apiKey)
+    const isClientOverride = !!(
+        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
@@ -537,6 +648,7 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
                         `- AZURE_API_KEY for Azure\n` +
                         `- SILICONFLOW_API_KEY for SiliconFlow\n` +
                         `- SGLANG_API_KEY for SGLang\n` +
+                        `- MODELSCOPE_API_KEY for ModelScope\n` +
                         `Or set AI_PROVIDER=ollama for local Ollama.`,
                 )
             } else {
@@ -550,7 +662,7 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
 
     // Only validate server credentials if client isn't providing their own API key
     if (!isClientOverride) {
-        validateProviderCredentials(provider)
+        validateProviderCredentials(provider, overrides?.apiKeyEnv)
     }
 
     console.log(`[AI Provider] Initializing ${provider} with model: ${modelId}`)
@@ -573,8 +685,8 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
             const bedrockProvider = hasClientCredentials
                 ? createAmazonBedrock({
                       region: bedrockRegion,
-                      accessKeyId: overrides.awsAccessKeyId!,
-                      secretAccessKey: overrides.awsSecretAccessKey!,
+                      accessKeyId: overrides.awsAccessKeyId as string,
+                      secretAccessKey: overrides.awsSecretAccessKey as string,
                       ...(overrides?.awsSessionToken && {
                           sessionToken: overrides.awsSessionToken,
                       }),
@@ -600,8 +712,16 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
         }
 
         case "openai": {
-            const apiKey = overrides?.apiKey || process.env.OPENAI_API_KEY
-            const baseURL = overrides?.baseUrl || process.env.OPENAI_BASE_URL
+            const apiKey = resolveApiKey(overrides, "OPENAI_API_KEY")
+            const serverBaseUrl = resolveBaseUrlEnv(
+                overrides,
+                "OPENAI_BASE_URL",
+            )
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                serverBaseUrl,
+            )
             if (baseURL) {
                 // Custom base URL = third-party proxy, use Chat Completions API
                 // for compatibility (most proxies don't support /responses endpoint)
@@ -619,11 +739,17 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
         }
 
         case "anthropic": {
-            const apiKey = overrides?.apiKey || process.env.ANTHROPIC_API_KEY
-            const baseURL =
-                overrides?.baseUrl ||
-                process.env.ANTHROPIC_BASE_URL ||
-                "https://api.anthropic.com/v1"
+            const apiKey = resolveApiKey(overrides, "ANTHROPIC_API_KEY")
+            const serverBaseUrl = resolveBaseUrlEnv(
+                overrides,
+                "ANTHROPIC_BASE_URL",
+            )
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                serverBaseUrl,
+                "https://api.anthropic.com/v1",
+            )
             const customProvider = createAnthropic({
                 apiKey,
                 baseURL,
@@ -636,9 +762,19 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
         }
 
         case "google": {
-            const apiKey =
-                overrides?.apiKey || process.env.GOOGLE_GENERATIVE_AI_API_KEY
-            const baseURL = overrides?.baseUrl || process.env.GOOGLE_BASE_URL
+            const apiKey = resolveApiKey(
+                overrides,
+                "GOOGLE_GENERATIVE_AI_API_KEY",
+            )
+            const serverBaseUrl = resolveBaseUrlEnv(
+                overrides,
+                "GOOGLE_BASE_URL",
+            )
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                serverBaseUrl,
+            )
             if (baseURL || overrides?.apiKey) {
                 const customGoogle = createGoogleGenerativeAI({
                     apiKey,
@@ -650,11 +786,42 @@ 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 = overrides?.apiKey || process.env.AZURE_API_KEY
-            const baseURL = overrides?.baseUrl || process.env.AZURE_BASE_URL
-            const resourceName = process.env.AZURE_RESOURCE_NAME
+            const apiKey = resolveApiKey(overrides, "AZURE_API_KEY")
+            const serverBaseUrl = resolveBaseUrlEnv(overrides, "AZURE_BASE_URL")
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                serverBaseUrl,
+            )
+            // Only use server's resourceName if user is NOT providing their own API key
+            const resourceName = overrides?.apiKey
+                ? undefined
+                : process.env.AZURE_RESOURCE_NAME
             // Azure requires either baseURL or resourceName to construct the endpoint
             // resourceName constructs: https://{resourceName}.openai.azure.com/openai/v1{path}
             if (baseURL || resourceName || overrides?.apiKey) {
@@ -671,21 +838,28 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
             break
         }
 
-        case "ollama":
-            if (process.env.OLLAMA_BASE_URL) {
-                const customOllama = createOllama({
-                    baseURL: process.env.OLLAMA_BASE_URL,
-                })
+        case "ollama": {
+            const baseURL = overrides?.baseUrl || process.env.OLLAMA_BASE_URL
+            if (baseURL) {
+                const customOllama = createOllama({ baseURL })
                 model = customOllama(modelId)
             } else {
                 model = ollama(modelId)
             }
             break
+        }
 
         case "openrouter": {
-            const apiKey = overrides?.apiKey || process.env.OPENROUTER_API_KEY
-            const baseURL =
-                overrides?.baseUrl || process.env.OPENROUTER_BASE_URL
+            const apiKey = resolveApiKey(overrides, "OPENROUTER_API_KEY")
+            const serverBaseUrl = resolveBaseUrlEnv(
+                overrides,
+                "OPENROUTER_BASE_URL",
+            )
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                serverBaseUrl,
+            )
             const openrouter = createOpenRouter({
                 apiKey,
                 ...(baseURL && { baseURL }),
@@ -695,8 +869,16 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
         }
 
         case "deepseek": {
-            const apiKey = overrides?.apiKey || process.env.DEEPSEEK_API_KEY
-            const baseURL = overrides?.baseUrl || process.env.DEEPSEEK_BASE_URL
+            const apiKey = resolveApiKey(overrides, "DEEPSEEK_API_KEY")
+            const serverBaseUrl = resolveBaseUrlEnv(
+                overrides,
+                "DEEPSEEK_BASE_URL",
+            )
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                serverBaseUrl,
+            )
             if (baseURL || overrides?.apiKey) {
                 const customDeepSeek = createDeepSeek({
                     apiKey,
@@ -710,11 +892,17 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
         }
 
         case "siliconflow": {
-            const apiKey = overrides?.apiKey || process.env.SILICONFLOW_API_KEY
-            const baseURL =
-                overrides?.baseUrl ||
-                process.env.SILICONFLOW_BASE_URL ||
-                "https://api.siliconflow.com/v1"
+            const apiKey = resolveApiKey(overrides, "SILICONFLOW_API_KEY")
+            const serverBaseUrl = resolveBaseUrlEnv(
+                overrides,
+                "SILICONFLOW_BASE_URL",
+            )
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                serverBaseUrl,
+                "https://api.siliconflow.cn/v1",
+            )
             const siliconflowProvider = createOpenAI({
                 apiKey,
                 baseURL,
@@ -724,12 +912,20 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
         }
 
         case "sglang": {
-            const apiKey = overrides?.apiKey || process.env.SGLANG_API_KEY
-            const baseURL = overrides?.baseUrl || process.env.SGLANG_BASE_URL
+            const apiKey = resolveApiKey(overrides, "SGLANG_API_KEY")
+            const serverBaseUrl = resolveBaseUrlEnv(
+                overrides,
+                "SGLANG_BASE_URL",
+            )
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                serverBaseUrl,
+            )
 
             const sglangProvider = createOpenAI({
                 apiKey,
-                baseURL,
+                ...(baseURL && { baseURL }),
                 // Add a custom fetch wrapper to intercept and fix the stream from sglang
                 fetch: async (url, options) => {
                     const response = await fetch(url, options)
@@ -833,9 +1029,16 @@ 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 = overrides?.apiKey || process.env.AI_GATEWAY_API_KEY
-            const baseURL =
-                overrides?.baseUrl || process.env.AI_GATEWAY_BASE_URL
+            const apiKey = resolveApiKey(overrides, "AI_GATEWAY_API_KEY")
+            const serverBaseUrl = resolveBaseUrlEnv(
+                overrides,
+                "AI_GATEWAY_BASE_URL",
+            )
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                serverBaseUrl,
+            )
             // Only use custom configuration if explicitly set (local dev or custom Gateway)
             // Otherwise undefined → AI SDK uses Vercel default (https://ai-gateway.vercel.sh/v1/ai) + OIDC
             if (baseURL || overrides?.apiKey) {
@@ -866,22 +1069,61 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
         }
 
         case "doubao": {
-            const apiKey = overrides?.apiKey || process.env.DOUBAO_API_KEY
-            const baseURL =
-                overrides?.baseUrl ||
-                process.env.DOUBAO_BASE_URL ||
-                "https://ark.cn-beijing.volces.com/api/v3"
-            const doubaoProvider = createDeepSeek({
+            const apiKey = resolveApiKey(overrides, "DOUBAO_API_KEY")
+            const serverBaseUrl = resolveBaseUrlEnv(
+                overrides,
+                "DOUBAO_BASE_URL",
+            )
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                serverBaseUrl,
+                "https://ark.cn-beijing.volces.com/api/v3",
+            )
+            const lowerModelId = modelId.toLowerCase()
+            // Use DeepSeek provider for DeepSeek/Kimi models, OpenAI for others (multimodal support)
+            if (
+                lowerModelId.includes("deepseek") ||
+                lowerModelId.includes("kimi")
+            ) {
+                const doubaoProvider = createDeepSeek({
+                    apiKey,
+                    baseURL,
+                })
+                model = doubaoProvider(modelId)
+            } else {
+                const doubaoProvider = createOpenAI({
+                    apiKey,
+                    baseURL,
+                })
+                model = doubaoProvider.chat(modelId)
+            }
+            break
+        }
+
+        case "modelscope": {
+            const apiKey = resolveApiKey(overrides, "MODELSCOPE_API_KEY")
+            const serverBaseUrl = resolveBaseUrlEnv(
+                overrides,
+                "MODELSCOPE_BASE_URL",
+            )
+            const baseURL = resolveBaseURL(
+                overrides?.apiKey,
+                overrides?.baseUrl,
+                serverBaseUrl,
+                "https://api-inference.modelscope.cn/v1",
+            )
+            const modelscopeProvider = createOpenAI({
                 apiKey,
                 baseURL,
             })
-            model = doubaoProvider(modelId)
+            model = modelscopeProvider.chat(modelId)
             break
         }
 
         default:
             throw new Error(
-                `Unknown AI provider: ${provider}. Supported providers: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, sglang, gateway, edgeone, doubao`,
+                `Unknown AI provider: ${provider}. Supported providers: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, sglang, gateway, edgeone, doubao, modelscope`,
             )
     }
 
@@ -937,3 +1179,27 @@ 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/chat-helpers.ts

@@ -0,0 +1,89 @@
+// Shared helper functions for chat route
+// Exported for testing
+
+// File upload limits (must match client-side)
+export const MAX_FILE_SIZE = 2 * 1024 * 1024 // 2MB
+export const MAX_FILES = 5
+
+// Helper function to validate file parts in messages
+export function validateFileParts(messages: any[]): {
+    valid: boolean
+    error?: string
+} {
+    const lastMessage = messages[messages.length - 1]
+    const fileParts =
+        lastMessage?.parts?.filter((p: any) => p.type === "file") || []
+
+    if (fileParts.length > MAX_FILES) {
+        return {
+            valid: false,
+            error: `Too many files. Maximum ${MAX_FILES} allowed.`,
+        }
+    }
+
+    for (const filePart of fileParts) {
+        // Data URLs format: data:image/png;base64,<data>
+        // Base64 increases size by ~33%, so we check the decoded size
+        if (filePart.url?.startsWith("data:")) {
+            const base64Data = filePart.url.split(",")[1]
+            if (base64Data) {
+                const sizeInBytes = Math.ceil((base64Data.length * 3) / 4)
+                if (sizeInBytes > MAX_FILE_SIZE) {
+                    return {
+                        valid: false,
+                        error: `File exceeds ${MAX_FILE_SIZE / 1024 / 1024}MB limit.`,
+                    }
+                }
+            }
+        }
+    }
+
+    return { valid: true }
+}
+
+// Helper function to check if diagram is minimal/empty
+export function isMinimalDiagram(xml: string): boolean {
+    const stripped = xml.replace(/\s/g, "")
+    return !stripped.includes('id="2"')
+}
+
+// Helper function to replace historical tool call XML with placeholders
+// This reduces token usage and forces LLM to rely on the current diagram XML (source of truth)
+// Also fixes invalid/undefined inputs from interrupted streaming
+export function replaceHistoricalToolInputs(messages: any[]): any[] {
+    return messages.map((msg) => {
+        if (msg.role !== "assistant" || !Array.isArray(msg.content)) {
+            return msg
+        }
+        const replacedContent = msg.content
+            .map((part: any) => {
+                if (part.type === "tool-call") {
+                    const toolName = part.toolName
+                    // Fix invalid/undefined inputs from interrupted streaming
+                    if (
+                        !part.input ||
+                        typeof part.input !== "object" ||
+                        Object.keys(part.input).length === 0
+                    ) {
+                        // Skip tool calls with invalid inputs entirely
+                        return null
+                    }
+                    if (
+                        toolName === "display_diagram" ||
+                        toolName === "edit_diagram"
+                    ) {
+                        return {
+                            ...part,
+                            input: {
+                                placeholder:
+                                    "[XML content replaced - see current diagram XML in system context]",
+                            },
+                        }
+                    }
+                }
+                return part
+            })
+            .filter(Boolean) // Remove null entries (invalid tool calls)
+        return { ...msg, content: replacedContent }
+    })
+}

lib/diagram-validator.ts

@@ -0,0 +1,64 @@
+/**
+ * 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/config.ts

@@ -1,6 +1,6 @@
 export const i18n = {
     defaultLocale: "en",
-    locales: ["en", "zh", "ja"],
+    locales: ["en", "zh", "ja", "zh-Hant"],
 } as const
 
 export type Locale = (typeof i18n)["locales"][number]

lib/i18n/dictionaries.ts

@@ -6,6 +6,8 @@ const dictionaries = {
     en: () => import("./dictionaries/en.json").then((m) => m.default),
     zh: () => import("./dictionaries/zh.json").then((m) => m.default),
     ja: () => import("./dictionaries/ja.json").then((m) => m.default),
+    "zh-Hant": () =>
+        import("./dictionaries/zh-Hant.json").then((m) => m.default),
 }
 
 export type Dictionary = Awaited<ReturnType<(typeof dictionaries)["en"]>>

lib/i18n/dictionaries/en.json

@@ -28,7 +28,8 @@
         "azure": "Azure OpenAI",
         "openrouter": "OpenRouter",
         "deepseek": "DeepSeek",
-        "siliconflow": "SiliconFlow"
+        "siliconflow": "SiliconFlow",
+        "modelscope": "ModelScope"
     },
     "chat": {
         "placeholder": "Describe your diagram or upload a file...",
@@ -51,7 +52,8 @@
         "badResponse": "Bad response",
         "clickToEdit": "Click to edit",
         "editMessage": "Edit message",
-        "saveAndSubmit": "Save & Submit"
+        "saveAndSubmit": "Save & Submit",
+        "ExtractURL": "Extract from URL"
     },
     "examples": {
         "title": "Create diagrams with AI",
@@ -75,6 +77,8 @@
     "settings": {
         "title": "Settings",
         "description": "Configure your application settings.",
+        "apiKeysModels": "API Keys & Models",
+        "apiKeysModelsDescription": "Configure AI providers and API keys.",
         "accessCode": "Access Code",
         "accessCodePlaceholder": "Enter access code",
         "accessCodeDescription": "Required to use this application.",
@@ -98,14 +102,26 @@
         "switchTo": "Switch to",
         "minimal": "Minimal",
         "sketch": "Sketch",
-        "closeProtection": "Close Protection",
-        "closeProtectionDescription": "Show confirmation when leaving the page.",
         "diagramStyle": "Diagram Style",
         "diagramStyleDescription": "Toggle between minimal and styled diagram output.",
+        "sendShortcut": "Send Shortcut",
+        "sendShortcutDescription": "Choose how to send messages.",
+        "enterToSend": "Enter to send",
+        "ctrlEnterToSend": "Cmd/Ctrl+Enter to send",
         "diagramActions": "Diagram Actions",
         "diagramActionsDescription": "Manage diagram history and exports",
         "history": "History",
-        "download": "Download"
+        "download": "Download",
+        "proxy": "Proxy Settings",
+        "proxyDescription": "Configure HTTP/HTTPS proxy for API requests (Desktop only)",
+        "httpProxy": "HTTP Proxy",
+        "httpsProxy": "HTTPS Proxy",
+        "applyProxy": "Apply",
+        "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",
@@ -186,6 +202,15 @@
         "chars": "chars",
         "removeFile": "Remove file"
     },
+    "url": {
+        "title": "Extract Content from URL",
+        "description": "Paste a URL to extract and analyze its content",
+        "Extracting": "Extracting...",
+        "extract": "Extract",
+        "Cancel": "Cancel",
+        "enterUrl": "Please enter a URL",
+        "invalidFormat": "Invalid URL format"
+    },
     "reasoning": {
         "thinking": "Thinking...",
         "thoughtFor": "Thought for {duration} seconds",
@@ -229,6 +254,24 @@
         "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",
@@ -261,6 +304,7 @@
         "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...",
@@ -286,10 +330,13 @@
         "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

@@ -28,7 +28,8 @@
         "azure": "Azure OpenAI",
         "openrouter": "OpenRouter",
         "deepseek": "DeepSeek",
-        "siliconflow": "SiliconFlow"
+        "siliconflow": "SiliconFlow",
+        "modelscope": "ModelScope"
     },
     "chat": {
         "placeholder": "ダイアグラムを説明するか、ファイルをアップロード...",
@@ -51,7 +52,8 @@
         "badResponse": "悪い応答",
         "clickToEdit": "クリックして編集",
         "editMessage": "メッセージを編集",
-        "saveAndSubmit": "保存して送信"
+        "saveAndSubmit": "保存して送信",
+        "ExtractURL": "URLから抽出"
     },
     "examples": {
         "title": "AI でダイアグラムを作成",
@@ -75,6 +77,8 @@
     "settings": {
         "title": "設定",
         "description": "アプリケーション設定を構成します。",
+        "apiKeysModels": "API キーとモデル",
+        "apiKeysModelsDescription": "AI プロバイダーと API キーを設定します。",
         "accessCode": "アクセスコード",
         "accessCodePlaceholder": "アクセスコードを入力",
         "accessCodeDescription": "このアプリケーションを使用するために必要です。",
@@ -98,14 +102,26 @@
         "switchTo": "切り替え",
         "minimal": "ミニマル",
         "sketch": "スケッチ",
-        "closeProtection": "ページ離脱確認",
-        "closeProtectionDescription": "ページを離れる際に確認を表示します。",
         "diagramStyle": "ダイアグラムスタイル",
         "diagramStyleDescription": "ミニマルとスタイル付きの出力を切り替えます。",
+        "sendShortcut": "送信ショートカット",
+        "sendShortcutDescription": "メッセージの送信方法を選択します。",
+        "enterToSend": "Enterで送信",
+        "ctrlEnterToSend": "Cmd/Ctrl+Enterで送信",
         "diagramActions": "ダイアグラム操作",
         "diagramActionsDescription": "ダイアグラムの履歴とエクスポートを管理",
         "history": "履歴",
-        "download": "ダウンロード"
+        "download": "ダウンロード",
+        "proxy": "プロキシ設定",
+        "proxyDescription": "API リクエスト用の HTTP/HTTPS プロキシを設定（デスクトップ版のみ）",
+        "httpProxy": "HTTP プロキシ",
+        "httpsProxy": "HTTPS プロキシ",
+        "applyProxy": "適用",
+        "proxyApplied": "プロキシ設定が適用されました",
+        "diagramValidation": "ダイアグラム検証（実験的）",
+        "diagramValidationDescription": "視覚言語モデルを使用して生成されたダイアグラムを検証します。GPT-5.2 や Sonnet-4.5 などの VLM が必要です。",
+        "enabled": "有効",
+        "disabled": "無効"
     },
     "save": {
         "title": "ダイアグラムを保存",
@@ -186,6 +202,15 @@
         "chars": "文字",
         "removeFile": "ファイルを削除"
     },
+    "url": {
+        "title": "URLからコンテンツを抽出",
+        "description": "URLを貼り付けてそのコンテンツを抽出および分析します",
+        "Extracting": "抽出中...",
+        "extract": "抽出",
+        "Cancel": "キャンセル",
+        "enterUrl": "URLを入力してください",
+        "invalidFormat": "無効なURL形式です"
+    },
     "reasoning": {
         "thinking": "考え中...",
         "thoughtFor": "{duration} 秒考えました",
@@ -229,6 +254,24 @@
         "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プロバイダーとモデルを設定",
@@ -261,6 +304,7 @@
         "enterSecretKey": "シークレットアクセスキーを入力",
         "baseUrl": "ベース URL",
         "optional": "（オプション）",
+        "baseUrlWithExample": "ベース URL（オプション、例: {example}）",
         "customEndpoint": "カスタムエンドポイント URL",
         "models": "モデル",
         "customModelId": "カスタムモデル ID...",
@@ -286,10 +330,13 @@
         "noModelsFound": "モデルが見つかりません。",
         "default": "デフォルト",
         "serverDefault": "サーバーデフォルト",
+        "serverModels": "サーバーモデル",
+        "userModels": "ユーザーモデル",
         "configureModels": "モデルを設定...",
         "onlyVerifiedShown": "検証済みのモデルのみ表示",
         "showUnvalidatedModels": "未検証のモデルを表示",
         "allModelsShown": "すべてのモデルを表示（未検証を含む）",
-        "unvalidatedModelWarning": "このモデルは検証されていません"
+        "unvalidatedModelWarning": "このモデルは検証されていません",
+        "serverDefaultModel": "サーバーデフォルトモデル"
     }
 }

lib/i18n/dictionaries/zh-Hant.json

@@ -0,0 +1,342 @@
+{
+    "common": {
+        "save": "儲存",
+        "cancel": "取消",
+        "close": "關閉",
+        "confirm": "確認",
+        "clear": "清除",
+        "edit": "編輯",
+        "delete": "刪除",
+        "loading": "載入中...",
+        "new": "新建"
+    },
+    "nav": {
+        "about": "關於",
+        "editor": "編輯器",
+        "newChat": "開始新對話",
+        "github": "GitHub",
+        "settings": "設定",
+        "hidePanel": "隱藏聊天面板 (Ctrl+B)",
+        "showPanel": "顯示聊天面板 (Ctrl+B)",
+        "aiChat": "AI 聊天"
+    },
+    "providers": {
+        "useServerDefault": "使用伺服器預設值",
+        "openai": "OpenAI",
+        "anthropic": "Anthropic",
+        "google": "Google",
+        "azure": "Azure OpenAI",
+        "openrouter": "OpenRouter",
+        "deepseek": "DeepSeek",
+        "siliconflow": "SiliconFlow",
+        "modelscope": "ModelScope"
+    },
+    "chat": {
+        "placeholder": "描述您的圖表或上傳檔案...",
+        "send": "傳送",
+        "sending": "傳送中...",
+        "sendMessage": "傳送訊息",
+        "clearConversation": "清除對話",
+        "diagramHistory": "圖表歷史",
+        "saveDiagram": "儲存圖表",
+        "uploadFile": "上傳檔案（圖片、PDF、文字）",
+        "minimalStyle": "簡約",
+        "styledMode": "精緻",
+        "minimalTooltip": "使用簡約模式以加快產生速度（無顏色）",
+        "regenerate": "重新產生回應",
+        "copyResponse": "複製回應",
+        "copied": "已複製！",
+        "failedToCopy": "複製失敗",
+        "failedToCopyDetail": "複製訊息失敗。請手動複製或檢查剪貼簿權限。",
+        "goodResponse": "有幫助",
+        "badResponse": "無幫助",
+        "clickToEdit": "點擊編輯",
+        "editMessage": "編輯訊息",
+        "saveAndSubmit": "儲存並提交",
+        "ExtractURL": "從 URL 擷取"
+    },
+    "examples": {
+        "title": "用 AI 建立圖表",
+        "subtitle": "描述您想要建立的內容或上傳圖片進行複製",
+        "quickExamples": "快速範例",
+        "paperToDiagram": "文件轉圖表",
+        "paperDescription": "上傳 .pdf, .txt, .md, .json, .csv, .py, .js, .ts 等檔案",
+        "animatedDiagram": "動畫圖表",
+        "animatedDescription": "繪製帶有動畫連接器的 Transformer 架構",
+        "awsArchitecture": "AWS 架構",
+        "awsDescription": "使用 AWS 圖示建立雲端架構圖",
+        "replicateFlowchart": "複製流程圖",
+        "replicateDescription": "上傳並複製現有流程圖",
+        "creativeDrawing": "創意繪圖",
+        "creativeDescription": "繪製有趣且富有創意的內容",
+        "cachedNote": "範例已快取，可即時回應",
+        "mcpServer": "MCP 伺服器",
+        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用",
+        "preview": "預覽"
+    },
+    "settings": {
+        "title": "設定",
+        "description": "配置您的應用程式設定。",
+        "apiKeysModels": "API 金鑰和模型",
+        "apiKeysModelsDescription": "配置 AI 提供商和 API 金鑰。",
+        "accessCode": "存取碼",
+        "accessCodePlaceholder": "輸入存取碼",
+        "accessCodeDescription": "使用此應用程式需要存取碼。",
+        "aiProvider": "AI 提供商設定",
+        "aiProviderDescription": "使用您自己的 API 金鑰來繞過使用限制。您的金鑰僅儲存在瀏覽器本機，不會儲存在伺服器上。",
+        "provider": "提供商",
+        "modelId": "模型 ID",
+        "apiKey": "API 金鑰",
+        "apiKeyPlaceholder": "您的 API 金鑰",
+        "baseUrl": "基礎 URL（可選）",
+        "customEndpoint": "自訂端點 URL",
+        "overrides": "覆寫",
+        "clearSettings": "清除設定",
+        "useServerDefault": "使用伺服器預設值",
+        "language": "語言",
+        "languageDescription": "選擇介面語言。",
+        "theme": "主題",
+        "themeDescription": "介面和 DrawIO 畫布的深色/淺色模式。",
+        "drawioStyle": "DrawIO 樣式",
+        "drawioStyleDescription": "畫布樣式：",
+        "switchTo": "切換到",
+        "minimal": "簡約",
+        "sketch": "草圖",
+        "diagramStyle": "圖表樣式",
+        "diagramStyleDescription": "切換簡約與精緻圖表輸出模式。",
+        "sendShortcut": "傳送快捷鍵",
+        "sendShortcutDescription": "選擇傳送訊息的方式。",
+        "enterToSend": "Enter 傳送",
+        "ctrlEnterToSend": "Cmd/Ctrl+Enter 傳送",
+        "diagramActions": "圖表操作",
+        "diagramActionsDescription": "管理圖表歷史紀錄和匯出",
+        "history": "歷史紀錄",
+        "download": "下載",
+        "proxy": "代理設定",
+        "proxyDescription": "配置 API 請求的 HTTP/HTTPS 代理（僅桌面版）",
+        "httpProxy": "HTTP 代理",
+        "httpsProxy": "HTTPS 代理",
+        "applyProxy": "套用",
+        "proxyApplied": "代理設定已套用",
+        "diagramValidation": "圖表驗證（實驗性）",
+        "diagramValidationDescription": "使用視覺語言模型驗證產生的圖表。需要支援視覺的模型，如 GPT-5.2 或 Sonnet-4.5。",
+        "enabled": "已啟用",
+        "disabled": "已停用"
+    },
+    "save": {
+        "title": "儲存圖表",
+        "description": "選擇格式和檔案名稱以儲存您的圖表。",
+        "format": "格式",
+        "filename": "檔案名稱",
+        "filenamePlaceholder": "輸入檔案名稱",
+        "formats": {
+            "drawio": "Draw.io XML",
+            "png": "PNG 圖片",
+            "svg": "SVG 圖片"
+        },
+        "savedSuccessfully": "儲存成功！"
+    },
+    "history": {
+        "title": "圖表歷史",
+        "description": "在 AI 修改之前儲存的每個圖表。\n點擊圖表以還原它",
+        "noHistory": "尚無歷史紀錄。傳送訊息以建立圖表歷史。",
+        "version": "版本",
+        "restoreTo": "還原到版本 {version}？"
+    },
+    "dialogs": {
+        "clearTitle": "清除所有內容？",
+        "clearDescription": "這將清除目前對話並重設圖表。此操作無法復原。",
+        "clearEverything": "清除所有內容",
+        "clearSuccess": "已開始新對話"
+    },
+    "errors": {
+        "maxFiles": "檔案太多。最多允許 {max} 個。",
+        "onlyMoreAllowed": "只能再新增 {slots} 個檔案",
+        "fileExceeds": "「{name}」大小為 {size}（超過 {max}MB）",
+        "unsupportedType": "「{name}」不是支援的檔案類型",
+        "filesRejected": "{count} 個檔案被拒絕：",
+        "andMore": "...還有 {count} 個",
+        "invalidAccessCode": "無效或缺少存取碼。請在設定中配置。",
+        "networkError": "網路錯誤。請檢查您的連線。",
+        "retryLimit": "已達自動重試限制（{max}）。請手動重試。",
+        "continuationRetryLimit": "已達繼續重試限制（{max}）。圖表可能過於複雜。",
+        "validationFailed": "圖表驗證失敗。請嘗試重新產生。",
+        "malformedXml": "AI 產生的圖表 XML 無效。請嘗試重新產生。",
+        "failedToProcess": "無法處理圖表。請嘗試重新產生。",
+        "sessionCorrupted": "工作階段資料已損壞。重新開始。",
+        "failedToSave": "無法儲存訊息到 localStorage",
+        "failedToRestore": "無法從 localStorage 還原",
+        "failedToPersist": "卸載前無法持久化狀態",
+        "failedToExport": "取得圖表資料時出錯",
+        "failedToLoadExample": "載入範例圖片時出錯",
+        "failedToRecordFeedback": "記錄您的回饋失敗。請重試。",
+        "storageUpdateFailed": "聊天已清除，但無法更新瀏覽器儲存空間"
+    },
+    "quota": {
+        "dailyLimit": "已達每日配額",
+        "tokenLimit": "已達每日令牌限制",
+        "tpmLimit": "速率限制",
+        "tpmMessage": "請求過多。請稍等片刻。",
+        "tpmMessageDetailed": "達到速率限制（{limit} 令牌/分鐘）。請等待 {seconds} 秒後再傳送請求。",
+        "messageApi": "看來您今天的體驗次數已達上限。非常高興您玩得開心，雖然本專案由字節跳動豆包慷慨贊助，但為了確保大家都能公平使用，我們不得不對使用量做一點小小的限制。",
+        "messageToken": "看來您今天的 Token 用量已達上限。非常高興您玩得開心，雖然本專案由字節跳動豆包慷慨贊助，但為了確保大家都能公平使用，我們不得不對使用量做一點小小的限制。",
+        "tip": "<strong>提示：</strong>您可以使用自己的 API 金鑰（點擊設定圖示）或自行託管專案來繞過這些限制。",
+        "reset": "您的限制將在明天重設。感謝您的理解。",
+        "doubaoSponsorship": "<a href=\"{link}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"underline hover:text-foreground\">點此註冊</a>可獲得每個模型 50 萬免費 Token（包括豆包、DeepSeek 和 Kimi），然後在模型設定中配置您的 API Key。",
+        "configModel": "使用您的金鑰",
+        "selfHost": "自行託管",
+        "sponsor": "贊助",
+        "learnMore": "了解更多 →",
+        "usedOf": "{used}/{limit}"
+    },
+    "tools": {
+        "generateDiagram": "產生圖表",
+        "editDiagram": "編輯圖表",
+        "appendDiagram": "繼續圖表",
+        "complete": "完成",
+        "error": "錯誤",
+        "truncated": "已截斷"
+    },
+    "file": {
+        "reading": "讀取中...",
+        "chars": "字元",
+        "removeFile": "移除檔案"
+    },
+    "url": {
+        "title": "從 URL 擷取內容",
+        "description": "貼上 URL 以擷取和分析其內容",
+        "Extracting": "擷取中...",
+        "extract": "擷取",
+        "Cancel": "取消",
+        "enterUrl": "請輸入 URL",
+        "invalidFormat": "URL 格式無效"
+    },
+    "reasoning": {
+        "thinking": "思考中...",
+        "thoughtFor": "思考了 {duration} 秒",
+        "thoughtBrief": "思考了幾秒鐘"
+    },
+    "dev": {
+        "title": "開發：XML 串流模擬器",
+        "preset": "預設：",
+        "selectPreset": "選擇預設...",
+        "clear": "清除",
+        "placeholder": "在此貼上 mxCell XML 或選擇預設...",
+        "interval": "間隔：",
+        "chars": "字元：",
+        "streaming": "串流傳輸中...",
+        "simulate": "模擬",
+        "stop": "停止",
+        "testQuotaToast": "測試配額提示",
+        "simulatingMessage": "[開發] 模擬 XML 串流傳輸",
+        "successMessage": "成功顯示圖表。"
+    },
+    "about": {
+        "modelChange": "模型變更與用量限制",
+        "walletCrying": "（別名：我的錢包頂不住了）",
+        "seekingSponsorship": "尋求贊助（求大佬撈一把）",
+        "contactMe": "聯絡我",
+        "usageNotice": "由於使用量過高，我已將模型從 Claude 更換為 minimax-m2，並設定了一些用量限制。詳情請查看關於頁面。"
+    },
+    "sessionHistory": {
+        "tooltip": "聊天歷史",
+        "newChat": "新對話",
+        "empty": "暫無聊天紀錄",
+        "emptyHint": "開始對話吧",
+        "today": "今天",
+        "yesterday": "昨天",
+        "thisWeek": "本週",
+        "earlier": "更早",
+        "deleteTitle": "刪除此對話？",
+        "deleteDescription": "這將永久刪除此聊天工作階段及其圖表。此操作無法復原。",
+        "recentChats": "最近對話",
+        "justNow": "剛剛",
+        "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 提供商和模型",
+        "configure": "配置",
+        "addProvider": "新增提供商",
+        "addModel": "新增模型",
+        "modelId": "模型 ID",
+        "modelLabel": "顯示名稱",
+        "streaming": "啟用串流輸出",
+        "deleteProvider": "刪除提供商",
+        "deleteModel": "刪除模型",
+        "noModels": "尚未配置模型。新增模型以開始使用。",
+        "selectProvider": "選擇一個提供商或新增",
+        "configureMultiple": "配置多個 AI 提供商並輕鬆切換",
+        "apiKeyStored": "API 金鑰儲存在您的瀏覽器本機",
+        "test": "測試",
+        "validationError": "驗證失敗",
+        "addModelFirst": "請先新增至少一個模型以進行驗證",
+        "providers": "提供商",
+        "addProviderHint": "新增提供商即可開始使用",
+        "verified": "已驗證",
+        "configuration": "配置",
+        "displayName": "顯示名稱",
+        "awsAccessKeyId": "AWS 存取金鑰 ID",
+        "awsSecretAccessKey": "AWS Secret Access Key",
+        "awsRegion": "AWS 區域",
+        "selectRegion": "選擇區域",
+        "apiKey": "API 金鑰",
+        "enterApiKey": "輸入您的 API 金鑰",
+        "enterSecretKey": "輸入您的 Secret Key",
+        "baseUrl": "基礎 URL",
+        "optional": "（可選）",
+        "baseUrlWithExample": "基礎 URL（可選，例如 {example}）",
+        "customEndpoint": "自訂端點 URL",
+        "models": "模型",
+        "customModelId": "自訂模型 ID...",
+        "allAdded": "已全部新增",
+        "suggested": "推薦",
+        "noModelsConfigured": "尚未配置模型",
+        "modelIdEmpty": "模型 ID 不能為空",
+        "modelIdExists": "此模型 ID 已存在",
+        "configureProviders": "配置 AI 提供商",
+        "selectProviderHint": "從列表中選擇提供商或新增以配置 API 金鑰和模型",
+        "deleteConfirmDesc": "確定要刪除 {name} 嗎？這將移除所有配置的模型且無法復原。",
+        "typeToConfirm": "輸入「{name}」以確認",
+        "typeProviderName": "輸入提供商名稱...",
+        "modelsConfiguredCount": "已配置 {count} 個模型",
+        "validationFailedCount": "{count} 個模型驗證失敗",
+        "cancel": "取消",
+        "delete": "刪除",
+        "clickToChange": "（點擊變更）",
+        "usingServerDefault": "使用伺服器預設模型",
+        "selectModel": "選擇模型",
+        "searchModels": "搜尋模型...",
+        "noVerifiedModels": "沒有已驗證的模型。請先測試您的模型。",
+        "noModelsFound": "未找到模型。",
+        "default": "預設",
+        "serverDefault": "伺服器預設",
+        "serverModels": "伺服器模型",
+        "userModels": "使用者模型",
+        "configureModels": "配置模型...",
+        "onlyVerifiedShown": "僅顯示已驗證的模型",
+        "showUnvalidatedModels": "顯示未驗證的模型",
+        "allModelsShown": "顯示所有模型（包括未驗證的）",
+        "unvalidatedModelWarning": "此模型尚未驗證",
+        "serverDefaultModel": "伺服器預設模型"
+    }
+}

lib/i18n/dictionaries/zh.json

@@ -28,7 +28,8 @@
         "azure": "Azure OpenAI",
         "openrouter": "OpenRouter",
         "deepseek": "DeepSeek",
-        "siliconflow": "SiliconFlow"
+        "siliconflow": "SiliconFlow",
+        "modelscope": "ModelScope"
     },
     "chat": {
         "placeholder": "描述您的图表或上传文件...",
@@ -51,7 +52,8 @@
         "badResponse": "无帮助",
         "clickToEdit": "点击编辑",
         "editMessage": "编辑消息",
-        "saveAndSubmit": "保存并提交"
+        "saveAndSubmit": "保存并提交",
+        "ExtractURL": "从 URL 提取"
     },
     "examples": {
         "title": "用 AI 创建图表",
@@ -75,6 +77,8 @@
     "settings": {
         "title": "设置",
         "description": "配置您的应用程序设置。",
+        "apiKeysModels": "API 密钥和模型",
+        "apiKeysModelsDescription": "配置 AI 提供商和 API 密钥。",
         "accessCode": "访问码",
         "accessCodePlaceholder": "输入访问码",
         "accessCodeDescription": "使用此应用程序需要访问码。",
@@ -98,14 +102,26 @@
         "switchTo": "切换到",
         "minimal": "简约",
         "sketch": "草图",
-        "closeProtection": "关闭确认",
-        "closeProtectionDescription": "离开页面时显示确认。",
         "diagramStyle": "图表样式",
         "diagramStyleDescription": "切换简约与精致图表输出模式。",
+        "sendShortcut": "发送快捷键",
+        "sendShortcutDescription": "选择发送消息的方式。",
+        "enterToSend": "回车发送",
+        "ctrlEnterToSend": "Cmd/Ctrl+回车发送",
         "diagramActions": "图表操作",
         "diagramActionsDescription": "管理图表历史记录和导出",
         "history": "历史记录",
-        "download": "下载"
+        "download": "下载",
+        "proxy": "代理设置",
+        "proxyDescription": "配置 API 请求的 HTTP/HTTPS 代理（仅桌面版）",
+        "httpProxy": "HTTP 代理",
+        "httpsProxy": "HTTPS 代理",
+        "applyProxy": "应用",
+        "proxyApplied": "代理设置已应用",
+        "diagramValidation": "图表验证（实验性）",
+        "diagramValidationDescription": "使用视觉语言模型验证生成的图表。需要支持视觉的模型，如 GPT-5.2 或 Sonnet-4.5。",
+        "enabled": "已启用",
+        "disabled": "已禁用"
     },
     "save": {
         "title": "保存图表",
@@ -186,6 +202,15 @@
         "chars": "字符",
         "removeFile": "移除文件"
     },
+    "url": {
+        "title": "从 URL 提取内容",
+        "description": "粘贴 URL 以提取和分析其内容",
+        "Extracting": "提取中...",
+        "extract": "提取",
+        "Cancel": "取消",
+        "enterUrl": "请输入 URL",
+        "invalidFormat": "URL 格式无效"
+    },
     "reasoning": {
         "thinking": "思考中...",
         "thoughtFor": "思考了 {duration} 秒",
@@ -229,6 +254,24 @@
         "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 提供商和模型",
@@ -261,6 +304,7 @@
         "enterSecretKey": "输入您的 Secret Key",
         "baseUrl": "基础 URL",
         "optional": "（可选）",
+        "baseUrlWithExample": "基础 URL（可选，例如 {example}）",
         "customEndpoint": "自定义端点 URL",
         "models": "模型",
         "customModelId": "自定义模型 ID...",
@@ -286,10 +330,13 @@
         "noModelsFound": "未找到模型。",
         "default": "默认",
         "serverDefault": "服务器默认",
+        "serverModels": "服务器模型",
+        "userModels": "用户模型",
         "configureModels": "配置模型...",
         "onlyVerifiedShown": "仅显示已验证的模型",
         "showUnvalidatedModels": "显示未验证的模型",
         "allModelsShown": "显示所有模型（包括未验证的）",
-        "unvalidatedModelWarning": "此模型尚未验证"
+        "unvalidatedModelWarning": "此模型尚未验证",
+        "serverDefaultModel": "服务器默认模型"
     }
 }

lib/server-model-config.ts

@@ -0,0 +1,151 @@
+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/ssrf-protection.ts

@@ -0,0 +1,63 @@
+/**
+ * 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

@@ -12,7 +12,6 @@ export const STORAGE_KEYS = {
 
     // Settings
     accessCode: "next-ai-draw-io-access-code",
-    closeProtection: "next-ai-draw-io-close-protection",
     accessCodeRequired: "next-ai-draw-io-access-code-required",
     aiProvider: "next-ai-draw-io-ai-provider",
     aiBaseUrl: "next-ai-draw-io-ai-base-url",
@@ -22,4 +21,10 @@ export const STORAGE_KEYS = {
     // Multi-model configuration
     modelConfigs: "next-ai-draw-io-model-configs",
     selectedModelId: "next-ai-draw-io-selected-model-id",
+
+    // Chat input preferences
+    sendShortcut: "next-ai-draw-io-send-shortcut",
+
+    // Diagram validation
+    vlmValidationEnabled: "next-ai-draw-io-vlm-validation-enabled",
 } as const

lib/system-prompts.ts

@@ -11,6 +11,7 @@ export const DEFAULT_SYSTEM_PROMPT = `
 You are an expert diagram creation assistant specializing in draw.io XML generation.
 Your primary function is chat with user and crafting clear, well-organized visual diagrams through precise XML specifications.
 You can see images that users upload, and you can read the text content extracted from PDF documents they upload.
+ALWAYS respond in the same language as the user's last message.
 
 When you are asked to create a diagram, briefly describe your plan about the layout and structure to avoid object overlapping or edge cross the objects. (2-3 sentences max), then use display_diagram tool to generate the XML.
 After generating or editing a diagram, you don't need to say anything. The user can see the diagram - no need to describe it.

lib/token-counter.ts

@@ -1,39 +0,0 @@
-/**
- * Token counting utilities using js-tiktoken
- *
- * Uses cl100k_base encoding (GPT-4) which is close to Claude's tokenization.
- * This is a pure JavaScript implementation, no WASM required.
- */
-
-import { encodingForModel } from "js-tiktoken"
-import { DEFAULT_SYSTEM_PROMPT, EXTENDED_SYSTEM_PROMPT } from "./system-prompts"
-
-const encoder = encodingForModel("gpt-4o")
-
-/**
- * Count the number of tokens in a text string
- * @param text - The text to count tokens for
- * @returns The number of tokens
- */
-export function countTextTokens(text: string): number {
-    return encoder.encode(text).length
-}
-
-/**
- * Get token counts for the system prompts
- * Useful for debugging and optimizing prompt sizes
- * @returns Object with token counts for default and extended prompts
- */
-export function getSystemPromptTokenCounts(): {
-    default: number
-    extended: number
-    additions: number
-} {
-    const defaultTokens = countTextTokens(DEFAULT_SYSTEM_PROMPT)
-    const extendedTokens = countTextTokens(EXTENDED_SYSTEM_PROMPT)
-    return {
-        default: defaultTokens,
-        extended: extendedTokens,
-        additions: extendedTokens - defaultTokens,
-    }
-}

lib/types/model-config.ts

@@ -4,8 +4,10 @@ export type ProviderName =
     | "openai"
     | "anthropic"
     | "google"
+    | "vertexai"
     | "azure"
     | "bedrock"
+    | "ollama"
     | "openrouter"
     | "deepseek"
     | "siliconflow"
@@ -13,6 +15,7 @@ export type ProviderName =
     | "gateway"
     | "edgeone"
     | "doubao"
+    | "modelscope"
 
 // Individual model configuration
 export interface ModelConfig {
@@ -34,6 +37,9 @@ 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
 }
@@ -48,7 +54,7 @@ export interface MultiModelConfig {
 
 // Flattened model for dropdown display
 export interface FlattenedModel {
-    id: string // Model config UUID
+    id: string // Model config UUID or synthetic server ID (e.g., "server:provider:modelId")
     modelId: string // Actual model ID
     provider: ProviderName
     providerLabel: string // Provider display name
@@ -59,7 +65,17 @@ 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
@@ -67,34 +83,61 @@ export const PROVIDER_INFO: Record<
     ProviderName,
     { label: string; defaultBaseUrl?: string }
 > = {
-    openai: { label: "OpenAI" },
+    openai: {
+        label: "OpenAI",
+        defaultBaseUrl: "https://api.openai.com/v1",
+    },
     anthropic: {
         label: "Anthropic",
         defaultBaseUrl: "https://api.anthropic.com/v1",
     },
-    google: { label: "Google" },
-    azure: { label: "Azure OpenAI" },
+    google: {
+        label: "Google",
+        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" },
-    openrouter: { label: "OpenRouter" },
-    deepseek: { label: "DeepSeek" },
+    ollama: {
+        label: "Ollama",
+        defaultBaseUrl: "http://localhost:11434",
+    },
+    openrouter: {
+        label: "OpenRouter",
+        defaultBaseUrl: "https://openrouter.ai/api/v1",
+    },
+    deepseek: {
+        label: "DeepSeek",
+        defaultBaseUrl: "https://api.deepseek.com/v1",
+    },
     siliconflow: {
         label: "SiliconFlow",
-        defaultBaseUrl: "https://api.siliconflow.com/v1",
+        defaultBaseUrl: "https://api.siliconflow.cn/v1",
     },
     sglang: {
         label: "SGLang",
         defaultBaseUrl: "http://127.0.0.1:8000/v1",
     },
-    gateway: { label: "AI Gateway" },
+    gateway: {
+        label: "AI Gateway",
+        defaultBaseUrl: "https://ai-gateway.vercel.sh/v1/ai",
+    },
     edgeone: { label: "EdgeOne Pages" },
     doubao: {
         label: "Doubao (ByteDance)",
         defaultBaseUrl: "https://ark.cn-beijing.volces.com/api/v3",
     },
+    modelscope: {
+        label: "ModelScope",
+        defaultBaseUrl: "https://api-inference.modelscope.cn/v1",
+    },
 }
 
 // Suggested models per provider for quick add
-export const SUGGESTED_MODELS: Record<ProviderName, string[]> = {
+export const SUGGESTED_MODELS: Partial<Record<ProviderName, string[]>> = {
     openai: [
         "gpt-5.2-pro",
         "gpt-5.2-chat-latest",
@@ -147,6 +190,17 @@ export const SUGGESTED_MODELS: 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
@@ -231,6 +285,17 @@ export const SUGGESTED_MODELS: Record<ProviderName, string[]> = {
         "doubao-pro-32k-241215",
         "doubao-pro-256k-241215",
     ],
+    modelscope: [
+        // Qwen
+        "Qwen/Qwen2.5-72B-Instruct",
+        "Qwen/Qwen2.5-32B-Instruct",
+        "Qwen/Qwen3-235B-A22B-Instruct-2507",
+        "Qwen/Qwen3-VL-235B-A22B-Instruct",
+        "Qwen/Qwen3-32B",
+        // DeepSeek
+        "deepseek-ai/DeepSeek-R1-0528",
+        "deepseek-ai/DeepSeek-V3.2",
+    ],
 }
 
 // Helper to generate UUID
@@ -267,7 +332,7 @@ export function createModelConfig(modelId: string): ModelConfig {
     }
 }
 
-// Get all models as flattened list for dropdown
+// Get all models as flattened list for dropdown (user-defined only)
 export function flattenModels(config: MultiModelConfig): FlattenedModel[] {
     const models: FlattenedModel[] = []
 
@@ -289,7 +354,12 @@ 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/url-utils.ts

@@ -0,0 +1,50 @@
+import { z } from "zod"
+import { getApiEndpoint } from "@/lib/base-path"
+
+export interface UrlData {
+    url: string
+    title: string
+    content: string
+    charCount: number
+    isExtracting: boolean
+}
+
+const UrlResponseSchema = z.object({
+    title: z.string().default("Untitled"),
+    content: z.string(),
+    charCount: z.number().int().nonnegative(),
+})
+
+export async function extractUrlContent(url: string): Promise<UrlData> {
+    const response = await fetch(getApiEndpoint("/api/parse-url"), {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ url }),
+    })
+
+    // Try to parse JSON once
+    const raw = await response
+        .json()
+        .catch(() => ({ error: "Unexpected non-JSON response" }))
+
+    if (!response.ok) {
+        const message =
+            typeof raw === "object" && raw && "error" in raw
+                ? String((raw as any).error)
+                : "Failed to extract URL content"
+        throw new Error(message)
+    }
+
+    const parsed = UrlResponseSchema.safeParse(raw)
+    if (!parsed.success) {
+        throw new Error("Malformed response from URL extraction API")
+    }
+
+    return {
+        url,
+        title: parsed.data.title,
+        content: parsed.data.content,
+        charCount: parsed.data.charCount,
+        isExtracting: false,
+    }
+}

lib/utils.ts

@@ -1,6 +1,9 @@
 import { type ClassValue, clsx } from "clsx"
 import * as pako from "pako"
 import { twMerge } from "tailwind-merge"
+import type { DiagramOperation } from "@/components/chat/types"
+
+export type { DiagramOperation }
 
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs))
@@ -473,12 +476,6 @@ export function replaceNodes(currentXML: string, nodes: string): string {
 // ID-based Diagram Operations
 // ============================================================================
 
-export interface DiagramOperation {
-    operation: "update" | "add" | "delete"
-    cell_id: string
-    new_xml?: string
-}
-
 export interface OperationError {
     type: "update" | "add" | "delete"
     cellId: string

lib/validation-prompts.ts

@@ -0,0 +1,22 @@
+/**
+ * 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

@@ -0,0 +1,38 @@
+/**
+ * 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.9",
+    "version": "0.4.12",
     "license": "Apache-2.0",
     "private": true,
     "main": "dist-electron/main/index.js",
@@ -24,8 +24,11 @@
         "dist": "npm run electron:build && npm run electron:prepare && npx electron-builder --config electron/electron-builder.yml",
         "dist:mac": "npm run electron:build && npm run electron:prepare && npx electron-builder --config electron/electron-builder.yml --mac",
         "dist:win": "npm run electron:build && npm run electron:prepare && npx electron-builder --config electron/electron-builder.yml --win",
+        "dist:win:build": "npm run electron:build && npm run electron:prepare && npx electron-builder --config electron/electron-builder.yml --win --publish never",
         "dist:linux": "npm run electron:build && npm run electron:prepare && npx electron-builder --config electron/electron-builder.yml --linux",
-        "dist:all": "npm run electron:build && npm run electron:prepare && npx electron-builder --config electron/electron-builder.yml --mac --win --linux"
+        "dist:all": "npm run electron:build && npm run electron:prepare && npx electron-builder --config electron/electron-builder.yml --mac --win --linux",
+        "test": "vitest",
+        "test:e2e": "playwright test"
     },
     "dependencies": {
         "@ai-sdk/amazon-bedrock": "^4.0.1",
@@ -34,18 +37,21 @@
         "@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",
         "@aws-sdk/credential-providers": "^3.943.0",
+        "@extractus/article-extractor": "^8.0.18",
         "@formatjs/intl-localematcher": "^0.7.2",
         "@langfuse/client": "^4.4.9",
         "@langfuse/otel": "^4.4.4",
         "@langfuse/tracing": "^4.4.9",
         "@next/third-parties": "^16.0.6",
-        "@opennextjs/cloudflare": "1.14.7",
+        "@opennextjs/cloudflare": "1.14.8",
         "@openrouter/ai-sdk-provider": "^1.5.4",
-        "@opentelemetry/exporter-trace-otlp-http": "^0.208.0",
+        "@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",
         "@radix-ui/react-collapsible": "^1.1.12",
@@ -65,11 +71,10 @@
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
         "idb": "^8.0.3",
-        "js-tiktoken": "^1.0.21",
-        "jsdom": "^27.0.0",
         "jsonrepair": "^3.13.1",
         "lucide-react": "^0.562.0",
         "motion": "^12.23.25",
+        "nanoid": "^5.0.0",
         "negotiator": "^1.0.0",
         "next": "^16.0.7",
         "ollama-ai-provider-v2": "^2.0.0",
@@ -86,6 +91,7 @@
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.0.2",
         "tailwindcss-animate": "^1.0.7",
+        "turndown": "^7.2.0",
         "unpdf": "^1.4.0",
         "zod": "^4.1.12"
     },
@@ -103,13 +109,20 @@
     "devDependencies": {
         "@anthropic-ai/tokenizer": "^0.0.4",
         "@biomejs/biome": "^2.3.10",
+        "@playwright/test": "^1.57.0",
         "@tailwindcss/postcss": "^4",
         "@tailwindcss/typography": "^0.5.19",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/react": "^16.3.1",
+        "@testing-library/user-event": "^14.6.1",
         "@types/negotiator": "^0.6.4",
         "@types/node": "^24.0.0",
         "@types/pako": "^2.0.3",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "@types/turndown": "^5.0.6",
+        "@vitejs/plugin-react": "^5.1.2",
+        "@vitest/coverage-v8": "^4.0.16",
         "concurrently": "^9.2.1",
         "cross-env": "^10.1.0",
         "electron": "^39.2.7",
@@ -118,12 +131,15 @@
         "eslint": "9.39.2",
         "eslint-config-next": "16.1.1",
         "husky": "^9.1.7",
+        "jsdom": "^27.4.0",
         "lint-staged": "^16.2.7",
         "shx": "^0.4.0",
         "tailwindcss": "^4",
         "typescript": "^5",
+        "vite-tsconfig-paths": "^6.0.3",
+        "vitest": "^4.0.16",
         "wait-on": "^9.0.3",
-        "wrangler": "4.54.0"
+        "wrangler": "^4.60.0"
     },
     "overrides": {
         "@openrouter/ai-sdk-provider": {

packages/claude-plugin/.claude-plugin/plugin.json

@@ -0,0 +1,11 @@
+{
+    "name": "next-ai-drawio",
+    "version": "1.0.0",
+    "description": "AI-powered Draw.io diagram generation with real-time browser preview. Create flowcharts, architecture diagrams, and more through natural language.",
+    "author": {
+        "name": "DayuanJiang"
+    },
+    "repository": "https://github.com/DayuanJiang/next-ai-draw-io",
+    "homepage": "https://next-ai-drawio.jiang.jp",
+    "license": "Apache-2.0"
+}

packages/claude-plugin/.mcp.json

@@ -0,0 +1,8 @@
+{
+    "mcpServers": {
+        "drawio": {
+            "command": "npx",
+            "args": ["@next-ai-drawio/mcp-server@latest"]
+        }
+    }
+}

packages/claude-plugin/README.md

@@ -0,0 +1,107 @@
+# Next AI Draw.io - Claude Code Plugin
+
+AI-powered Draw.io diagram generation with real-time browser preview for Claude Code.
+
+## Installation
+
+### From Plugin Directory (Coming Soon)
+
+Once approved, install via:
+```
+/plugin install next-ai-drawio
+```
+
+### Manual Installation
+
+```bash
+claude --plugin-dir /path/to/packages/claude-plugin
+```
+
+Or add the MCP server directly:
+```bash
+claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
+```
+
+## Features
+
+- **Real-time Preview**: Diagrams appear and update in your browser as Claude creates them
+- **Version History**: Restore previous diagram versions with visual thumbnails
+- **Natural Language**: Describe diagrams in plain text - flowcharts, architecture diagrams, etc.
+- **Edit Support**: Modify existing diagrams with natural language instructions
+- **Export**: Save diagrams as `.drawio` files
+- **Self-contained**: Embedded server, no external dependencies required
+
+## Use Case Examples
+
+### 1. Create Architecture Diagrams
+
+```
+Generate an AWS architecture diagram with Lambda, API Gateway, DynamoDB,
+and S3 for a serverless REST API
+```
+
+### 2. Flowchart Generation
+
+```
+Create a flowchart showing the CI/CD pipeline: code commit -> build ->
+test -> staging deploy -> production deploy with approval gates
+```
+
+### 3. System Design Documentation
+
+```
+Design a microservices e-commerce system with user service, product catalog,
+shopping cart, order processing, and payment gateway
+```
+
+### 4. Cloud Architecture (AWS/GCP/Azure)
+
+```
+Generate a GCP architecture diagram with Cloud Run, Cloud SQL, and
+Cloud Storage for a web application
+```
+
+### 5. Sequence Diagrams
+
+```
+Create a sequence diagram showing OAuth 2.0 authorization code flow
+between user, client app, auth server, and resource server
+```
+
+## Available Tools
+
+| Tool | Description |
+|------|-------------|
+| `start_session` | Opens browser with real-time diagram preview |
+| `create_new_diagram` | Create a new diagram from XML |
+| `edit_diagram` | Edit diagram by ID-based operations |
+| `get_diagram` | Get the current diagram XML |
+| `export_diagram` | Save diagram to a `.drawio` file |
+
+## How It Works
+
+```
+Claude Code <--stdio--> MCP Server <--http--> Browser (draw.io)
+```
+
+1. Ask Claude to create a diagram
+2. Claude calls `start_session` to open a browser window
+3. Claude generates diagram XML and sends it to the browser
+4. You see the diagram update in real-time!
+
+## Configuration
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `PORT` | `6002` | Port for the embedded HTTP server |
+| `DRAWIO_BASE_URL` | `https://embed.diagrams.net` | Base URL for draw.io (for self-hosted deployments) |
+
+## Links
+
+- [Homepage](https://next-ai-drawio.jiang.jp)
+- [GitHub Repository](https://github.com/DayuanJiang/next-ai-draw-io)
+- [MCP Server Documentation](https://github.com/DayuanJiang/next-ai-draw-io/tree/main/packages/mcp-server)
+
+## License
+
+Apache-2.0

packages/mcp-server/package-lock.json

@@ -1,18 +1,18 @@
 {
     "name": "@next-ai-drawio/mcp-server",
-    "version": "0.1.6",
+    "version": "0.1.12",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@next-ai-drawio/mcp-server",
-            "version": "0.1.6",
+            "version": "0.1.12",
             "license": "Apache-2.0",
             "dependencies": {
                 "@modelcontextprotocol/sdk": "^1.0.4",
                 "linkedom": "^0.18.0",
                 "open": "^11.0.0",
-                "zod": "^3.24.0"
+                "zod": "^4.0.0"
             },
             "bin": {
                 "next-ai-drawio-mcp": "dist/index.js"
@@ -481,9 +481,9 @@
             }
         },
         "node_modules/@modelcontextprotocol/sdk": {
-            "version": "1.25.1",
-            "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.25.1.tgz",
-            "integrity": "sha512-yO28oVFFC7EBoiKdAn+VqRm+plcfv4v0xp6osG/VsCB0NlPZWi87ajbCZZ8f/RvOFLEu7//rSRmuZZ7lMoe3gQ==",
+            "version": "1.25.2",
+            "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.25.2.tgz",
+            "integrity": "sha512-LZFeo4F9M5qOhC/Uc1aQSrBHxMrvxett+9KLHt7OhcExtoiRN9DKgbZffMP/nxjutWDQpfMDfP3nkHI4X9ijww==",
             "license": "MIT",
             "dependencies": {
                 "@hono/node-server": "^1.19.7",
@@ -520,9 +520,9 @@
             }
         },
         "node_modules/@types/node": {
-            "version": "24.10.4",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.4.tgz",
-            "integrity": "sha512-vnDVpYPMzs4wunl27jHrfmwojOGKya0xyM3sH+UE5iv5uPS6vX7UIoh6m+vQc5LGBq52HBKPIn/zcSZVzeDEZg==",
+            "version": "24.10.6",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.6.tgz",
+            "integrity": "sha512-B8h60xgJMR/xmgyX9fncRzEW9gCxoJjdenUhke2v1JGOd/V66KopmWrLPXi5oUI4VuiGK+d+HlXJjDRZMj21EQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -2051,9 +2051,9 @@
             }
         },
         "node_modules/zod": {
-            "version": "3.25.76",
-            "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
-            "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+            "version": "4.3.5",
+            "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.5.tgz",
+            "integrity": "sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g==",
             "license": "MIT",
             "peer": true,
             "funding": {

packages/mcp-server/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@next-ai-drawio/mcp-server",
-    "version": "0.1.11",
+    "version": "0.1.15",
     "description": "MCP server for Next AI Draw.io - AI-powered diagram generation with real-time browser preview",
     "type": "module",
     "main": "dist/index.js",
@@ -21,16 +21,16 @@
         "claude",
         "model-context-protocol"
     ],
-    "author": "Biki-dev",
+    "author": "DayuanJiang",
     "license": "Apache-2.0",
     "repository": {
         "type": "git",
-        "url": "https://github.com/Biki-dev/next-ai-draw-io",
+        "url": "https://github.com/DayuanJiang/next-ai-draw-io",
         "directory": "packages/mcp-server"
     },
     "homepage": "https://next-ai-drawio.jiang.jp",
     "bugs": {
-        "url": "https://github.com/Biki-dev/next-ai-draw-io/issues"
+        "url": "https://github.com/DayuanJiang/next-ai-draw-io/issues"
     },
     "publishConfig": {
         "access": "public"
@@ -39,7 +39,7 @@
         "@modelcontextprotocol/sdk": "^1.0.4",
         "linkedom": "^0.18.0",
         "open": "^11.0.0",
-        "zod": "^3.24.0"
+        "zod": "^4.0.0"
     },
     "devDependencies": {
         "@types/node": "^24.0.0",

packages/mcp-server/src/http-server.ts

@@ -44,6 +44,17 @@ 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
@@ -195,6 +206,17 @@ 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" })
@@ -375,85 +397,202 @@ function getHtmlPage(sessionId: string): string {
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Draw.io MCP</title>
+    <title>Next AI Draw.io</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: 8px 16px; background: #1a1a2e; color: #eee;
-            font-family: system-ui, sans-serif; font-size: 14px;
+            padding: 0 20px; height: 52px;
+            background: linear-gradient(to bottom, #ffffff, #fafbfc);
+            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;
         }
-        #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-btn {
-            position: fixed; bottom: 24px; right: 24px;
-            width: 48px; height: 48px; border-radius: 50%;
-            background: #3b82f6; color: white; border: none; cursor: pointer;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-            display: flex; align-items: center; justify-content: center;
-            z-index: 1000;
+            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:hover { background: #2563eb; }
-        #history-btn:disabled { background: #6b7280; cursor: not-allowed; }
-        #history-btn svg { width: 24px; height: 24px; }
-        #history-modal {
+        #history-btn svg { width: 14px; height: 14px; }
+        #history-btn:hover {
+            background: #e4e4e7; border-color: #d4d4d8;
+        }
+        #drawio { flex: 1; border: none; }
+        #history-modal, #save-modal {
             display: none; position: fixed; inset: 0;
-            background: rgba(0,0,0,0.5); z-index: 2000;
-            align-items: center; justify-content: center;
+            background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
+            z-index: 2000; align-items: center; justify-content: center;
         }
-        #history-modal.open { display: flex; }
+        #history-modal.open, #save-modal.open { display: flex; }
         .modal-content {
-            background: white; border-radius: 12px;
-            width: 90%; max-width: 500px; max-height: 70vh;
+            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;
         }
-        .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; }
+        @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 #e5e7eb; border-radius: 8px; padding: 8px;
-            cursor: pointer; text-align: center;
+            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: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;
+            aspect-ratio: 4/3; background: #f4f4f5; border-radius: 6px;
             display: flex; align-items: center; justify-content: center;
-            margin-bottom: 4px; overflow: hidden;
+            margin-bottom: 6px; overflow: hidden;
         }
         .history-item .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
-        .history-item .label { font-size: 12px; color: #666; }
-        .btn { padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; border: none; }
-        .btn-primary { background: #3b82f6; color: white; }
-        .btn-primary:disabled { background: #93c5fd; cursor: not-allowed; }
-        .btn-secondary { background: #f3f4f6; color: #374151; }
-        .empty { text-align: center; padding: 40px; color: #666; }
+        .history-item .label { font-size: 11px; color: #71717a; font-weight: 500; }
+        .btn {
+            padding: 9px 18px; border-radius: 8px; font-size: 13px;
+            cursor: pointer; border: none; font-weight: 500;
+            font-family: inherit; transition: all 0.15s ease;
+        }
+        .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>
-                <strong>Draw.io MCP</strong>
-                <span class="session">${sessionId ? `Session: ${sessionId}` : "No session"}</span>
+            <div class="brand">
+                <div class="logo">
+                    <svg viewBox="0 0 1536 1536" fill="#ffffff">
+                        <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"></iframe>
+        <iframe id="drawio" src="${normalizeUrl(DRAWIO_BASE_URL)}/?embed=1&proto=json&spin=1&libraries=1&noSaveBtn=1&noExitBtn=1&saveAndExit=0"></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>
@@ -467,10 +606,35 @@ 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;
@@ -481,8 +645,6 @@ 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
@@ -491,6 +653,23 @@ 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;
@@ -563,6 +742,64 @@ 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,6 +260,7 @@ COMMON STYLES:
             // Update session state
             currentSession.xml = xml
             currentSession.version++
+            currentSession.lastGetDiagramTime = Date.now()
 
             // Push to embedded server state
             setState(currentSession.id, xml)

playwright.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from "@playwright/test"
+
+export default defineConfig({
+    testDir: "./tests/e2e",
+    fullyParallel: true,
+    forbidOnly: !!process.env.CI,
+    retries: process.env.CI ? 2 : 0,
+    workers: process.env.CI ? 1 : undefined,
+    reporter: process.env.CI ? [["list"], ["html"]] : "html",
+    webServer: {
+        command: process.env.CI ? "npm run start" : "npm run dev",
+        port: process.env.CI ? 6001 : 6002,
+        reuseExistingServer: !process.env.CI,
+        timeout: 120 * 1000,
+    },
+    use: {
+        baseURL: process.env.CI
+            ? "http://localhost:6001"
+            : "http://localhost:6002",
+        trace: "on-first-retry",
+    },
+    projects: [
+        {
+            name: "chromium",
+            use: { browserName: "chromium" },
+        },
+    ],
+})

proxy.ts

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

scripts/afterPack.cjs

@@ -1,10 +1,52 @@
 /**
  * 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 { cpSync, existsSync } = require("fs")
+const {
+    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
@@ -25,7 +67,7 @@ module.exports = async (context) => {
     console.log(`[afterPack] Copying node_modules to ${targetNodeModules}`)
 
     if (existsSync(sourceNodeModules) && existsSync(standaloneDir)) {
-        cpSync(sourceNodeModules, targetNodeModules, { recursive: true })
+        copyDereferenced(sourceNodeModules, targetNodeModules)
         console.log("[afterPack] node_modules copied successfully")
     } else {
         console.error("[afterPack] Source or target directory not found!")
@@ -40,4 +82,22 @@ 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,13 +6,54 @@
  * that electron-builder can properly include
  */
 
-import { cpSync, existsSync, mkdirSync, rmSync } from "node:fs"
+import {
+    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")
@@ -30,12 +71,19 @@ mkdirSync(targetDir, { recursive: true })
 
 // Copy standalone (includes node_modules)
 console.log("Copying standalone directory...")
-cpSync(standaloneDir, targetDir, { recursive: true })
+copyDereferenced(standaloneDir, targetDir)
 
 // Copy static files
 console.log("Copying static files...")
 const targetStaticDir = join(targetDir, ".next", "static")
-mkdirSync(targetStaticDir, { recursive: true })
-cpSync(staticDir, targetStaticDir, { recursive: true })
+copyDereferenced(staticDir, targetStaticDir)
+
+// 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)
+}
 
 console.log("Done! Files prepared in electron-standalone/")

tests/e2e/chat.spec.ts

@@ -0,0 +1,22 @@
+import { expect, getIframe, test } from "./lib/fixtures"
+
+test.describe("Chat Panel", () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto("/", { waitUntil: "networkidle" })
+        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+    })
+
+    test("page has interactive elements", async ({ page }) => {
+        const buttons = page.locator("button")
+        const count = await buttons.count()
+        expect(count).toBeGreaterThan(0)
+    })
+
+    test("draw.io iframe is interactive", async ({ page }) => {
+        const iframe = getIframe(page)
+        await expect(iframe).toBeVisible()
+
+        const src = await iframe.getAttribute("src")
+        expect(src).toBeTruthy()
+    })
+})

tests/e2e/copy-paste.spec.ts

@@ -0,0 +1,137 @@
+import { SINGLE_BOX_XML } from "./fixtures/diagrams"
+import {
+    expect,
+    getChatInput,
+    getIframe,
+    sendMessage,
+    test,
+} from "./lib/fixtures"
+import { createMockSSEResponse } from "./lib/helpers"
+
+test.describe("Copy/Paste Functionality", () => {
+    test("can paste text into chat input", async ({ page }) => {
+        await page.goto("/", { waitUntil: "networkidle" })
+        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+
+        const chatInput = getChatInput(page)
+        await expect(chatInput).toBeVisible({ timeout: 10000 })
+
+        await chatInput.focus()
+        await page.keyboard.insertText("Create a flowchart diagram")
+
+        await expect(chatInput).toHaveValue("Create a flowchart diagram")
+    })
+
+    test("can paste multiline text into chat input", async ({ page }) => {
+        await page.goto("/", { waitUntil: "networkidle" })
+        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+
+        const chatInput = getChatInput(page)
+        await expect(chatInput).toBeVisible({ timeout: 10000 })
+
+        await chatInput.focus()
+        const multilineText = "Line 1\nLine 2\nLine 3"
+        await page.keyboard.insertText(multilineText)
+
+        await expect(chatInput).toHaveValue(multilineText)
+    })
+
+    test("copy button copies response text", async ({ page }) => {
+        await page.route("**/api/chat", async (route) => {
+            await route.fulfill({
+                status: 200,
+                contentType: "text/event-stream",
+                body: createMockSSEResponse(
+                    SINGLE_BOX_XML,
+                    "Here is your diagram with a test box.",
+                ),
+            })
+        })
+
+        await page.goto("/", { waitUntil: "networkidle" })
+        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+
+        await sendMessage(page, "Create a test box")
+
+        // Wait for response
+        await expect(
+            page.locator('text="Here is your diagram with a test box."'),
+        ).toBeVisible({ timeout: 15000 })
+
+        // Find copy button in message
+        const copyButton = page.locator(
+            '[data-testid="copy-button"], button[aria-label*="Copy"], button:has(svg.lucide-copy), button:has(svg.lucide-clipboard)',
+        )
+
+        // Copy button feature may not exist - skip if not available
+        const buttonCount = await copyButton.count()
+        if (buttonCount === 0) {
+            test.skip()
+            return
+        }
+
+        await copyButton.first().click()
+        await expect(
+            page.locator('text="Copied"').or(page.locator("svg.lucide-check")),
+        ).toBeVisible({ timeout: 3000 })
+    })
+
+    test("keyboard shortcuts work in chat input", async ({ page }) => {
+        await page.goto("/", { waitUntil: "networkidle" })
+        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+
+        const chatInput = getChatInput(page)
+        await expect(chatInput).toBeVisible({ timeout: 10000 })
+
+        await chatInput.fill("Hello world")
+        await chatInput.press("ControlOrMeta+a")
+        await chatInput.fill("New text")
+
+        await expect(chatInput).toHaveValue("New text")
+    })
+
+    test("can undo/redo in chat input", async ({ page }) => {
+        await page.goto("/", { waitUntil: "networkidle" })
+        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+
+        const chatInput = getChatInput(page)
+        await expect(chatInput).toBeVisible({ timeout: 10000 })
+
+        await chatInput.fill("First text")
+        await chatInput.press("Tab")
+
+        await chatInput.focus()
+        await chatInput.fill("Second text")
+        await chatInput.press("ControlOrMeta+z")
+
+        // Verify page is still functional after undo
+        await expect(chatInput).toBeVisible()
+    })
+
+    test("chat input handles special characters", async ({ page }) => {
+        await page.goto("/", { waitUntil: "networkidle" })
+        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+
+        const chatInput = getChatInput(page)
+        await expect(chatInput).toBeVisible({ timeout: 10000 })
+
+        const specialText = "Test <>&\"' special chars 日本語 中文 🎉"
+        await chatInput.fill(specialText)
+
+        await expect(chatInput).toHaveValue(specialText)
+    })
+
+    test("long text in chat input scrolls", async ({ page }) => {
+        await page.goto("/", { waitUntil: "networkidle" })
+        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+
+        const chatInput = getChatInput(page)
+        await expect(chatInput).toBeVisible({ timeout: 10000 })
+
+        const longText = "This is a very long text. ".repeat(50)
+        await chatInput.fill(longText)
+
+        const value = await chatInput.inputValue()
+        expect(value.length).toBeGreaterThan(500)
+    })
+})

tests/e2e/diagram-generation.spec.ts

@@ -0,0 +1,128 @@
+import {
+    CAT_DIAGRAM_XML,
+    FLOWCHART_XML,
+    NEW_NODE_XML,
+} from "./fixtures/diagrams"
+import {
+    createMultiTurnMock,
+    expect,
+    getChatInput,
+    sendMessage,
+    test,
+    waitForComplete,
+    waitForCompleteCount,
+} from "./lib/fixtures"
+import { createMockSSEResponse } from "./lib/helpers"
+
+test.describe("Diagram Generation", () => {
+    test.beforeEach(async ({ page }) => {
+        await page.route("**/api/chat", async (route) => {
+            await route.fulfill({
+                status: 200,
+                contentType: "text/event-stream",
+                body: createMockSSEResponse(
+                    CAT_DIAGRAM_XML,
+                    "I'll create a diagram for you.",
+                ),
+            })
+        })
+
+        await page.goto("/", { waitUntil: "networkidle" })
+        await page
+            .locator("iframe")
+            .waitFor({ state: "visible", timeout: 30000 })
+    })
+
+    test("generates and displays a diagram", async ({ page }) => {
+        await sendMessage(page, "Draw a cat")
+        await expect(page.locator('text="Generate Diagram"')).toBeVisible({
+            timeout: 15000,
+        })
+        await waitForComplete(page)
+    })
+
+    test("chat input clears after sending", async ({ page }) => {
+        const chatInput = getChatInput(page)
+        await expect(chatInput).toBeVisible({ timeout: 10000 })
+
+        await chatInput.fill("Draw a cat")
+        await chatInput.press("ControlOrMeta+Enter")
+
+        await expect(chatInput).toHaveValue("", { timeout: 5000 })
+    })
+
+    test("user message appears in chat", async ({ page }) => {
+        await sendMessage(page, "Draw a cute cat")
+        await expect(page.locator('text="Draw a cute cat"')).toBeVisible({
+            timeout: 10000,
+        })
+    })
+
+    test("assistant text message appears in chat", async ({ page }) => {
+        await sendMessage(page, "Draw a cat")
+        await expect(
+            page.locator('text="I\'ll create a diagram for you."'),
+        ).toBeVisible({ timeout: 10000 })
+    })
+})
+
+test.describe("Diagram Edit", () => {
+    test.beforeEach(async ({ page }) => {
+        await page.route(
+            "**/api/chat",
+            createMultiTurnMock([
+                { xml: FLOWCHART_XML, text: "I'll create a diagram for you." },
+                {
+                    xml: FLOWCHART_XML.replace("Process", "Updated Process"),
+                    text: "I'll create a diagram for you.",
+                },
+            ]),
+        )
+
+        await page.goto("/", { waitUntil: "networkidle" })
+        await page
+            .locator("iframe")
+            .waitFor({ state: "visible", timeout: 30000 })
+    })
+
+    test("can edit an existing diagram", async ({ page }) => {
+        // First: create initial diagram
+        await sendMessage(page, "Create a flowchart")
+        await waitForComplete(page)
+
+        // Second: edit the diagram
+        await sendMessage(page, "Change Process to Updated Process")
+        await waitForCompleteCount(page, 2)
+    })
+})
+
+test.describe("Diagram Append", () => {
+    test.beforeEach(async ({ page }) => {
+        await page.route(
+            "**/api/chat",
+            createMultiTurnMock([
+                { xml: FLOWCHART_XML, text: "I'll create a diagram for you." },
+                {
+                    xml: NEW_NODE_XML,
+                    text: "I'll create a diagram for you.",
+                    toolName: "append_diagram",
+                },
+            ]),
+        )
+
+        await page.goto("/", { waitUntil: "networkidle" })
+        await page
+            .locator("iframe")
+            .waitFor({ state: "visible", timeout: 30000 })
+    })
+
+    test("can append to an existing diagram", async ({ page }) => {
+        // First: create initial diagram
+        await sendMessage(page, "Create a flowchart")
+        await waitForComplete(page)
+
+        // Second: append to diagram
+        await sendMessage(page, "Add a new node to the right")
+        await waitForCompleteCount(page, 2)
+    })
+})

tests/e2e/error-handling.spec.ts

@@ -0,0 +1,136 @@
+import { TRUNCATED_XML } from "./fixtures/diagrams"
+import {
+    createErrorMock,
+    expect,
+    getChatInput,
+    getIframe,
+    sendMessage,
+    test,
+} from "./lib/fixtures"
+
+test.describe("Error Handling", () => {
+    test("displays error message when API returns 500", async ({ page }) => {
+        await page.route(
+            "**/api/chat",
+            createErrorMock(500, "Internal server error"),
+        )
+
+        await page.goto("/", { waitUntil: "networkidle" })
+        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+
+        await sendMessage(page, "Draw a cat")
+
+        // Should show error indication
+        const errorIndicator = page
+            .locator('[role="alert"]')
+            .or(page.locator("[data-sonner-toast]"))
+            .or(page.locator("text=/error|failed|something went wrong/i"))
+        await expect(errorIndicator.first()).toBeVisible({ timeout: 10000 })
+
+        // User should be able to type again
+        const chatInput = getChatInput(page)
+        await chatInput.fill("Retry message")
+        await expect(chatInput).toHaveValue("Retry message")
+    })
+
+    test("displays error message when API returns 429 rate limit", async ({
+        page,
+    }) => {
+        await page.route(
+            "**/api/chat",
+            createErrorMock(429, "Rate limit exceeded"),
+        )
+
+        await page.goto("/", { waitUntil: "networkidle" })
+        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+
+        await sendMessage(page, "Draw a cat")
+
+        // Should show error indication for rate limit
+        const errorIndicator = page
+            .locator('[role="alert"]')
+            .or(page.locator("[data-sonner-toast]"))
+            .or(page.locator("text=/rate limit|too many|try again/i"))
+        await expect(errorIndicator.first()).toBeVisible({ timeout: 10000 })
+
+        // User should be able to type again
+        const chatInput = getChatInput(page)
+        await chatInput.fill("Retry after rate limit")
+        await expect(chatInput).toHaveValue("Retry after rate limit")
+    })
+
+    test("handles network timeout gracefully", async ({ page }) => {
+        await page.route("**/api/chat", async (route) => {
+            await new Promise((resolve) => setTimeout(resolve, 2000))
+            await route.abort("timedout")
+        })
+
+        await page.goto("/", { waitUntil: "networkidle" })
+        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+
+        await sendMessage(page, "Draw a cat")
+
+        // Should show error indication for network failure
+        const errorIndicator = page
+            .locator('[role="alert"]')
+            .or(page.locator("[data-sonner-toast]"))
+            .or(page.locator("text=/error|failed|network|timeout/i"))
+        await expect(errorIndicator.first()).toBeVisible({ timeout: 10000 })
+
+        // After timeout, user should be able to type again
+        const chatInput = getChatInput(page)
+        await chatInput.fill("Try again after timeout")
+        await expect(chatInput).toHaveValue("Try again after timeout")
+    })
+
+    test("shows truncated badge for incomplete XML", async ({ page }) => {
+        const toolCallId = `call_${Date.now()}`
+        const textId = `text_${Date.now()}`
+        const messageId = `msg_${Date.now()}`
+
+        const events = [
+            { type: "start", messageId },
+            { type: "text-start", id: textId },
+            { type: "text-delta", id: textId, delta: "Creating diagram..." },
+            { type: "text-end", id: textId },
+            {
+                type: "tool-input-start",
+                toolCallId,
+                toolName: "display_diagram",
+            },
+            {
+                type: "tool-input-available",
+                toolCallId,
+                toolName: "display_diagram",
+                input: { xml: TRUNCATED_XML },
+            },
+            {
+                type: "tool-output-error",
+                toolCallId,
+                error: "XML validation failed",
+            },
+            { type: "finish" },
+        ]
+
+        await page.route("**/api/chat", async (route) => {
+            await route.fulfill({
+                status: 200,
+                contentType: "text/event-stream",
+                body:
+                    events
+                        .map((e) => `data: ${JSON.stringify(e)}\n\n`)
+                        .join("") + "data: [DONE]\n\n",
+            })
+        })
+
+        await page.goto("/", { waitUntil: "networkidle" })
+        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+
+        await sendMessage(page, "Draw something")
+
+        // Should show truncated badge
+        await expect(page.locator('text="Truncated"')).toBeVisible({
+            timeout: 15000,
+        })
+    })
+})

tests/e2e/file-upload.spec.ts

@@ -0,0 +1,152 @@
+import { SINGLE_BOX_XML } from "./fixtures/diagrams"
+import {
+    expect,
+    getChatInput,
+    getIframe,
+    sendMessage,
+    test,
+} from "./lib/fixtures"
+import { createMockSSEResponse } from "./lib/helpers"
+
+test.describe("File Upload", () => {
+    test("upload button opens file picker", async ({ page }) => {
+        await page.goto("/", { waitUntil: "networkidle" })
+        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+
+        const uploadButton = page.locator(
+            'button[aria-label="Upload file"], button:has(svg.lucide-image)',
+        )
+        await expect(uploadButton.first()).toBeVisible({ timeout: 10000 })
+        await expect(uploadButton.first()).toBeEnabled()
+    })
+
+    test("shows file preview after selecting image", async ({ page }) => {
+        await page.goto("/", { waitUntil: "networkidle" })
+        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+
+        const fileInput = page.locator('input[type="file"]')
+
+        await fileInput.setInputFiles({
+            name: "test-image.png",
+            mimeType: "image/png",
+            buffer: Buffer.from(
+                "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==",
+                "base64",
+            ),
+        })
+
+        await expect(
+            page.locator('[role="alert"][data-type="error"]'),
+        ).not.toBeVisible({ timeout: 2000 })
+    })
+
+    test("can remove uploaded file", async ({ page }) => {
+        await page.goto("/", { waitUntil: "networkidle" })
+        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+
+        const fileInput = page.locator('input[type="file"]')
+
+        await fileInput.setInputFiles({
+            name: "test-image.png",
+            mimeType: "image/png",
+            buffer: Buffer.from(
+                "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==",
+                "base64",
+            ),
+        })
+
+        await expect(
+            page.locator('[role="alert"][data-type="error"]'),
+        ).not.toBeVisible({ timeout: 2000 })
+
+        const removeButton = page.locator(
+            '[data-testid="remove-file-button"], button[aria-label*="Remove"], button:has(svg.lucide-x)',
+        )
+
+        const removeButtonCount = await removeButton.count()
+        if (removeButtonCount === 0) {
+            test.skip()
+            return
+        }
+
+        await removeButton.first().click()
+        await expect(removeButton.first()).not.toBeVisible({ timeout: 2000 })
+    })
+
+    test("sends file with message to API", async ({ page }) => {
+        let capturedRequest: any = null
+
+        await page.route("**/api/chat", async (route) => {
+            capturedRequest = route.request()
+            await route.fulfill({
+                status: 200,
+                contentType: "text/event-stream",
+                body: createMockSSEResponse(
+                    SINGLE_BOX_XML,
+                    "Based on your image, here is a diagram:",
+                ),
+            })
+        })
+
+        await page.goto("/", { waitUntil: "networkidle" })
+        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+
+        const fileInput = page.locator('input[type="file"]')
+
+        await fileInput.setInputFiles({
+            name: "architecture.png",
+            mimeType: "image/png",
+            buffer: Buffer.from(
+                "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==",
+                "base64",
+            ),
+        })
+
+        await sendMessage(page, "Convert this to a diagram")
+
+        await expect(
+            page.locator('text="Based on your image, here is a diagram:"'),
+        ).toBeVisible({ timeout: 15000 })
+
+        expect(capturedRequest).not.toBeNull()
+    })
+
+    test("shows error for oversized file", async ({ page }) => {
+        await page.goto("/", { waitUntil: "networkidle" })
+        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+
+        const fileInput = page.locator('input[type="file"]')
+        const largeBuffer = Buffer.alloc(3 * 1024 * 1024, "x")
+
+        await fileInput.setInputFiles({
+            name: "large-image.png",
+            mimeType: "image/png",
+            buffer: largeBuffer,
+        })
+
+        await expect(
+            page.locator('[role="alert"], [data-sonner-toast]').first(),
+        ).toBeVisible({ timeout: 5000 })
+    })
+
+    test("drag and drop file upload works", async ({ page }) => {
+        await page.goto("/", { waitUntil: "networkidle" })
+        await getIframe(page).waitFor({ state: "visible", timeout: 30000 })
+
+        const chatForm = page.locator("form").first()
+
+        const dataTransfer = await page.evaluateHandle(() => {
+            const dt = new DataTransfer()
+            const file = new File(["test content"], "dropped-image.png", {
+                type: "image/png",
+            })
+            dt.items.add(file)
+            return dt
+        })
+
+        await chatForm.dispatchEvent("dragover", { dataTransfer })
+        await chatForm.dispatchEvent("drop", { dataTransfer })
+
+        await expect(getChatInput(page)).toBeVisible({ timeout: 3000 })
+    })
+})