fix(deps): update dependency zod to v4

Some models (Kimi K2, DeepSeek, Qwen text models) don't support image/vision
input. The AI SDK silently drops unsupported image parts, causing confusing
responses where the model acts as if no image was uploaded.

Added supportsImageInput() function to detect unsupported models by name,
and return a 400 error with clear guidance when users try to upload images
to these models.

Closes #469

.github/ISSUE_TEMPLATE/enhancement.md

@@ -0,0 +1,24 @@
+---
+name: Enhancement
+about: Suggest an improvement to existing functionality
+title: '[Enhancement] '
+labels: enhancement
+assignees: ''
+---
+
+> **Note**: This template is just a guide. Feel free to ignore the format entirely - any feedback is welcome! Don't let the template stop you from sharing your ideas.
+
+## Current Behavior
+Describe how the feature currently works.
+
+## Proposed Enhancement
+How you'd like this to be improved.
+
+## Motivation
+Why this enhancement would be beneficial.
+
+## Screenshots / Mockups
+If applicable, add screenshots or mockups to illustrate the proposed changes.
+
+## Additional Context
+Any other information about the enhancement request.

.github/renovate.json

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

.github/workflows/auto-format.yml

@@ -0,0 +1,54 @@
+name: Auto Format
+
+on:
+  pull_request:
+    types: [opened, synchronize]
+
+permissions:
+  contents: write
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: '24'
+
+      - name: Run Biome format
+        run: npx @biomejs/biome@latest check --write --no-errors-on-unmatched .
+
+      - name: Check for changes
+        id: changes
+        run: |
+          if git diff --quiet; then
+            echo "has_changes=false" >> $GITHUB_OUTPUT
+          else
+            echo "has_changes=true" >> $GITHUB_OUTPUT
+          fi
+
+      # For fork PRs, just fail if formatting is needed (can't push to forks)
+      - name: Fail if fork PR needs formatting
+        if: steps.changes.outputs.has_changes == 'true' && github.event.pull_request.head.repo.full_name != github.repository
+        run: |
+          echo "::error::This PR has formatting issues. Please run 'npx @biomejs/biome check --write .' locally and push the changes."
+          git diff --stat
+          exit 1
+
+      # For same-repo PRs, commit and push the changes
+      - name: Commit changes
+        if: steps.changes.outputs.has_changes == 'true' && github.event.pull_request.head.repo.full_name == github.repository
+        run: |
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git remote set-url origin https://x-access-token:${{ secrets.GITHUB_TOKEN }}@github.com/${{ github.repository }}
+          git add .
+          git commit -m "style: auto-format with Biome"
+          git push origin HEAD:${{ github.head_ref }}

.github/workflows/ci.yml

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

.github/workflows/docker-build.yml

@@ -26,7 +26,7 @@ jobs:
       
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
@@ -54,7 +54,7 @@ jobs:
             type=raw,value=latest,enable={{is_default_branch}}
 
       - name: Build and push Docker image
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           context: .
           push: ${{ github.event_name != 'pull_request' }}
@@ -63,4 +63,30 @@ jobs:
           cache-from: type=gha
           cache-to: type=gha,mode=max
           platforms: linux/amd64,linux/arm64
+          build-args: |
+            NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE=true
+
+      # Push to AWS ECR for App Runner auto-deploy
+      - name: Configure AWS credentials
+        if: github.event_name != 'pull_request' && github.ref == 'refs/heads/main'
+        uses: aws-actions/configure-aws-credentials@v5
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ap-northeast-1
+
+      - name: Login to Amazon ECR
+        if: github.event_name != 'pull_request' && github.ref == 'refs/heads/main'
+        id: login-ecr
+        uses: aws-actions/amazon-ecr-login@v2
+
+      - name: Push to ECR (triggers App Runner auto-deploy)
+        if: github.event_name != 'pull_request' && github.ref == 'refs/heads/main'
+        env:
+          REPO_LOWER: ${{ github.repository }}
+        run: |
+          REPO_LOWER=$(echo "$REPO_LOWER" | tr '[:upper:]' '[:lower:]')
+          docker pull ghcr.io/${REPO_LOWER}:latest
+          docker tag ghcr.io/${REPO_LOWER}:latest ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.ap-northeast-1.amazonaws.com/next-ai-draw-io:latest
+          docker push ${{ secrets.AWS_ACCOUNT_ID }}.dkr.ecr.ap-northeast-1.amazonaws.com/next-ai-draw-io:latest
 

.github/workflows/electron-release.yml

@@ -0,0 +1,46 @@
+name: Electron Release
+
+on:
+  push:
+    tags:
+      - "v*"
+  workflow_dispatch:
+    inputs:
+      version:
+        description: "Version tag (e.g., v0.4.5)"
+        required: false
+
+jobs:
+  build:
+    permissions:
+      contents: write
+    strategy:
+      fail-fast: false
+      matrix:
+        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
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build and publish Electron app
+        run: npm run dist:${{ matrix.platform }}
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -2,6 +2,8 @@
 
 # dependencies
 /node_modules
+packages/*/node_modules
+packages/*/dist
 /.pnp
 .pnp.*
 .yarn/*
@@ -46,3 +48,21 @@ push-via-ec2.sh
 .dev.vars
 .open-next/
 .wrangler/
+.env*.local
+
+# Electron
+/dist-electron/
+/release/
+/electron-standalone/
+*.dmg
+*.exe
+*.AppImage
+*.deb
+*.rpm
+*.snap
+
+CLAUDE.md
+.spec-workflow
+
+# edgeone
+.edgeone

Dockerfile

@@ -1,7 +1,7 @@
 # Multi-stage Dockerfile for Next.js
 
 # Stage 1: Install dependencies
-FROM node:20-alpine AS deps
+FROM node:24-alpine AS deps
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
 
@@ -9,10 +9,10 @@ WORKDIR /app
 COPY package.json package-lock.json* ./
 
 # Install dependencies
-RUN npm ci
+RUN npm install
 
 # Stage 2: Build application
-FROM node:20-alpine AS builder
+FROM node:24-alpine AS builder
 WORKDIR /app
 
 # Copy node_modules from deps stage
@@ -26,11 +26,15 @@ ENV NEXT_TELEMETRY_DISABLED=1
 ARG NEXT_PUBLIC_DRAWIO_BASE_URL=https://embed.diagrams.net
 ENV NEXT_PUBLIC_DRAWIO_BASE_URL=${NEXT_PUBLIC_DRAWIO_BASE_URL}
 
+# Build-time argument to show About link and Notice icon
+ARG NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE=false
+ENV NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE=${NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE}
+
 # Build Next.js application (standalone mode)
 RUN npm run build
 
 # Stage 3: Production runtime
-FROM node:20-alpine AS runner
+FROM node:24-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV=production
@@ -54,6 +58,6 @@ EXPOSE 3000
 ENV PORT=3000
 ENV HOSTNAME="0.0.0.0"
 
-# Start the application
+# Start the application (HOSTNAME override needed for AWS App Runner)
-CMD ["node", "server.js"]
+CMD ["sh", "-c", "HOSTNAME=0.0.0.0 exec node server.js"]
 

README.md

@@ -4,7 +4,7 @@
 
 **AI-Powered Diagram Creation Tool - Chat, Draw, Visualize**
 
-English | [中文](./docs/README_CN.md) | [日本語](./docs/README_JA.md)
+English | [中文](./docs/cn/README_CN.md) | [日本語](./docs/ja/README_JA.md)
 
 [![TrendShift](https://trendshift.io/api/badge/repositories/15449)](https://next-ai-drawio.jiang.jp/)
 
@@ -19,6 +19,7 @@ English | [中文](./docs/README_CN.md) | [日本語](./docs/README_JA.md)
 
 A Next.js web application that integrates AI capabilities with draw.io diagrams. Create, modify, and enhance diagrams through natural language commands and AI-assisted visualization.
 
+> Note: Thanks to <img src="https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/public/doubao-color.png" alt="" height="20" /> [ByteDance Doubao](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project) sponsorship, the demo site now uses the powerful K2-thinking model!
 
 
 https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
@@ -26,18 +27,23 @@ https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
 
 
 ## Table of Contents
-- [Next AI Draw.io ](#next-ai-drawio-)
+- [Next AI Draw.io](#next-ai-drawio)
   - [Table of Contents](#table-of-contents)
   - [Examples](#examples)
   - [Features](#features)
+  - [MCP Server (Preview)](#mcp-server-preview)
+    - [Claude Code CLI](#claude-code-cli)
   - [Getting Started](#getting-started)
     - [Try it Online](#try-it-online)
-    - [Run with Docker (Recommended)](#run-with-docker-recommended)
+    - [Desktop Application](#desktop-application)
+    - [Run with Docker](#run-with-docker)
     - [Installation](#installation)
   - [Deployment](#deployment)
+    - [Deploy to EdgeOne Pages](#deploy-to-edgeone-pages)
+    - [Deploy on Vercel (Recommended)](#deploy-on-vercel-recommended)
+    - [Deploy on Cloudflare Workers](#deploy-on-cloudflare-workers)
   - [Multi-Provider Support](#multi-provider-support)
   - [How It Works](#how-it-works)
-  - [Project Structure](#project-structure)
   - [Support \& Contact](#support--contact)
   - [Star History](#star-history)
 
@@ -92,6 +98,36 @@ Here are some example prompts and their generated diagrams:
 -   **Cloud Architecture Diagram Support**: Specialized support for generating cloud architecture diagrams (AWS, GCP, Azure)
 -   **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization
 
+## MCP Server (Preview)
+
+> **Preview Feature**: This feature is experimental and may not be stable.
+
+Use Next AI Draw.io with AI agents like Claude Desktop, Cursor, and VS Code via MCP (Model Context Protocol).
+
+```json
+{
+  "mcpServers": {
+    "drawio": {
+      "command": "npx",
+      "args": ["@next-ai-drawio/mcp-server@latest"]
+    }
+  }
+}
+```
+
+### Claude Code CLI
+
+```bash
+claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
+```
+
+Then ask Claude to create diagrams:
+> "Create a flowchart showing user authentication with login, MFA, and session management"
+
+The diagram appears in your browser in real-time!
+
+See the [MCP Server README](./packages/mcp-server/README.md) for VS Code, Cursor, and other client configurations.
+
 ## Getting Started
 
 ### Try it Online
@@ -100,39 +136,19 @@ No installation needed! Try the app directly on our demo site:
 
 [![Live Demo](./public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/)
 
-> Note: Due to high traffic, the demo site currently uses minimax-m2. For best results, we recommend self-hosting with Claude Sonnet 4.5 or Claude Opus 4.5.
+
 
 > **Bring Your Own API Key**: You can use your own API key to bypass usage limits on the demo site. Click the Settings icon in the chat panel to configure your provider and API key. Your key is stored locally in your browser and is never stored on the server.
 
-### Run with Docker (Recommended)
+### Desktop Application
 
-If you just want to run it locally, the best way is to use Docker.
+Download the native desktop app for your platform from the [Releases page](https://github.com/DayuanJiang/next-ai-draw-io/releases):
 
-First, install Docker if you haven't already: [Get Docker](https://docs.docker.com/get-docker/)
+Supported platforms: Windows, macOS, Linux.
 
-Then run:
+### Run with Docker
 
-```bash
+[Go to Docker Guide](./docs/en/docker.md)
-docker run -d -p 3000:3000 \
-  -e AI_PROVIDER=openai \
-  -e AI_MODEL=gpt-4o \
-  -e OPENAI_API_KEY=your_api_key \
-  ghcr.io/dayuanjiang/next-ai-draw-io:latest
-```
-
-Or use an env file:
-
-```bash
-cp env.example .env
-# Edit .env with your configuration
-docker run -d -p 3000:3000 --env-file .env 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 [Multi-Provider Support](#multi-provider-support) for available options.
-
-> **Offline Deployment:** If `embed.diagrams.net` is blocked, see [Offline Deployment](./docs/offline-deployment.md) for configuration options.
 
 ### Installation
 
@@ -141,56 +157,51 @@ Replace the environment variables with your preferred AI provider configuration.
 ```bash
 git clone https://github.com/DayuanJiang/next-ai-draw-io
 cd next-ai-draw-io
-```
-
-2. Install dependencies:
-
-```bash
 npm install
-```
-
-3. Configure your AI provider:
-
-Create a `.env.local` file in the root directory:
-
-```bash
 cp env.example .env.local
 ```
 
-Edit `.env.local` and configure your chosen provider:
+See the [Provider Configuration Guide](./docs/en/ai-providers.md) for detailed setup instructions for each provider.
 
--   Set `AI_PROVIDER` to your chosen provider (bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow)
+2. Run the development server:
--   Set `AI_MODEL` to the specific model you want to use
--   Add the required API keys for your provider
--   `TEMPERATURE`: Optional temperature setting (e.g., `0` for deterministic output). Leave unset for models that don't support it (e.g., reasoning models).
--   `ACCESS_CODE_LIST`: Optional access password(s), can be comma-separated for multiple passwords.
-
-> Warning: If you do not set `ACCESS_CODE_LIST`, anyone can access your deployed site directly, which may lead to rapid depletion of your token. It is recommended to set this option.
-
-See the [Provider Configuration Guide](./docs/ai-providers.md) for detailed setup instructions for each provider.
-
-4. Run the development server:
 
 ```bash
 npm run dev
 ```
 
-5. Open [http://localhost:3000](http://localhost:3000) in your browser to see the application.
+3. Open [http://localhost:6002](http://localhost:6002) in your browser to see the application.
 
 ## Deployment
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new) from the creators of Next.js.
+### Deploy to EdgeOne Pages
 
-Check out the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+You can deploy with one click using [Tencent EdgeOne Pages](https://pages.edgeone.ai/).
+
+Deploy by this button: 
+
+[![Deploy to EdgeOne Pages](https://cdnstatic.tencentcs.com/edgeone/pages/deploy.svg)](https://edgeone.ai/pages/new?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
+
+Check out the [Tencent EdgeOne Pages documentation](https://pages.edgeone.ai/document/deployment-overview) for more details.
+
+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)
 
-Or you can deploy by this button.
 [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
 
-Be sure to **set the environment variables** in the Vercel dashboard as you did in your local `.env.local` file.
+The easiest way to deploy is using [Vercel](https://vercel.com/new), the creators of Next.js. Be sure to **set the environment variables** in the Vercel dashboard as you did in your local `.env.local` file.
+
+See the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+
+### Deploy on Cloudflare Workers
+
+[Go to Cloudflare Deploy Guide](./docs/en/cloudflare-deploy.md)
+
 
 
 ## Multi-Provider Support
 
+-   [ByteDance Doubao](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project)
 -   AWS Bedrock (default)
 -   OpenAI
 -   Anthropic
@@ -200,14 +211,17 @@ Be sure to **set the environment variables** in the Vercel dashboard as you did
 -   OpenRouter
 -   DeepSeek
 -   SiliconFlow
+-   SGLang
+-   Vercel AI Gateway
+
 
 All providers except AWS Bedrock and OpenRouter support custom endpoints.
 
-📖 **[Detailed Provider Configuration Guide](./docs/ai-providers.md)** - See setup instructions for each provider.
+📖 **[Detailed Provider Configuration Guide](./docs/en/ai-providers.md)** - See setup instructions for each provider.
 
 **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 `claude` series has trained on draw.io diagrams with cloud architecture logos like AWS, Azue, GCP. So if you want to create cloud architecture diagrams, this is the best choice.
+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.
 
 
 ## How It Works
@@ -220,27 +234,11 @@ The application uses the following technologies:
 
 Diagrams are represented as XML that can be rendered in draw.io. The AI processes your commands and generates or modifies this XML accordingly.
 
-## Project Structure
-
-```
-app/                  # Next.js App Router
-  api/chat/           # Chat API endpoint with AI tools
-  page.tsx            # Main page with DrawIO embed
-components/           # React components
-  chat-panel.tsx      # Chat interface with diagram control
-  chat-input.tsx      # User input component with file upload
-  history-dialog.tsx  # Diagram version history viewer
-  ui/                 # UI components (buttons, cards, etc.)
-contexts/             # React context providers
-  diagram-context.tsx # Global diagram state management
-lib/                  # Utility functions and helpers
-  ai-providers.ts     # Multi-provider AI configuration
-  utils.ts            # XML processing and conversion utilities
-public/               # Static assets including example images
-```
 
 ## Support & Contact
 
+**Special thanks to [ByteDance Doubao](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project) for sponsoring the API token usage of the demo site!** Register on the ARK platform to get 500K free tokens for all models!
+
 If you find this project useful, please consider [sponsoring](https://github.com/sponsors/DayuanJiang) to help me host the live demo site!
 
 For support or inquiries, please open an issue on the GitHub repository or contact the maintainer at:

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

@@ -72,96 +72,70 @@ export default function AboutCN() {
                         <p className="text-xl text-gray-600 font-medium">
                             AI驱动的图表创建工具 - 对话、绘制、可视化
                         </p>
-                        <div className="flex justify-center gap-4 mt-4 text-sm">
-                            <Link
-                                href="/about"
-                                className="text-gray-600 hover:text-blue-600"
-                            >
-                                English
-                            </Link>
-                            <span className="text-gray-400">|</span>
-                            <Link
-                                href="/about/cn"
-                                className="text-blue-600 font-semibold"
-                            >
-                                中文
-                            </Link>
-                            <span className="text-gray-400">|</span>
-                            <Link
-                                href="/about/ja"
-                                className="text-gray-600 hover:text-blue-600"
-                            >
-                                日本語
-                            </Link>
-                        </div>
                     </div>
 
-                    <div className="relative mb-8 rounded-2xl bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50 p-[1px] shadow-lg">
+                    <div className="relative mb-8 rounded-2xl bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50 p-[1px] shadow-lg">
-                        <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-rose-400 opacity-20" />
+                        <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-yellow-400 opacity-20" />
                         <div className="relative rounded-2xl bg-white/80 backdrop-blur-sm p-6">
                             {/* Header */}
                             <div className="mb-4">
                                 <h3 className="text-lg font-bold text-gray-900 tracking-tight">
-                                    模型变更与用量限制{" "}
+                                    由字节跳动豆包提供支持
-                                    <span className="text-sm text-amber-600 font-medium italic font-normal">
-                                        (或者说：我的钱包顶不住了)
-                                    </span>
                                 </h3>
                             </div>
 
                             {/* Story */}
                             <div className="space-y-3 text-sm text-gray-700 leading-relaxed mb-5">
                                 <p>
-                                    大家对这个项目的热情太高了——看来大家都真的很喜欢画图！但这也带来了一个幸福的烦恼：我们经常触发出上游
+                                    好消息！感谢{" "}
-                                    AI 接口的频率限制
+                                    <a
-                                    (TPS/TPM)。一旦超限，系统就会暂停，导致请求失败。
+                                        href="https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project"
-                                </p>
+                                        target="_blank"
-                                <p>
+                                        rel="noopener noreferrer"
-                                    由于使用量过高，我已将模型从 Claude 更换为{" "}
+                                        className="font-semibold text-blue-600 hover:underline"
+                                    >
+                                        字节跳动豆包
+                                    </a>
+                                    的慷慨赞助，演示站点现已接入强大的{" "}
                                     <span className="font-semibold text-amber-700">
-                                        minimax-m2
+                                        K2-thinking
-                                    </span>
+                                    </span>{" "}
-                                    ，以降低成本。
+                                    模型，图表生成效果更佳！点击链接注册即可领取{" "}
-                                </p>
-                                <p>
-                                    作为一个
                                     <span className="font-semibold text-amber-700">
-                                        独立开发者
+                                        50万免费Token
                                     </span>
-                                    ，目前的 API
+                                    ，适用于所有模型！
-                                    费用全是我自己在掏腰包（纯属为爱发电）。为了保证服务能细水长流，同时也为了避免我个人陷入财务危机，我还设置了以下临时用量限制：
                                 </p>
                             </div>
 
-                            {/* Limits Cards */}
+                            {/* Usage Limits */}
-                            <div className="grid grid-cols-2 gap-3 mb-5">
+                            <p className="text-sm text-gray-600 mb-3">
-                                <div className="rounded-xl bg-gradient-to-br from-amber-100 to-orange-100 p-4 text-center">
+                                当前使用限制：
-                                    <div className="text-xs font-medium text-amber-700 uppercase tracking-wide mb-1">
+                            </p>
-                                        Token 用量
+                            <div className="grid grid-cols-3 gap-3 mb-5">
-                                    </div>
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    <div className="text-lg font-bold text-gray-900">
+                                    <p className="text-lg font-bold text-amber-600">
-                                        {formatNumber(tpmLimit)}
+                                        {formatNumber(dailyRequestLimit)}
-                                        <span className="text-sm font-normal text-gray-600">
+                                    </p>
-                                            /分钟
+                                    <p className="text-xs text-gray-500">
-                                        </span>
+                                        请求/天
-                                    </div>
+                                    </p>
-                                    <div className="text-lg font-bold text-gray-900">
-                                        {formatNumber(dailyTokenLimit)}
-                                        <span className="text-sm font-normal text-gray-600">
-                                            /天
-                                        </span>
-                                    </div>
                                 </div>
-                                <div className="rounded-xl bg-gradient-to-br from-amber-100 to-orange-100 p-4 text-center">
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    <div className="text-xs font-medium text-amber-700 uppercase tracking-wide mb-1">
+                                    <p className="text-lg font-bold text-amber-600">
-                                        每日请求数
+                                        {formatNumber(dailyTokenLimit)}
-                                    </div>
+                                    </p>
-                                    <div className="text-2xl font-bold text-gray-900">
+                                    <p className="text-xs text-gray-500">
-                                        {dailyRequestLimit}
+                                        Token/天
-                                    </div>
+                                    </p>
-                                    <div className="text-sm text-gray-600">
+                                </div>
-                                        次
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    </div>
+                                    <p className="text-lg font-bold text-amber-600">
+                                        {formatNumber(tpmLimit)}
+                                    </p>
+                                    <p className="text-xs text-gray-500">
+                                        Token/分钟
+                                    </p>
                                 </div>
                             </div>
 
@@ -171,48 +145,19 @@ export default function AboutCN() {
                             </div>
 
                             {/* Bring Your Own Key */}
-                            <div className="text-center mb-5">
+                            <div className="text-center">
                                 <h4 className="text-base font-bold text-gray-900 mb-2">
                                     使用自己的 API Key
                                 </h4>
                                 <p className="text-sm text-gray-600 mb-2 max-w-md mx-auto">
-                                    您可以使用自己的 API Key
+                                    您也可以使用自己的 API
-                                    来绕过这些限制。点击聊天面板中的设置图标即可配置您的
+                                    Key，支持多种服务商。点击聊天面板中的设置图标即可配置。
-                                    Provider 和 API Key。
                                 </p>
                                 <p className="text-xs text-gray-500 max-w-md mx-auto">
                                     您的 Key
                                     仅保存在浏览器本地，不会被存储在服务器上。
                                 </p>
                             </div>
-
-                            {/* Divider */}
-                            <div className="flex items-center gap-3 mb-5">
-                                <div className="flex-1 h-px bg-gradient-to-r from-transparent via-amber-300 to-transparent" />
-                            </div>
-
-                            {/* Sponsorship CTA */}
-                            <div className="text-center">
-                                <h4 className="text-base font-bold text-gray-900 mb-2">
-                                    寻求赞助 (求大佬捞一把)
-                                </h4>
-                                <p className="text-sm text-gray-600 mb-4 max-w-md mx-auto">
-                                    要想彻底解除这些限制，扩容后端是唯一的办法。我正在积极寻求
-                                    AI API 提供商或云平台的赞助。
-                                </p>
-                                <p className="text-sm text-gray-600 mb-4 max-w-md mx-auto">
-                                    作为回报（无论是额度支持还是资金支持），我将在
-                                    GitHub 仓库和 Live Demo
-                                    网站的显眼位置展示贵公司的 Logo
-                                    作为平台赞助商。
-                                </p>
-                                <a
-                                    href="mailto:me@jiang.jp"
-                                    className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-gradient-to-r from-amber-500 to-orange-500 text-white font-medium text-sm shadow-md hover:shadow-lg hover:scale-105 transition-all duration-200"
-                                >
-                                    联系我
-                                </a>
-                            </div>
                         </div>
                     </div>
 
@@ -377,6 +322,16 @@ export default function AboutCN() {
                         多提供商支持
                     </h2>
                     <ul className="list-disc pl-6 text-gray-700 space-y-1">
+                        <li>
+                            <a
+                                href="https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-blue-600 hover:underline"
+                            >
+                                字节跳动豆包
+                            </a>
+                        </li>
                         <li>AWS Bedrock（默认）</li>
                         <li>
                             OpenAI / OpenAI兼容API（通过{" "}
@@ -388,6 +343,7 @@ export default function AboutCN() {
                         <li>Ollama</li>
                         <li>OpenRouter</li>
                         <li>DeepSeek</li>
+                        <li>SiliconFlow</li>
                     </ul>
                     <p className="text-gray-700 mt-4">
                         注意：<code>claude-sonnet-4-5</code>{" "}
@@ -395,18 +351,21 @@ export default function AboutCN() {
                     </p>
 
                     {/* Support */}
-                    <div className="flex items-center gap-4 mt-10 mb-4">
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
-                        <h2 className="text-2xl font-semibold text-gray-900">
+                        支持与联系
-                            支持与联系
+                    </h2>
-                        </h2>
+                    <p className="text-gray-700 mb-4 font-semibold">
-                        <iframe
+                        特别感谢{" "}
-                            src="https://github.com/sponsors/DayuanJiang/button"
+                        <a
-                            title="Sponsor DayuanJiang"
+                            href="https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project"
-                            height="32"
+                            target="_blank"
-                            width="114"
+                            rel="noopener noreferrer"
-                            style={{ border: 0, borderRadius: 6 }}
+                            className="text-blue-600 hover:underline"
-                        />
+                        >
-                    </div>
+                            字节跳动豆包
+                        </a>{" "}
+                        为本站提供 API Token 支持！
+                    </p>
                     <p className="text-gray-700">
                         如果您觉得这个项目有用，请考虑{" "}
                         <a

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

@@ -80,97 +80,70 @@ export default function AboutJA() {
                             AI搭載のダイアグラム作成ツール -
                             チャット、描画、可視化
                         </p>
-                        <div className="flex justify-center gap-4 mt-4 text-sm">
-                            <Link
-                                href="/about"
-                                className="text-gray-600 hover:text-blue-600"
-                            >
-                                English
-                            </Link>
-                            <span className="text-gray-400">|</span>
-                            <Link
-                                href="/about/cn"
-                                className="text-gray-600 hover:text-blue-600"
-                            >
-                                中文
-                            </Link>
-                            <span className="text-gray-400">|</span>
-                            <Link
-                                href="/about/ja"
-                                className="text-blue-600 font-semibold"
-                            >
-                                日本語
-                            </Link>
-                        </div>
                     </div>
 
-                    <div className="relative mb-8 rounded-2xl bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50 p-[1px] shadow-lg">
+                    <div className="relative mb-8 rounded-2xl bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50 p-[1px] shadow-lg">
-                        <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-rose-400 opacity-20" />
+                        <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-yellow-400 opacity-20" />
                         <div className="relative rounded-2xl bg-white/80 backdrop-blur-sm p-6">
                             {/* Header */}
                             <div className="mb-4">
                                 <h3 className="text-lg font-bold text-gray-900 tracking-tight">
-                                    モデル変更と利用制限について{" "}
+                                    ByteDance Doubao提供
-                                    <span className="text-sm text-amber-600 font-medium italic font-normal">
-                                        （別名：お財布が悲鳴を上げています）
-                                    </span>
                                 </h3>
                             </div>
 
                             {/* Story */}
                             <div className="space-y-3 text-sm text-gray-700 leading-relaxed mb-5">
                                 <p>
-                                    予想以上の反響をいただき、ありがとうございます！皆様にダイアグラム作成を楽しんでいただいているのは嬉しい限りですが、その熱量により
+                                    朗報です！
-                                    AI API のレート制限 (TPS/TPM)
+                                    <a
-                                    に頻繁に引っかかってしまっています。制限に達するとシステムが一時停止し、エラーが発生してしまいます。
+                                        href="https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project"
-                                </p>
+                                        target="_blank"
-                                <p>
+                                        rel="noopener noreferrer"
-                                    利用量の増加に伴い、コスト削減のためモデルを
+                                        className="font-semibold text-blue-600 hover:underline"
-                                    Claude から{" "}
+                                    >
+                                        ByteDance Doubao
+                                    </a>
+                                    様のご支援により、デモサイトでは強力な{" "}
                                     <span className="font-semibold text-amber-700">
-                                        minimax-m2
+                                        K2-thinking
                                     </span>{" "}
-                                    に変更しました。
+                                    モデルを利用できるようになり、より高品質なダイアグラム生成が可能になりました。リンクから登録すると、すべてのモデルで使える{" "}
-                                </p>
-                                <p>
-                                    私は現在、
                                     <span className="font-semibold text-amber-700">
-                                        個人開発者
+                                        50万トークン
                                     </span>
-                                    として API
+                                    が無料でもらえます！
-                                    費用を全額自腹で負担しています。サービスを継続し、かつ私自身が借金を背負わないようにするため（笑）、一時的に以下の利用制限も設けさせていただきました。
                                 </p>
                             </div>
 
-                            {/* Limits Cards */}
+                            {/* Usage Limits */}
-                            <div className="grid grid-cols-2 gap-3 mb-5">
+                            <p className="text-sm text-gray-600 mb-3">
-                                <div className="rounded-xl bg-gradient-to-br from-amber-100 to-orange-100 p-4 text-center">
+                                現在の使用制限：
-                                    <div className="text-xs font-medium text-amber-700 uppercase tracking-wide mb-1">
+                            </p>
-                                        トークン使用量
+                            <div className="grid grid-cols-3 gap-3 mb-5">
-                                    </div>
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    <div className="text-lg font-bold text-gray-900">
+                                    <p className="text-lg font-bold text-amber-600">
-                                        {formatNumber(tpmLimit)}
+                                        {formatNumber(dailyRequestLimit)}
-                                        <span className="text-sm font-normal text-gray-600">
+                                    </p>
-                                            /分
+                                    <p className="text-xs text-gray-500">
-                                        </span>
+                                        リクエスト/日
-                                    </div>
+                                    </p>
-                                    <div className="text-lg font-bold text-gray-900">
-                                        {formatNumber(dailyTokenLimit)}
-                                        <span className="text-sm font-normal text-gray-600">
-                                            /日
-                                        </span>
-                                    </div>
                                 </div>
-                                <div className="rounded-xl bg-gradient-to-br from-amber-100 to-orange-100 p-4 text-center">
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    <div className="text-xs font-medium text-amber-700 uppercase tracking-wide mb-1">
+                                    <p className="text-lg font-bold text-amber-600">
-                                        1日のリクエスト数
+                                        {formatNumber(dailyTokenLimit)}
-                                    </div>
+                                    </p>
-                                    <div className="text-2xl font-bold text-gray-900">
+                                    <p className="text-xs text-gray-500">
-                                        {dailyRequestLimit}
+                                        トークン/日
-                                    </div>
+                                    </p>
-                                    <div className="text-sm text-gray-600">
+                                </div>
-                                        回
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    </div>
+                                    <p className="text-lg font-bold text-amber-600">
+                                        {formatNumber(tpmLimit)}
+                                    </p>
+                                    <p className="text-xs text-gray-500">
+                                        トークン/分
+                                    </p>
                                 </div>
                             </div>
 
@@ -180,44 +153,17 @@ export default function AboutJA() {
                             </div>
 
                             {/* Bring Your Own Key */}
-                            <div className="text-center mb-5">
+                            <div className="text-center">
                                 <h4 className="text-base font-bold text-gray-900 mb-2">
                                     自分のAPIキーを使用
                                 </h4>
                                 <p className="text-sm text-gray-600 mb-2 max-w-md mx-auto">
-                                    自分のAPIキーを使用することで、これらの制限を回避できます。チャットパネルの設定アイコンをクリックして、プロバイダーとAPIキーを設定してください。
+                                    お好みのプロバイダーで自分のAPIキーを使用することもできます。チャットパネルの設定アイコンをクリックして設定してください。
                                 </p>
                                 <p className="text-xs text-gray-500 max-w-md mx-auto">
                                     キーはブラウザのローカルに保存され、サーバーには保存されません。
                                 </p>
                             </div>
-
-                            {/* Divider */}
-                            <div className="flex items-center gap-3 mb-5">
-                                <div className="flex-1 h-px bg-gradient-to-r from-transparent via-amber-300 to-transparent" />
-                            </div>
-
-                            {/* Sponsorship CTA */}
-                            <div className="text-center">
-                                <h4 className="text-base font-bold text-gray-900 mb-2">
-                                    スポンサー募集
-                                </h4>
-                                <p className="text-sm text-gray-600 mb-4 max-w-md mx-auto">
-                                    これらの制限を取り払い、バックエンドをスケールさせるには皆様の支援が必要です。現在、AI
-                                    API
-                                    プロバイダー様やクラウドプラットフォーム様からのスポンサー支援を積極的に募集しています。
-                                </p>
-                                <p className="text-sm text-gray-600 mb-4 max-w-md mx-auto">
-                                    ご支援（クレジット提供や資金援助）をいただける場合、GitHub
-                                    リポジトリおよびデモサイトにて、プラットフォームスポンサーとして貴社を大々的にご紹介させていただきます。
-                                </p>
-                                <a
-                                    href="mailto:me@jiang.jp"
-                                    className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-gradient-to-r from-amber-500 to-orange-500 text-white font-medium text-sm shadow-md hover:shadow-lg hover:scale-105 transition-all duration-200"
-                                >
-                                    お問い合わせ
-                                </a>
-                            </div>
                         </div>
                     </div>
 
@@ -391,6 +337,16 @@ export default function AboutJA() {
                         マルチプロバイダーサポート
                     </h2>
                     <ul className="list-disc pl-6 text-gray-700 space-y-1">
+                        <li>
+                            <a
+                                href="https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-blue-600 hover:underline"
+                            >
+                                ByteDance Doubao
+                            </a>
+                        </li>
                         <li>AWS Bedrock（デフォルト）</li>
                         <li>
                             OpenAI / OpenAI互換API（<code>OPENAI_BASE_URL</code>
@@ -402,6 +358,7 @@ export default function AboutJA() {
                         <li>Ollama</li>
                         <li>OpenRouter</li>
                         <li>DeepSeek</li>
+                        <li>SiliconFlow</li>
                     </ul>
                     <p className="text-gray-700 mt-4">
                         注：<code>claude-sonnet-4-5</code>
@@ -409,18 +366,21 @@ export default function AboutJA() {
                     </p>
 
                     {/* Support */}
-                    <div className="flex items-center gap-4 mt-10 mb-4">
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
-                        <h2 className="text-2xl font-semibold text-gray-900">
+                        サポート＆お問い合わせ
-                            サポート＆お問い合わせ
+                    </h2>
-                        </h2>
+                    <p className="text-gray-700 mb-4 font-semibold">
-                        <iframe
+                        デモサイトのAPIトークン使用を支援してくださった{" "}
-                            src="https://github.com/sponsors/DayuanJiang/button"
+                        <a
-                            title="Sponsor DayuanJiang"
+                            href="https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project"
-                            height="32"
+                            target="_blank"
-                            width="114"
+                            rel="noopener noreferrer"
-                            style={{ border: 0, borderRadius: 6 }}
+                            className="text-blue-600 hover:underline"
-                        />
+                        >
-                    </div>
+                            ByteDance Doubao
+                        </a>{" "}
+                        様に、心より感謝申し上げます。
+                    </p>
                     <p className="text-gray-700">
                         このプロジェクトが役に立ったら、ライブデモサイトのホスティングを支援するために{" "}
                         <a

app/[lang]/about/page.tsx

@@ -80,103 +80,72 @@ export default function About() {
                             AI-Powered Diagram Creation Tool - Chat, Draw,
                             Visualize
                         </p>
-                        <div className="flex justify-center gap-4 mt-4 text-sm">
-                            <Link
-                                href="/about"
-                                className="text-blue-600 font-semibold"
-                            >
-                                English
-                            </Link>
-                            <span className="text-gray-400">|</span>
-                            <Link
-                                href="/about/cn"
-                                className="text-gray-600 hover:text-blue-600"
-                            >
-                                中文
-                            </Link>
-                            <span className="text-gray-400">|</span>
-                            <Link
-                                href="/about/ja"
-                                className="text-gray-600 hover:text-blue-600"
-                            >
-                                日本語
-                            </Link>
-                        </div>
                     </div>
 
-                    <div className="relative mb-8 rounded-2xl bg-gradient-to-br from-amber-50 via-orange-50 to-rose-50 p-[1px] shadow-lg">
+                    <div className="relative mb-8 rounded-2xl bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50 p-[1px] shadow-lg">
-                        <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-rose-400 opacity-20" />
+                        <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-yellow-400 opacity-20" />
                         <div className="relative rounded-2xl bg-white/80 backdrop-blur-sm p-6">
                             {/* Header */}
                             <div className="mb-4">
                                 <h3 className="text-lg font-bold text-gray-900 tracking-tight">
-                                    Model Change & Usage Limits{" "}
+                                    Sponsored by ByteDance Doubao
-                                    <span className="text-sm text-amber-600 font-medium italic font-normal">
-                                        (Or: Why My Wallet is Crying)
-                                    </span>
                                 </h3>
                             </div>
 
                             {/* Story */}
                             <div className="space-y-3 text-sm text-gray-700 leading-relaxed mb-5">
                                 <p>
-                                    The response to this project has been
+                                    Great news! Thanks to the generous
-                                    incredible—you all love making diagrams!
+                                    sponsorship from{" "}
-                                    However, this enthusiasm means we are
+                                    <a
-                                    frequently hitting the AI API rate limits
+                                        href="https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project"
-                                    (TPS/TPM). When this happens, the system
+                                        target="_blank"
-                                    pauses, leading to failed requests.
+                                        rel="noopener noreferrer"
-                                </p>
+                                        className="font-semibold text-blue-600 hover:underline"
-                                <p>
+                                    >
-                                    Due to the high usage, I have changed the
+                                        ByteDance Doubao
-                                    model from Claude to{" "}
+                                    </a>
+                                    , the demo site now uses the powerful{" "}
                                     <span className="font-semibold text-amber-700">
-                                        minimax-m2
+                                        K2-thinking
-                                    </span>
+                                    </span>{" "}
-                                    , which is more cost-effective.
+                                    model for better diagram generation! Sign up
-                                </p>
+                                    via the link to get{" "}
-                                <p>
-                                    As an{" "}
                                     <span className="font-semibold text-amber-700">
-                                        indie developer
+                                        500K free tokens
-                                    </span>
+                                    </span>{" "}
-                                    , I am currently footing the entire API
+                                    for all models!
-                                    bill. To keep the lights on and ensure the
-                                    service remains available to everyone
-                                    without sending me into debt, I have also
-                                    implemented the following temporary caps:
                                 </p>
                             </div>
 
-                            {/* Limits Cards */}
+                            {/* Usage Limits */}
-                            <div className="grid grid-cols-2 gap-3 mb-5">
+                            <p className="text-sm text-gray-600 mb-3">
-                                <div className="rounded-xl bg-gradient-to-br from-amber-100 to-orange-100 p-4 text-center">
+                                Please note the current usage limits:
-                                    <div className="text-xs font-medium text-amber-700 uppercase tracking-wide mb-1">
+                            </p>
-                                        Token Usage
+                            <div className="grid grid-cols-3 gap-3 mb-5">
-                                    </div>
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    <div className="text-lg font-bold text-gray-900">
+                                    <p className="text-lg font-bold text-amber-600">
-                                        {formatNumber(tpmLimit)}
+                                        {formatNumber(dailyRequestLimit)}
-                                        <span className="text-sm font-normal text-gray-600">
+                                    </p>
-                                            /min
+                                    <p className="text-xs text-gray-500">
-                                        </span>
+                                        requests/day
-                                    </div>
+                                    </p>
-                                    <div className="text-lg font-bold text-gray-900">
-                                        {formatNumber(dailyTokenLimit)}
-                                        <span className="text-sm font-normal text-gray-600">
-                                            /day
-                                        </span>
-                                    </div>
                                 </div>
-                                <div className="rounded-xl bg-gradient-to-br from-amber-100 to-orange-100 p-4 text-center">
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    <div className="text-xs font-medium text-amber-700 uppercase tracking-wide mb-1">
+                                    <p className="text-lg font-bold text-amber-600">
-                                        Daily Requests
+                                        {formatNumber(dailyTokenLimit)}
-                                    </div>
+                                    </p>
-                                    <div className="text-2xl font-bold text-gray-900">
+                                    <p className="text-xs text-gray-500">
-                                        {dailyRequestLimit}
+                                        tokens/day
-                                    </div>
+                                    </p>
-                                    <div className="text-sm text-gray-600">
+                                </div>
-                                        requests
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
-                                    </div>
+                                    <p className="text-lg font-bold text-amber-600">
+                                        {formatNumber(tpmLimit)}
+                                    </p>
+                                    <p className="text-xs text-gray-500">
+                                        tokens/min
+                                    </p>
                                 </div>
                             </div>
 
@@ -186,51 +155,21 @@ export default function About() {
                             </div>
 
                             {/* Bring Your Own Key */}
-                            <div className="text-center mb-5">
+                            <div className="text-center">
                                 <h4 className="text-base font-bold text-gray-900 mb-2">
                                     Bring Your Own API Key
                                 </h4>
                                 <p className="text-sm text-gray-600 mb-2 max-w-md mx-auto">
-                                    You can use your own API key to bypass these
+                                    You can also use your own API key with any
-                                    limits. Click the Settings icon in the chat
+                                    supported provider. Click the Settings icon
-                                    panel to configure your provider and API
+                                    in the chat panel to configure your provider
-                                    key.
+                                    and API key.
                                 </p>
                                 <p className="text-xs text-gray-500 max-w-md mx-auto">
                                     Your key is stored locally in your browser
                                     and is never stored on the server.
                                 </p>
                             </div>
-
-                            {/* Divider */}
-                            <div className="flex items-center gap-3 mb-5">
-                                <div className="flex-1 h-px bg-gradient-to-r from-transparent via-amber-300 to-transparent" />
-                            </div>
-
-                            {/* Sponsorship CTA */}
-                            <div className="text-center">
-                                <h4 className="text-base font-bold text-gray-900 mb-2">
-                                    Call for Sponsorship
-                                </h4>
-                                <p className="text-sm text-gray-600 mb-4 max-w-md mx-auto">
-                                    Scaling the backend is the only way to
-                                    remove these limits. I am actively seeking
-                                    sponsorship from AI API providers or Cloud
-                                    Platforms.
-                                </p>
-                                <p className="text-sm text-gray-600 mb-4 max-w-md mx-auto">
-                                    In return for support (credits or funding),
-                                    I will prominently feature your company as a
-                                    platform sponsor on both the GitHub
-                                    repository and the live demo site.
-                                </p>
-                                <a
-                                    href="mailto:me@jiang.jp"
-                                    className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-gradient-to-r from-amber-500 to-orange-500 text-white font-medium text-sm shadow-md hover:shadow-lg hover:scale-105 transition-all duration-200"
-                                >
-                                    Contact Me
-                                </a>
-                            </div>
                         </div>
                     </div>
 
@@ -417,6 +356,16 @@ export default function About() {
                         Multi-Provider Support
                     </h2>
                     <ul className="list-disc pl-6 text-gray-700 space-y-1">
+                        <li>
+                            <a
+                                href="https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project"
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-blue-600 hover:underline"
+                            >
+                                ByteDance Doubao
+                            </a>
+                        </li>
                         <li>AWS Bedrock (default)</li>
                         <li>
                             OpenAI / OpenAI-compatible APIs (via{" "}
@@ -428,6 +377,7 @@ export default function About() {
                         <li>Ollama</li>
                         <li>OpenRouter</li>
                         <li>DeepSeek</li>
+                        <li>SiliconFlow</li>
                     </ul>
                     <p className="text-gray-700 mt-4">
                         Note that <code>claude-sonnet-4-5</code> has trained on
@@ -437,18 +387,21 @@ export default function About() {
                     </p>
 
                     {/* Support */}
-                    <div className="flex items-center gap-4 mt-10 mb-4">
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
-                        <h2 className="text-2xl font-semibold text-gray-900">
+                        Support &amp; Contact
-                            Support &amp; Contact
+                    </h2>
-                        </h2>
+                    <p className="text-gray-700 mb-4 font-semibold">
-                        <iframe
+                        Special thanks to{" "}
-                            src="https://github.com/sponsors/DayuanJiang/button"
+                        <a
-                            title="Sponsor DayuanJiang"
+                            href="https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project"
-                            height="32"
+                            target="_blank"
-                            width="114"
+                            rel="noopener noreferrer"
-                            style={{ border: 0, borderRadius: 6 }}
+                            className="text-blue-600 hover:underline"
-                        />
+                        >
-                    </div>
+                            ByteDance Doubao
+                        </a>{" "}
+                        for sponsoring the API token usage of the demo site!
+                    </p>
                     <p className="text-gray-700">
                         If you find this project useful, please consider{" "}
                         <a

app/[lang]/layout.tsx

@@ -0,0 +1,172 @@
+import { GoogleAnalytics } from "@next/third-parties/google"
+import type { Metadata, Viewport } from "next"
+import { JetBrains_Mono, Plus_Jakarta_Sans } from "next/font/google"
+import { notFound } from "next/navigation"
+import { DiagramProvider } from "@/contexts/diagram-context"
+import { DictionaryProvider } from "@/hooks/use-dictionary"
+import type { Locale } from "@/lib/i18n/config"
+import { i18n } from "@/lib/i18n/config"
+import { getDictionary, hasLocale } from "@/lib/i18n/dictionaries"
+
+import "../globals.css"
+
+const plusJakarta = Plus_Jakarta_Sans({
+    variable: "--font-sans",
+    subsets: ["latin"],
+    weight: ["400", "500", "600", "700"],
+})
+
+const jetbrainsMono = JetBrains_Mono({
+    variable: "--font-mono",
+    subsets: ["latin"],
+    weight: ["400", "500"],
+})
+
+export const viewport: Viewport = {
+    width: "device-width",
+    initialScale: 1,
+    maximumScale: 1,
+    userScalable: false,
+}
+
+// Generate static params for all locales
+export async function generateStaticParams() {
+    return i18n.locales.map((locale) => ({ lang: locale }))
+}
+
+// Generate metadata per locale
+export async function generateMetadata({
+    params,
+}: {
+    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
+
+    // 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",
+    }
+
+    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.",
+    }
+
+    return {
+        title: titles[lang],
+        description: descriptions[lang],
+        keywords: [
+            "AI diagram generator",
+            "AWS architecture",
+            "flowchart creator",
+            "draw.io",
+            "AI drawing tool",
+            "technical diagrams",
+            "diagram automation",
+            "free diagram generator",
+            "online diagram maker",
+        ],
+        authors: [{ name: "Next AI Draw.io" }],
+        creator: "Next AI Draw.io",
+        publisher: "Next AI Draw.io",
+        metadataBase: new URL("https://next-ai-drawio.jiang.jp"),
+        openGraph: {
+            title: titles[lang],
+            description: descriptions[lang],
+            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",
+            images: [
+                {
+                    url: "/architecture.png",
+                    width: 1200,
+                    height: 630,
+                    alt: "Next AI Draw.io - AI-powered diagram creation tool",
+                },
+            ],
+        },
+        twitter: {
+            card: "summary_large_image",
+            title: titles[lang],
+            description: descriptions[lang],
+            images: ["/architecture.png"],
+        },
+        robots: {
+            index: true,
+            follow: true,
+            googleBot: {
+                index: true,
+                follow: true,
+                "max-video-preview": -1,
+                "max-image-preview": "large",
+                "max-snippet": -1,
+            },
+        },
+        icons: {
+            icon: "/favicon.ico",
+        },
+        alternates: {
+            languages: {
+                en: "/en",
+                zh: "/zh",
+                ja: "/ja",
+            },
+        },
+    }
+}
+
+export default async function RootLayout({
+    children,
+    params,
+}: Readonly<{
+    children: React.ReactNode
+    params: Promise<{ lang: string }>
+}>) {
+    const { lang } = await params
+    if (!hasLocale(lang)) notFound()
+    const validLang = lang as Locale
+    const dictionary = await getDictionary(validLang)
+
+    const jsonLd = {
+        "@context": "https://schema.org",
+        "@type": "SoftwareApplication",
+        name: "Next AI Draw.io",
+        applicationCategory: "DesignApplication",
+        operatingSystem: "Web Browser",
+        description:
+            "AI-powered diagram generator with targeted XML editing capabilities that integrates with draw.io for creating AWS architecture diagrams, flowcharts, and technical diagrams. Features diagram history, multi-provider AI support, and real-time collaboration.",
+        url: "https://next-ai-drawio.jiang.jp",
+        inLanguage: validLang,
+        offers: {
+            "@type": "Offer",
+            price: "0",
+            priceCurrency: "USD",
+        },
+    }
+
+    return (
+        <html lang={validLang} suppressHydrationWarning>
+            <head>
+                <script
+                    type="application/ld+json"
+                    dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+                />
+            </head>
+            <body
+                className={`${plusJakarta.variable} ${jetbrainsMono.variable} antialiased`}
+            >
+                <DictionaryProvider dictionary={dictionary}>
+                    <DiagramProvider>{children}</DiagramProvider>
+                </DictionaryProvider>
+            </body>
+            {process.env.NEXT_PUBLIC_GA_ID && (
+                <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />
+            )}
+        </html>
+    )
+}

app/[lang]/page.tsx

@@ -1,5 +1,6 @@
 "use client"
-import { useEffect, useRef, useState } from "react"
+import { usePathname, useRouter } from "next/navigation"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { DrawIoEmbed } from "react-drawio"
 import type { ImperativePanelHandle } from "react-resizable-panels"
 import ChatPanel from "@/components/chat-panel"
@@ -10,13 +11,25 @@ import {
     ResizablePanelGroup,
 } from "@/components/ui/resizable"
 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 } =
+    const {
-        useDiagram()
+        drawioRef,
+        handleDiagramExport,
+        onDrawioLoad,
+        resetDrawioReady,
+        saveDiagramToStorage,
+        showSaveDialog,
+        setShowSaveDialog,
+    } = useDiagram()
+    const router = useRouter()
+    const pathname = usePathname()
+    // Extract current language from pathname (e.g., "/zh/about" → "zh")
+    const currentLang = (pathname.split("/")[1] || i18n.defaultLocale) as Locale
     const [isMobile, setIsMobile] = useState(false)
     const [isChatVisible, setIsChatVisible] = useState(true)
     const [drawioUi, setDrawioUi] = useState<"min" | "sketch">("min")
@@ -25,9 +38,44 @@ export default function Home() {
     const [closeProtection, setCloseProtection] = useState(false)
 
     const chatPanelRef = useRef<ImperativePanelHandle>(null)
+    const isSavingRef = useRef(false)
+    const mouseOverDrawioRef = useRef(false)
+    const isMobileRef = useRef(false)
+
+    // Reset saving flag when dialog closes (with delay to ignore lingering save events from draw.io)
+    useEffect(() => {
+        if (!showSaveDialog) {
+            const timeout = setTimeout(() => {
+                isSavingRef.current = false
+            }, 1000)
+            return () => clearTimeout(timeout)
+        }
+    }, [showSaveDialog])
+
+    // Handle save from draw.io's built-in save button
+    // Note: draw.io sends save events for various reasons (focus changes, etc.)
+    // We use mouse position to determine if the user is interacting with draw.io
+    const handleDrawioSave = useCallback(() => {
+        if (!mouseOverDrawioRef.current) return
+        if (isSavingRef.current) return
+        isSavingRef.current = true
+        setShowSaveDialog(true)
+    }, [setShowSaveDialog])
 
     // Load preferences from localStorage after mount
     useEffect(() => {
+        // Restore saved locale and redirect if needed
+        const savedLocale = localStorage.getItem("next-ai-draw-io-locale")
+        if (savedLocale && i18n.locales.includes(savedLocale as Locale)) {
+            const pathParts = pathname.split("/").filter(Boolean)
+            const currentLocale = pathParts[0]
+            if (currentLocale !== savedLocale) {
+                pathParts[0] = savedLocale
+                router.replace(`/${pathParts.join("/")}`)
+                return // Wait for redirect
+            }
+        }
+
         const savedUi = localStorage.getItem("drawio-theme")
         if (savedUi === "min" || savedUi === "sketch") {
             setDrawioUi(savedUi)
@@ -35,12 +83,10 @@ export default function Home() {
 
         const savedDarkMode = localStorage.getItem("next-ai-draw-io-dark-mode")
         if (savedDarkMode !== null) {
-            // Use saved preference
             const isDark = savedDarkMode === "true"
             setDarkMode(isDark)
             document.documentElement.classList.toggle("dark", isDark)
         } else {
-            // First visit: match browser preference
             const prefersDark = window.matchMedia(
                 "(prefers-color-scheme: dark)",
             ).matches
@@ -56,27 +102,46 @@ export default function Home() {
         }
 
         setIsLoaded(true)
-    }, [])
+    }, [pathname, router])
 
-    const toggleDarkMode = () => {
+    const handleDarkModeChange = async () => {
+        await saveDiagramToStorage()
         const newValue = !darkMode
         setDarkMode(newValue)
         localStorage.setItem("next-ai-draw-io-dark-mode", String(newValue))
         document.documentElement.classList.toggle("dark", newValue)
-        // Reset so onDrawioLoad fires again after remount
         resetDrawioReady()
     }
 
-    // Check mobile
+    const handleDrawioUiChange = async () => {
+        await saveDiagramToStorage()
+        const newUi = drawioUi === "min" ? "sketch" : "min"
+        localStorage.setItem("drawio-theme", newUi)
+        setDrawioUi(newUi)
+        resetDrawioReady()
+    }
+
+    // Check mobile - save diagram and reset draw.io before crossing breakpoint
+    const isInitialRenderRef = useRef(true)
     useEffect(() => {
         const checkMobile = () => {
-            setIsMobile(window.innerWidth < 768)
+            const newIsMobile = window.innerWidth < 768
+            if (
+                !isInitialRenderRef.current &&
+                newIsMobile !== isMobileRef.current
+            ) {
+                saveDiagramToStorage().catch(() => {})
+                resetDrawioReady()
+            }
+            isMobileRef.current = newIsMobile
+            isInitialRenderRef.current = false
+            setIsMobile(newIsMobile)
         }
 
         checkMobile()
         window.addEventListener("resize", checkMobile)
         return () => window.removeEventListener("resize", checkMobile)
-    }, [])
+    }, [saveDiagramToStorage, resetDrawioReady])
 
     const toggleChatPanel = () => {
         const panel = chatPanelRef.current
@@ -122,11 +187,9 @@ export default function Home() {
         <div className="h-screen bg-background relative overflow-hidden">
             <ResizablePanelGroup
                 id="main-panel-group"
-                key={isMobile ? "mobile" : "desktop"}
                 direction={isMobile ? "vertical" : "horizontal"}
                 className="h-full"
             >
-                {/* Draw.io Canvas */}
                 <ResizablePanel
                     id="drawio-panel"
                     defaultSize={isMobile ? 50 : 67}
@@ -136,14 +199,21 @@ export default function Home() {
                         className={`h-full relative ${
                             isMobile ? "p-1" : "p-2"
                         }`}
+                        onMouseEnter={() => {
+                            mouseOverDrawioRef.current = true
+                        }}
+                        onMouseLeave={() => {
+                            mouseOverDrawioRef.current = false
+                        }}
                     >
                         <div className="h-full rounded-xl overflow-hidden shadow-soft-lg border border-border/30">
                             {isLoaded ? (
                                 <DrawIoEmbed
-                                    key={`${drawioUi}-${darkMode}`}
+                                    key={`${drawioUi}-${darkMode}-${currentLang}`}
                                     ref={drawioRef}
                                     onExport={handleDiagramExport}
                                     onLoad={onDrawioLoad}
+                                    onSave={handleDrawioSave}
                                     baseUrl={drawioBaseUrl}
                                     urlParameters={{
                                         ui: drawioUi,
@@ -152,6 +222,7 @@ export default function Home() {
                                         saveAndExit: false,
                                         noExitBtn: true,
                                         dark: darkMode,
+                                        lang: currentLang,
                                     }}
                                 />
                             ) : (
@@ -167,6 +238,7 @@ export default function Home() {
 
                 {/* Chat Panel */}
                 <ResizablePanel
+                    key={isMobile ? "mobile" : "desktop"}
                     id="chat-panel"
                     ref={chatPanelRef}
                     defaultSize={isMobile ? 50 : 33}
@@ -182,15 +254,9 @@ export default function Home() {
                             isVisible={isChatVisible}
                             onToggleVisibility={toggleChatPanel}
                             drawioUi={drawioUi}
-                            onToggleDrawioUi={() => {
+                            onToggleDrawioUi={handleDrawioUiChange}
-                                const newUi =
-                                    drawioUi === "min" ? "sketch" : "min"
-                                localStorage.setItem("drawio-theme", newUi)
-                                setDrawioUi(newUi)
-                                resetDrawioReady()
-                            }}
                             darkMode={darkMode}
-                            onToggleDarkMode={toggleDarkMode}
+                            onToggleDarkMode={handleDarkModeChange}
                             isMobile={isMobile}
                             onCloseProtectionChange={setCloseProtection}
                         />

app/api/chat/route.ts

@@ -3,13 +3,26 @@ import {
     convertToModelMessages,
     createUIMessageStream,
     createUIMessageStreamResponse,
+    InvalidToolInputError,
     LoadAPIKeyError,
     stepCountIs,
     streamText,
 } from "ai"
+import fs from "fs/promises"
+import { jsonrepair } from "jsonrepair"
+import path from "path"
 import { z } from "zod"
-import { getAIModel, supportsPromptCaching } from "@/lib/ai-providers"
+import {
+    getAIModel,
+    supportsImageInput,
+    supportsPromptCaching,
+} from "@/lib/ai-providers"
 import { findCachedResponse } from "@/lib/cached-responses"
+import {
+    checkAndIncrementRequest,
+    isQuotaEnabled,
+    recordTokenUsage,
+} from "@/lib/dynamo-quota-manager"
 import {
     getTelemetryConfig,
     setTraceInput,
@@ -17,8 +30,9 @@ import {
     wrapWithObserve,
 } from "@/lib/langfuse"
 import { getSystemPrompt } from "@/lib/system-prompts"
+import { getUserIdFromRequest } from "@/lib/user-id"
 
-export const maxDuration = 300
+export const maxDuration = 120
 
 // File upload limits (must match client-side)
 const MAX_FILE_SIZE = 2 * 1024 * 1024 // 2MB
@@ -68,62 +82,45 @@ function isMinimalDiagram(xml: string): boolean {
 
 // 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) => {
+        const replacedContent = msg.content
-            if (part.type === "tool-call") {
+            .map((part: any) => {
-                const toolName = part.toolName
+                if (part.type === "tool-call") {
-                if (
+                    const toolName = part.toolName
-                    toolName === "display_diagram" ||
+                    // Fix invalid/undefined inputs from interrupted streaming
-                    toolName === "edit_diagram"
+                    if (
-                ) {
+                        !part.input ||
-                    return {
+                        typeof part.input !== "object" ||
-                        ...part,
+                        Object.keys(part.input).length === 0
-                        input: {
+                    ) {
-                            placeholder:
+                        // Skip tool calls with invalid inputs entirely
-                                "[XML content replaced - see current diagram XML in system context]",
+                        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
-            return part
+            })
-        })
+            .filter(Boolean) // Remove null entries (invalid tool calls)
         return { ...msg, content: replacedContent }
     })
 }
 
-// Helper function to fix tool call inputs for Bedrock API
-// Bedrock requires toolUse.input to be a JSON object, not a string
-function fixToolCallInputs(messages: any[]): any[] {
-    return messages.map((msg) => {
-        if (msg.role !== "assistant" || !Array.isArray(msg.content)) {
-            return msg
-        }
-        const fixedContent = msg.content.map((part: any) => {
-            if (part.type === "tool-call") {
-                if (typeof part.input === "string") {
-                    try {
-                        const parsed = JSON.parse(part.input)
-                        return { ...part, input: parsed }
-                    } catch {
-                        // If parsing fails, wrap the string in an object
-                        return { ...part, input: { rawInput: part.input } }
-                    }
-                }
-                // Input is already an object, but verify it's not null/undefined
-                if (part.input === null || part.input === undefined) {
-                    return { ...part, input: {} }
-                }
-            }
-            return part
-        })
-        return { ...msg, content: fixedContent }
-    })
-}
-
 // Helper function to create cached stream response
 function createCachedStreamResponse(xml: string): Response {
     const toolCallId = `cached-${Date.now()}`
@@ -175,9 +172,8 @@ async function handleChatRequest(req: Request): Promise<Response> {
 
     const { messages, xml, previousXml, sessionId } = await req.json()
 
-    // Get user IP for Langfuse tracking
+    // Get user ID for Langfuse tracking and quota
-    const forwardedFor = req.headers.get("x-forwarded-for")
+    const userId = getUserIdFromRequest(req)
-    const userId = forwardedFor?.split(",")[0]?.trim() || "anonymous"
 
     // Validate sessionId for Langfuse (must be string, max 200 chars)
     const validSessionId =
@@ -186,9 +182,12 @@ async function handleChatRequest(req: Request): Promise<Response> {
             : undefined
 
     // Extract user input text for Langfuse trace
-    const currentMessage = messages[messages.length - 1]
+    // Find the last USER message, not just the last message (which could be assistant in multi-step tool flows)
+    const lastUserMessage = [...messages]
+        .reverse()
+        .find((m: any) => m.role === "user")
     const userInputText =
-        currentMessage?.parts?.find((p: any) => p.type === "text")?.text || ""
+        lastUserMessage?.parts?.find((p: any) => p.type === "text")?.text || ""
 
     // Update Langfuse trace with input, session, and user
     setTraceInput({
@@ -197,6 +196,33 @@ async function handleChatRequest(req: Request): Promise<Response> {
         userId: userId,
     })
 
+    // === 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")
+    )
+
+    // Skip quota check if: quota disabled, user has own API key, or is anonymous
+    if (isQuotaEnabled() && !hasOwnApiKey && userId !== "anonymous") {
+        const quotaCheck = await checkAndIncrementRequest(userId, {
+            requests: Number(process.env.DAILY_REQUEST_LIMIT) || 10,
+            tokens: Number(process.env.DAILY_TOKEN_LIMIT) || 200000,
+            tpm: Number(process.env.TPM_LIMIT) || 20000,
+        })
+        if (!quotaCheck.allowed) {
+            return Response.json(
+                {
+                    error: quotaCheck.error,
+                    type: quotaCheck.type,
+                    used: quotaCheck.used,
+                    limit: quotaCheck.limit,
+                },
+                { status: 429 },
+            )
+        }
+    }
+    // === SERVER-SIDE QUOTA CHECK END ===
+
     // === FILE VALIDATION START ===
     const fileValidation = validateFileParts(messages)
     if (!fileValidation.valid) {
@@ -222,13 +248,39 @@ async function handleChatRequest(req: Request): Promise<Response> {
     // === CACHE CHECK END ===
 
     // Read client AI provider overrides from headers
+    const provider = req.headers.get("x-ai-provider")
+    let baseUrl = req.headers.get("x-ai-base-url")
+
+    // For EdgeOne provider, construct full URL from request origin
+    // because createOpenAI needs absolute URL, not relative path
+    if (provider === "edgeone" && !baseUrl) {
+        const origin = req.headers.get("origin") || new URL(req.url).origin
+        baseUrl = `${origin}/api/edgeai`
+    }
+
+    // Get cookie header for EdgeOne authentication (eo_token, eo_time)
+    const cookieHeader = req.headers.get("cookie")
+
     const clientOverrides = {
-        provider: req.headers.get("x-ai-provider"),
+        provider,
-        baseUrl: req.headers.get("x-ai-base-url"),
+        baseUrl,
         apiKey: req.headers.get("x-ai-api-key"),
         modelId: req.headers.get("x-ai-model"),
+        // AWS Bedrock credentials
+        awsAccessKeyId: req.headers.get("x-aws-access-key-id"),
+        awsSecretAccessKey: req.headers.get("x-aws-secret-access-key"),
+        awsRegion: req.headers.get("x-aws-region"),
+        awsSessionToken: req.headers.get("x-aws-session-token"),
+        // Pass cookies for EdgeOne Pages authentication
+        ...(provider === "edgeone" &&
+            cookieHeader && {
+                headers: { cookie: cookieHeader },
+            }),
     }
 
+    // Read minimal style preference from header
+    const minimalStyle = req.headers.get("x-minimal-style") === "true"
+
     // Get AI model with optional client overrides
     const { model, providerOptions, headers, modelId } =
         getAIModel(clientOverrides)
@@ -240,37 +292,70 @@ async function handleChatRequest(req: Request): Promise<Response> {
     )
 
     // Get the appropriate system prompt based on model (extended for Opus/Haiku 4.5)
-    const systemMessage = getSystemPrompt(modelId)
+    const systemMessage = getSystemPrompt(modelId, minimalStyle)
 
-    const lastMessage = messages[messages.length - 1]
+    // Extract file parts (images) from the last user message
-
-    // Extract text from the last message parts
-    const lastMessageText =
-        lastMessage.parts?.find((part: any) => part.type === "text")?.text || ""
-
-    // Extract file parts (images) from the last message
     const fileParts =
-        lastMessage.parts?.filter((part: any) => part.type === "file") || []
+        lastUserMessage?.parts?.filter((part: any) => part.type === "file") ||
+        []
+
+    // Check if user is sending images to a model that doesn't support them
+    // AI SDK silently drops unsupported parts, so we need to catch this early
+    if (fileParts.length > 0 && !supportsImageInput(modelId)) {
+        return Response.json(
+            {
+                error: `The model "${modelId}" does not support image input. Please use a vision-capable model (e.g., GPT-4o, Claude, Gemini) or remove the image.`,
+            },
+            { status: 400 },
+        )
+    }
 
     // User input only - XML is now in a separate cached system message
     const formattedUserInput = `User input:
 """md
-${lastMessageText}
+${userInputText}
 """`
 
     // Convert UIMessages to ModelMessages and add system message
-    const modelMessages = convertToModelMessages(messages)
+    const modelMessages = await convertToModelMessages(messages)
 
-    // Fix tool call inputs for Bedrock API (requires JSON objects, not strings)
+    // DEBUG: Log incoming messages structure
-    const fixedMessages = fixToolCallInputs(modelMessages)
+    console.log("[route.ts] Incoming messages count:", messages.length)
+    messages.forEach((msg: any, idx: number) => {
+        console.log(
+            `[route.ts] Message ${idx} role:`,
+            msg.role,
+            "parts count:",
+            msg.parts?.length,
+        )
+        if (msg.parts) {
+            msg.parts.forEach((part: any, partIdx: number) => {
+                if (
+                    part.type === "tool-invocation" ||
+                    part.type === "tool-result"
+                ) {
+                    console.log(`[route.ts]   Part ${partIdx}:`, {
+                        type: part.type,
+                        toolName: part.toolName,
+                        hasInput: !!part.input,
+                        inputType: typeof part.input,
+                        inputKeys:
+                            part.input && typeof part.input === "object"
+                                ? Object.keys(part.input)
+                                : null,
+                    })
+                }
+            })
+        }
+    })
 
     // Replace historical tool call XML with placeholders to reduce tokens
     // Disabled by default - some models (e.g. minimax) copy placeholders instead of generating XML
     const enableHistoryReplace =
         process.env.ENABLE_HISTORY_XML_REPLACE === "true"
     const placeholderMessages = enableHistoryReplace
-        ? replaceHistoricalToolInputs(fixedMessages)
+        ? replaceHistoricalToolInputs(modelMessages)
-        : fixedMessages
+        : modelMessages
 
     // Filter out messages with empty content arrays (Bedrock API rejects these)
     // This is a safety measure - ideally convertToModelMessages should handle all cases
@@ -279,6 +364,63 @@ ${lastMessageText}
             msg.content && Array.isArray(msg.content) && msg.content.length > 0,
     )
 
+    // Filter out tool-calls with invalid inputs (from failed repair or interrupted streaming)
+    // Bedrock API rejects messages where toolUse.input is not a valid JSON object
+    enhancedMessages = enhancedMessages
+        .map((msg: any) => {
+            if (msg.role !== "assistant" || !Array.isArray(msg.content)) {
+                return msg
+            }
+            const filteredContent = msg.content.filter((part: any) => {
+                if (part.type === "tool-call") {
+                    // Check if input is a valid object (not null, undefined, or empty)
+                    if (
+                        !part.input ||
+                        typeof part.input !== "object" ||
+                        Object.keys(part.input).length === 0
+                    ) {
+                        console.warn(
+                            `[route.ts] Filtering out tool-call with invalid input:`,
+                            { toolName: part.toolName, input: part.input },
+                        )
+                        return false
+                    }
+                }
+                return true
+            })
+            return { ...msg, content: filteredContent }
+        })
+        .filter((msg: any) => msg.content && msg.content.length > 0)
+
+    // DEBUG: Log modelMessages structure (what's being sent to AI)
+    console.log("[route.ts] Model messages count:", enhancedMessages.length)
+    enhancedMessages.forEach((msg: any, idx: number) => {
+        console.log(
+            `[route.ts] ModelMsg ${idx} role:`,
+            msg.role,
+            "content count:",
+            msg.content?.length,
+        )
+        if (msg.content) {
+            msg.content.forEach((part: any, partIdx: number) => {
+                if (part.type === "tool-call" || part.type === "tool-result") {
+                    console.log(`[route.ts]   Content ${partIdx}:`, {
+                        type: part.type,
+                        toolName: part.toolName,
+                        hasInput: !!part.input,
+                        inputType: typeof part.input,
+                        inputValue:
+                            part.input === undefined
+                                ? "undefined"
+                                : part.input === null
+                                  ? "null"
+                                  : "object",
+                    })
+                }
+            })
+        }
+    })
+
     // Update the last message with user input only (XML moved to separate cached system message)
     if (enhancedMessages.length >= 1) {
         const lastModelMessage = enhancedMessages[enhancedMessages.length - 1]
@@ -354,7 +496,71 @@ ${lastMessageText}
 
     const result = streamText({
         model,
+        ...(process.env.MAX_OUTPUT_TOKENS && {
+            maxOutputTokens: parseInt(process.env.MAX_OUTPUT_TOKENS, 10),
+        }),
         stopWhen: stepCountIs(5),
+        // Repair truncated tool calls when maxOutputTokens is reached mid-JSON
+        experimental_repairToolCall: async ({ toolCall, error }) => {
+            // DEBUG: Log what we're trying to repair
+            console.log(`[repairToolCall] Tool: ${toolCall.toolName}`)
+            console.log(
+                `[repairToolCall] Error: ${error.name} - ${error.message}`,
+            )
+            console.log(`[repairToolCall] Input type: ${typeof toolCall.input}`)
+            console.log(`[repairToolCall] Input value:`, toolCall.input)
+
+            // Only attempt repair for invalid tool input (broken JSON from truncation)
+            if (
+                error instanceof InvalidToolInputError ||
+                error.name === "AI_InvalidToolInputError"
+            ) {
+                try {
+                    // Pre-process to fix common LLM JSON errors that jsonrepair can't handle
+                    let inputToRepair = toolCall.input
+                    if (typeof inputToRepair === "string") {
+                        // Fix `:=` instead of `: ` (LLM sometimes generates this)
+                        inputToRepair = inputToRepair.replace(/:=/g, ": ")
+                        // Fix `= "` instead of `: "`
+                        inputToRepair = inputToRepair.replace(/=\s*"/g, ': "')
+                    }
+                    // Use jsonrepair to fix truncated JSON
+                    const repairedInput = jsonrepair(inputToRepair)
+                    console.log(
+                        `[repairToolCall] Repaired truncated JSON for tool: ${toolCall.toolName}`,
+                    )
+                    return { ...toolCall, input: repairedInput }
+                } catch (repairError) {
+                    console.warn(
+                        `[repairToolCall] Failed to repair JSON for tool: ${toolCall.toolName}`,
+                        repairError,
+                    )
+                    // Return a placeholder input to avoid API errors in multi-step
+                    // The tool will fail gracefully on client side
+                    if (toolCall.toolName === "edit_diagram") {
+                        return {
+                            ...toolCall,
+                            input: {
+                                operations: [],
+                                _error: "JSON repair failed - no operations to apply",
+                            },
+                        }
+                    }
+                    if (toolCall.toolName === "display_diagram") {
+                        return {
+                            ...toolCall,
+                            input: {
+                                xml: "",
+                                _error: "JSON repair failed - empty diagram",
+                            },
+                        }
+                    }
+                    return null
+                }
+            }
+            // Don't attempt to repair other errors (like NoSuchToolError)
+            return null
+        },
         messages: allMessages,
         ...(providerOptions && { providerOptions }), // This now includes all reasoning configs
         ...(headers && { headers }),
@@ -365,72 +571,56 @@ ${lastMessageText}
                 userId,
             }),
         }),
-        // Repair malformed tool calls (model sometimes generates invalid JSON with unescaped quotes)
+        onFinish: ({ text, totalUsage }) => {
-        experimental_repairToolCall: async ({ toolCall }) => {
+            // AI SDK 6 telemetry auto-reports token usage on its spans
-            // The toolCall.input contains the raw JSON string that failed to parse
+            setTraceOutput(text)
-            const rawJson =
-                typeof toolCall.input === "string" ? toolCall.input : null
 
-            if (rawJson) {
+            // Record token usage for server-side quota tracking (if enabled)
-                try {
+            // Use totalUsage (cumulative across all steps) instead of usage (final step only)
-                    // Fix unescaped quotes: x="520" should be x=\"520\"
+            // Include all 4 token types: input, output, cache read, cache write
-                    const fixed = rawJson.replace(
+            if (
-                        /([a-zA-Z])="(\d+)"/g,
+                isQuotaEnabled() &&
-                        '$1=\\"$2\\"',
+                !hasOwnApiKey &&
-                    )
+                userId !== "anonymous" &&
-                    const parsed = JSON.parse(fixed)
+                totalUsage
-                    return {
+            ) {
-                        type: "tool-call" as const,
+                const totalTokens =
-                        toolCallId: toolCall.toolCallId,
+                    (totalUsage.inputTokens || 0) +
-                        toolName: toolCall.toolName,
+                    (totalUsage.outputTokens || 0) +
-                        input: JSON.stringify(parsed),
+                    (totalUsage.cachedInputTokens || 0) +
-                    }
+                    (totalUsage.inputTokenDetails?.cacheWriteTokens || 0)
-                } catch {
+                recordTokenUsage(userId, totalTokens)
-                    // Repair failed, return null
-                }
             }
-            return null
-        },
-        onFinish: ({ text, usage }) => {
-            // Pass usage to Langfuse (Bedrock streaming doesn't auto-report tokens to telemetry)
-            setTraceOutput(text, {
-                promptTokens: usage?.inputTokens,
-                completionTokens: usage?.outputTokens,
-            })
         },
         tools: {
             // Client-side tool that will be executed on the client
             display_diagram: {
-                description: `Display a diagram on draw.io. Pass the XML content inside <root> tags.
+                description: `Display a diagram on draw.io. Pass ONLY the mxCell elements - wrapper tags and root cells are added automatically.
 
 VALIDATION RULES (XML will be rejected if violated):
-1. All mxCell elements must be DIRECT children of <root> - never nested
+1. Generate ONLY mxCell elements - NO wrapper tags (<mxfile>, <mxGraphModel>, <root>)
-2. Every mxCell needs a unique id
+2. Do NOT include root cells (id="0" or id="1") - they are added automatically
-3. Every mxCell (except id="0") needs a valid parent attribute
+3. All mxCell elements must be siblings - never nested
-4. Edge source/target must reference existing cell IDs
+4. Every mxCell needs a unique id (start from "2")
-5. Escape special chars in values: &lt; &gt; &amp; &quot;
+5. Every mxCell needs a valid parent attribute (use "1" for top-level)
-6. Always start with: <mxCell id="0"/><mxCell id="1" parent="0"/>
+6. Escape special chars in values: &lt; &gt; &amp; &quot;
 
-Example with swimlanes and edges (note: all mxCells are siblings):
+Example (generate ONLY this - no wrapper tags):
-<root>
+<mxCell id="lane1" value="Frontend" style="swimlane;" vertex="1" parent="1">
-  <mxCell id="0"/>
+  <mxGeometry x="40" y="40" width="200" height="200" as="geometry"/>
-  <mxCell id="1" parent="0"/>
+</mxCell>
-  <mxCell id="lane1" value="Frontend" style="swimlane;" vertex="1" parent="1">
+<mxCell id="step1" value="Step 1" style="rounded=1;" vertex="1" parent="lane1">
-    <mxGeometry x="40" y="40" width="200" height="200" as="geometry"/>
+  <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/>
-  </mxCell>
+</mxCell>
-  <mxCell id="step1" value="Step 1" style="rounded=1;" vertex="1" parent="lane1">
+<mxCell id="lane2" value="Backend" style="swimlane;" vertex="1" parent="1">
-    <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/>
+  <mxGeometry x="280" y="40" width="200" height="200" as="geometry"/>
-  </mxCell>
+</mxCell>
-  <mxCell id="lane2" value="Backend" style="swimlane;" vertex="1" parent="1">
+<mxCell id="step2" value="Step 2" style="rounded=1;" vertex="1" parent="lane2">
-    <mxGeometry x="280" y="40" width="200" height="200" as="geometry"/>
+  <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/>
-  </mxCell>
+</mxCell>
-  <mxCell id="step2" value="Step 2" style="rounded=1;" vertex="1" parent="lane2">
+<mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;" edge="1" parent="1" source="step1" target="step2">
-    <mxGeometry x="20" y="60" width="160" height="40" as="geometry"/>
+  <mxGeometry relative="1" as="geometry"/>
-  </mxCell>
+</mxCell>
-  <mxCell id="edge1" style="edgeStyle=orthogonalEdgeStyle;endArrow=classic;" edge="1" parent="1" source="step1" target="step2">
-    <mxGeometry relative="1" as="geometry"/>
-  </mxCell>
-</root>
 
 Notes:
 - For AWS diagrams, use **AWS 2025 icons**.
@@ -443,35 +633,130 @@ Notes:
                 }),
             },
             edit_diagram: {
-                description: `Edit specific parts of the current diagram by replacing exact line matches. Use this tool to make targeted fixes without regenerating the entire XML.
+                description: `Edit the current diagram by ID-based operations (update/add/delete cells).
-CRITICAL: Copy-paste the EXACT search pattern from the "Current diagram XML" in system context. Do NOT reorder attributes or reformat - the attribute order in draw.io XML varies and you MUST match it exactly.
-IMPORTANT: Keep edits concise:
-- COPY the exact mxCell line from the current XML (attribute order matters!)
-- Only include the lines that are changing, plus 1-2 surrounding lines for context if needed
-- Break large changes into multiple smaller edits
-- Each search must contain complete lines (never truncate mid-line)
-- First match only - be specific enough to target the right element
 
-⚠️ JSON ESCAPING: Every " inside string values MUST be escaped as \\". Example: x=\\"100\\" y=\\"200\\" - BOTH quotes need backslashes!`,
+Operations:
+- update: Replace an existing cell by its id. Provide cell_id and complete new_xml.
+- add: Add a new cell. Provide cell_id (new unique id) and new_xml.
+- delete: Remove a cell. Cascade is automatic: children AND edges (source/target) are auto-deleted. Only specify ONE cell_id.
+
+For update/add, new_xml must be a complete mxCell element including mxGeometry.
+
+⚠️ JSON ESCAPING: Every " inside new_xml MUST be escaped as \\". Example: id=\\"5\\" value=\\"Label\\"
+
+Example - Add a rectangle:
+{"operations": [{"operation": "add", "cell_id": "rect-1", "new_xml": "<mxCell id=\\"rect-1\\" value=\\"Hello\\" style=\\"rounded=0;\\" vertex=\\"1\\" parent=\\"1\\"><mxGeometry x=\\"100\\" y=\\"100\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/></mxCell>"}]}
+
+Example - Delete container (children & edges auto-deleted):
+{"operations": [{"operation": "delete", "cell_id": "2"}]}`,
                 inputSchema: z.object({
-                    edits: z
+                    operations: z
                         .array(
                             z.object({
-                                search: z
+                                operation: z
+                                    .enum(["update", "add", "delete"])
+                                    .describe(
+                                        "Operation to perform: add, update, or delete",
+                                    ),
+                                cell_id: z
                                     .string()
                                     .describe(
-                                        "EXACT lines copied from current XML (preserve attribute order!)",
+                                        "The id of the mxCell. Must match the id attribute in new_xml.",
                                     ),
-                                replace: z
+                                new_xml: z
                                     .string()
-                                    .describe("Replacement lines"),
+                                    .optional()
+                                    .describe(
+                                        "Complete mxCell XML element (required for update/add)",
+                                    ),
                             }),
                         )
+                        .describe("Array of operations to apply"),
+                }),
+            },
+            append_diagram: {
+                description: `Continue generating diagram XML when previous display_diagram output was truncated due to length limits.
+
+WHEN TO USE: Only call this tool after display_diagram was truncated (you'll see an error message about truncation).
+
+CRITICAL INSTRUCTIONS:
+1. Do NOT include any wrapper tags - just continue the mxCell elements
+2. Continue from EXACTLY where your previous output stopped
+3. Complete the remaining mxCell elements
+4. If still truncated, call append_diagram again with the next fragment
+
+Example: If previous output ended with '<mxCell id="x" style="rounded=1', continue with ';" vertex="1">...' and complete the remaining elements.`,
+                inputSchema: z.object({
+                    xml: z
+                        .string()
                         .describe(
-                            "Array of search/replace pairs to apply sequentially",
+                            "Continuation XML fragment to append (NO wrapper tags)",
                         ),
                 }),
             },
+            get_shape_library: {
+                description: `Get draw.io shape/icon library documentation with style syntax and shape names.
+
+Available libraries:
+- Cloud: aws4, azure2, gcp2, alibaba_cloud, openstack, salesforce
+- Networking: cisco19, network, kubernetes, vvd, rack
+- Business: bpmn, lean_mapping
+- General: flowchart, basic, arrows2, infographic, sitemap
+- UI/Mockups: android
+- Enterprise: citrix, sap, mscae, atlassian
+- Engineering: fluidpower, electrical, pid, cabinets, floorplan
+- Icons: webicons
+
+Call this tool to get shape names and usage syntax for a specific library.`,
+                inputSchema: z.object({
+                    library: z
+                        .string()
+                        .describe(
+                            "Library name (e.g., 'aws4', 'kubernetes', 'flowchart')",
+                        ),
+                }),
+                execute: async ({ library }) => {
+                    // Sanitize input - prevent path traversal attacks
+                    const sanitizedLibrary = library
+                        .toLowerCase()
+                        .replace(/[^a-z0-9_-]/g, "")
+
+                    if (sanitizedLibrary !== library.toLowerCase()) {
+                        return `Invalid library name "${library}". Use only letters, numbers, underscores, and hyphens.`
+                    }
+
+                    const baseDir = path.join(
+                        process.cwd(),
+                        "docs/shape-libraries",
+                    )
+                    const filePath = path.join(
+                        baseDir,
+                        `${sanitizedLibrary}.md`,
+                    )
+
+                    // Verify path stays within expected directory
+                    const resolvedPath = path.resolve(filePath)
+                    if (!resolvedPath.startsWith(path.resolve(baseDir))) {
+                        return `Invalid library path.`
+                    }
+
+                    try {
+                        const content = await fs.readFile(filePath, "utf-8")
+                        return content
+                    } catch (error) {
+                        if (
+                            (error as NodeJS.ErrnoException).code === "ENOENT"
+                        ) {
+                            return `Library "${library}" not found. Available: aws4, azure2, gcp2, alibaba_cloud, cisco19, kubernetes, network, bpmn, flowchart, basic, arrows2, vvd, salesforce, citrix, sap, mscae, atlassian, fluidpower, electrical, pid, cabinets, floorplan, webicons, infographic, sitemap, android, lean_mapping, openstack, rack`
+                        }
+                        console.error(
+                            `[get_shape_library] Error loading "${library}":`,
+                            error,
+                        )
+                        return `Error loading library "${library}". Please try again.`
+                    }
+                },
+            },
         },
         ...(process.env.TEMPERATURE !== undefined && {
             temperature: parseFloat(process.env.TEMPERATURE),
@@ -483,19 +768,10 @@ IMPORTANT: Keep edits concise:
         messageMetadata: ({ part }) => {
             if (part.type === "finish") {
                 const usage = (part as any).totalUsage
-                if (!usage) {
+                // AI SDK 6 provides totalTokens directly
-                    console.warn(
-                        "[messageMetadata] No usage data in finish part",
-                    )
-                    return undefined
-                }
-                // Total input = non-cached + cached (these are separate counts)
-                // Note: cacheWriteInputTokens is not available on finish part
-                const totalInputTokens =
-                    (usage.inputTokens ?? 0) + (usage.cachedInputTokens ?? 0)
                 return {
-                    inputTokens: totalInputTokens,
+                    totalTokens: usage?.totalTokens ?? 0,
-                    outputTokens: usage.outputTokens ?? 0,
+                    finishReason: (part as any).finishReason,
                 }
             }
             return undefined

app/api/chat/xml_guide.md

@@ -81,16 +81,15 @@ Contains the actual diagram data.
 
 ## Root Cell Container: `<root>`
 
-Contains all the cells in the diagram.
+Contains all the cells in the diagram. **Note:** When generating diagrams, you only need to provide the mxCell elements - the root container and root cells (id="0", id="1") are added automatically.
 
-**Example:**
+**Internal structure (auto-generated):**
 
 ```xml
 <root>
-<mxCell id="0"/>
+  <mxCell id="0"/>           <!-- Auto-added -->
-<mxCell id="1" parent="0"/>
+  <mxCell id="1" parent="0"/> <!-- Auto-added -->
-
+  <!-- Your mxCell elements go here (start from id="2") -->
-  <!-- Other cells go here -->
 </root>
 ```
 
@@ -203,15 +202,15 @@ Draw.io files contain two special cells that are always present:
 1.  **Root Cell** (id = "0"): The parent of all cells
 2.  **Default Parent Cell** (id = "1", parent = "0"): The default layer and parent for most cells
 
-## Tips for Manually Creating Draw.io XML
+## Tips for Creating Draw.io XML
 
-1.  Start with the basic structure (`mxfile`, `diagram`, `mxGraphModel`, `root`)
+1.  **Generate ONLY mxCell elements** - wrapper tags and root cells (id="0", id="1") are added automatically
-2.  Always include the two special cells (id = "0" and id = "1")
+2.  Start IDs from "2" (id="0" and id="1" are reserved for root cells)
 3.  Assign unique and sequential IDs to all cells
-4.  Define parent relationships correctly
+4.  Define parent relationships correctly (use parent="1" for top-level shapes)
 5.  Use `mxGeometry` elements to position shapes
 6.  For connectors, specify `source` and `target` attributes
-7.  **CRITICAL: All mxCell elements must be DIRECT children of `<root>`. NEVER nest mxCell inside another mxCell.**
+7.  **CRITICAL: All mxCell elements must be siblings. NEVER nest mxCell inside another mxCell.**
 
 ## Common Patterns
 

app/api/log-feedback/route.ts

@@ -1,6 +1,7 @@
 import { randomUUID } from "crypto"
 import { z } from "zod"
 import { getLangfuseClient } from "@/lib/langfuse"
+import { getUserIdFromRequest } from "@/lib/user-id"
 
 const feedbackSchema = z.object({
     messageId: z.string().min(1).max(200),
@@ -27,9 +28,13 @@ export async function POST(req: Request) {
 
     const { messageId, feedback, sessionId } = data
 
-    // Get user IP for tracking
+    // Skip logging if no sessionId - prevents attaching to wrong user's trace
-    const forwardedFor = req.headers.get("x-forwarded-for")
+    if (!sessionId) {
-    const userId = forwardedFor?.split(",")[0]?.trim() || "anonymous"
+        return Response.json({ success: true, logged: false })
+    }
+
+    // Get user ID for tracking
+    const userId = getUserIdFromRequest(req)
 
     try {
         // Find the most recent chat trace for this session to attach the score to

app/api/log-save/route.ts

@@ -27,6 +27,11 @@ export async function POST(req: Request) {
 
     const { filename, format, sessionId } = data
 
+    // Skip logging if no sessionId - prevents attaching to wrong user's trace
+    if (!sessionId) {
+        return Response.json({ success: true, logged: false })
+    }
+
     try {
         const timestamp = new Date().toISOString()
 

app/api/validate-model/route.ts

@@ -0,0 +1,317 @@
+import { createAmazonBedrock } from "@ai-sdk/amazon-bedrock"
+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 { 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"
+
+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
+    baseUrl?: string
+    modelId: string
+    // AWS Bedrock specific
+    awsAccessKeyId?: string
+    awsSecretAccessKey?: string
+    awsRegion?: string
+}
+
+export async function POST(req: Request) {
+    try {
+        const body: ValidateRequest = await req.json()
+        const {
+            provider,
+            apiKey,
+            baseUrl,
+            modelId,
+            awsAccessKeyId,
+            awsSecretAccessKey,
+            awsRegion,
+        } = body
+
+        if (!provider || !modelId) {
+            return NextResponse.json(
+                { valid: false, error: "Provider and model ID are required" },
+                { status: 400 },
+            )
+        }
+
+        // SECURITY: Block SSRF attacks via custom baseUrl
+        if (baseUrl && isPrivateUrl(baseUrl)) {
+            return NextResponse.json(
+                { valid: false, error: "Invalid base URL" },
+                { status: 400 },
+            )
+        }
+
+        // Validate credentials based on provider
+        if (provider === "bedrock") {
+            if (!awsAccessKeyId || !awsSecretAccessKey || !awsRegion) {
+                return NextResponse.json(
+                    {
+                        valid: false,
+                        error: "AWS credentials (Access Key ID, Secret Access Key, Region) are required",
+                    },
+                    { status: 400 },
+                )
+            }
+        } else if (provider !== "ollama" && provider !== "edgeone" && !apiKey) {
+            return NextResponse.json(
+                { valid: false, error: "API key is required" },
+                { status: 400 },
+            )
+        }
+
+        let model: any
+
+        switch (provider) {
+            case "openai": {
+                const openai = createOpenAI({
+                    apiKey,
+                    ...(baseUrl && { baseURL: baseUrl }),
+                })
+                model = openai.chat(modelId)
+                break
+            }
+
+            case "anthropic": {
+                const anthropic = createAnthropic({
+                    apiKey,
+                    baseURL: baseUrl || "https://api.anthropic.com/v1",
+                })
+                model = anthropic(modelId)
+                break
+            }
+
+            case "google": {
+                const google = createGoogleGenerativeAI({
+                    apiKey,
+                    ...(baseUrl && { baseURL: baseUrl }),
+                })
+                model = google(modelId)
+                break
+            }
+
+            case "azure": {
+                const azure = createOpenAI({
+                    apiKey,
+                    baseURL: baseUrl,
+                })
+                model = azure.chat(modelId)
+                break
+            }
+
+            case "bedrock": {
+                const bedrock = createAmazonBedrock({
+                    accessKeyId: awsAccessKeyId,
+                    secretAccessKey: awsSecretAccessKey,
+                    region: awsRegion,
+                })
+                model = bedrock(modelId)
+                break
+            }
+
+            case "openrouter": {
+                const openrouter = createOpenRouter({
+                    apiKey,
+                    ...(baseUrl && { baseURL: baseUrl }),
+                })
+                model = openrouter(modelId)
+                break
+            }
+
+            case "deepseek": {
+                if (baseUrl || apiKey) {
+                    const ds = createDeepSeek({
+                        apiKey,
+                        ...(baseUrl && { baseURL: baseUrl }),
+                    })
+                    model = ds(modelId)
+                } else {
+                    model = deepseek(modelId)
+                }
+                break
+            }
+
+            case "siliconflow": {
+                const sf = createOpenAI({
+                    apiKey,
+                    baseURL: baseUrl || "https://api.siliconflow.com/v1",
+                })
+                model = sf.chat(modelId)
+                break
+            }
+
+            case "ollama": {
+                const ollama = createOllama({
+                    baseURL: baseUrl || "http://localhost:11434",
+                })
+                model = ollama(modelId)
+                break
+            }
+
+            case "gateway": {
+                const gw = createGateway({
+                    apiKey,
+                    ...(baseUrl && { baseURL: baseUrl }),
+                })
+                model = gw(modelId)
+                break
+            }
+
+            case "edgeone": {
+                // EdgeOne uses OpenAI-compatible API via Edge Functions
+                // Need to pass cookies for EdgeOne Pages authentication
+                const cookieHeader = req.headers.get("cookie") || ""
+                const edgeone = createOpenAI({
+                    apiKey: "edgeone", // EdgeOne doesn't require API key
+                    baseURL: baseUrl || "/api/edgeai",
+                    headers: {
+                        cookie: cookieHeader,
+                    },
+                })
+                model = edgeone.chat(modelId)
+                break
+            }
+
+            case "sglang": {
+                // SGLang is OpenAI-compatible
+                const sglang = createOpenAI({
+                    apiKey: apiKey || "not-needed",
+                    baseURL: baseUrl || "http://127.0.0.1:8000/v1",
+                })
+                model = sglang.chat(modelId)
+                break
+            }
+
+            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)
+                break
+            }
+
+            default:
+                return NextResponse.json(
+                    { valid: false, error: `Unknown provider: ${provider}` },
+                    { status: 400 },
+                )
+        }
+
+        // Make a minimal test request
+        const startTime = Date.now()
+        await generateText({
+            model,
+            prompt: "Say 'OK'",
+            maxOutputTokens: 20,
+        })
+        const responseTime = Date.now() - startTime
+
+        return NextResponse.json({
+            valid: true,
+            responseTime,
+        })
+    } catch (error) {
+        console.error("[validate-model] Error:", error)
+
+        let errorMessage = "Validation failed"
+        if (error instanceof Error) {
+            // Extract meaningful error message
+            if (
+                error.message.includes("401") ||
+                error.message.includes("Unauthorized")
+            ) {
+                errorMessage = "Invalid API key"
+            } else if (
+                error.message.includes("404") ||
+                error.message.includes("not found")
+            ) {
+                errorMessage = "Model not found"
+            } else if (
+                error.message.includes("429") ||
+                error.message.includes("rate limit")
+            ) {
+                errorMessage = "Rate limited - try again later"
+            } else if (error.message.includes("ECONNREFUSED")) {
+                errorMessage = "Cannot connect to server"
+            } else {
+                errorMessage = error.message.slice(0, 100)
+            }
+        }
+
+        return NextResponse.json(
+            { valid: false, error: errorMessage },
+            { status: 200 }, // Return 200 so client can read error message
+        )
+    }
+}

app/globals.css

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

app/layout.tsx

@@ -1,127 +0,0 @@
-import { GoogleAnalytics } from "@next/third-parties/google"
-import { Analytics } from "@vercel/analytics/react"
-import type { Metadata, Viewport } from "next"
-import { JetBrains_Mono, Plus_Jakarta_Sans } from "next/font/google"
-import { DiagramProvider } from "@/contexts/diagram-context"
-
-import "./globals.css"
-
-const plusJakarta = Plus_Jakarta_Sans({
-    variable: "--font-sans",
-    subsets: ["latin"],
-    weight: ["400", "500", "600", "700"],
-})
-
-const jetbrainsMono = JetBrains_Mono({
-    variable: "--font-mono",
-    subsets: ["latin"],
-    weight: ["400", "500"],
-})
-
-export const viewport: Viewport = {
-    width: "device-width",
-    initialScale: 1,
-    maximumScale: 1,
-    userScalable: false,
-}
-
-export const metadata: Metadata = {
-    title: "Next AI Draw.io - AI-Powered Diagram Generator",
-    description:
-        "Create AWS architecture diagrams, flowcharts, and technical diagrams using AI. Free online tool integrating draw.io with AI assistance for professional diagram creation.",
-    keywords: [
-        "AI diagram generator",
-        "AWS architecture",
-        "flowchart creator",
-        "draw.io",
-        "AI drawing tool",
-        "technical diagrams",
-        "diagram automation",
-        "free diagram generator",
-        "online diagram maker",
-    ],
-    authors: [{ name: "Next AI Draw.io" }],
-    creator: "Next AI Draw.io",
-    publisher: "Next AI Draw.io",
-    metadataBase: new URL("https://next-ai-drawio.jiang.jp"),
-    openGraph: {
-        title: "Next AI Draw.io - AI Diagram Generator",
-        description:
-            "Create professional diagrams with AI assistance. Supports AWS architecture, flowcharts, and more.",
-        type: "website",
-        url: "https://next-ai-drawio.jiang.jp",
-        siteName: "Next AI Draw.io",
-        locale: "en_US",
-        images: [
-            {
-                url: "/architecture.png",
-                width: 1200,
-                height: 630,
-                alt: "Next AI Draw.io - AI-powered diagram creation tool",
-            },
-        ],
-    },
-    twitter: {
-        card: "summary_large_image",
-        title: "Next AI Draw.io - AI Diagram Generator",
-        description:
-            "Create professional diagrams with AI assistance. Free, no login required.",
-        images: ["/architecture.png"],
-    },
-    robots: {
-        index: true,
-        follow: true,
-        googleBot: {
-            index: true,
-            follow: true,
-            "max-video-preview": -1,
-            "max-image-preview": "large",
-            "max-snippet": -1,
-        },
-    },
-    icons: {
-        icon: "/favicon.ico",
-    },
-}
-
-export default function RootLayout({
-    children,
-}: Readonly<{
-    children: React.ReactNode
-}>) {
-    const jsonLd = {
-        "@context": "https://schema.org",
-        "@type": "SoftwareApplication",
-        name: "Next AI Draw.io",
-        applicationCategory: "DesignApplication",
-        operatingSystem: "Web Browser",
-        description:
-            "AI-powered diagram generator with targeted XML editing capabilities that integrates with draw.io for creating AWS architecture diagrams, flowcharts, and technical diagrams. Features diagram history, multi-provider AI support, and real-time collaboration.",
-        url: "https://next-ai-drawio.jiang.jp",
-        offers: {
-            "@type": "Offer",
-            price: "0",
-            priceCurrency: "USD",
-        },
-    }
-
-    return (
-        <html lang="en" suppressHydrationWarning>
-            <head>
-                <script
-                    type="application/ld+json"
-                    dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
-                />
-            </head>
-            <body
-                className={`${plusJakarta.variable} ${jetbrainsMono.variable} antialiased`}
-            >
-                <DiagramProvider>{children}</DiagramProvider>
-                <Analytics />
-            </body>
-            {process.env.NEXT_PUBLIC_GA_ID && (
-                <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />
-            )}
-        </html>
-    )
-}

app/manifest.ts

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

components/ai-elements/model-selector.tsx

@@ -0,0 +1,170 @@
+import { Cloud } from "lucide-react"
+import type { ComponentProps, ReactNode } from "react"
+import {
+    Command,
+    CommandDialog,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList,
+    CommandSeparator,
+    CommandShortcut,
+} from "@/components/ui/command"
+import {
+    Dialog,
+    DialogContent,
+    DialogTitle,
+    DialogTrigger,
+} from "@/components/ui/dialog"
+import { cn } from "@/lib/utils"
+
+export type ModelSelectorProps = ComponentProps<typeof Dialog>
+
+export const ModelSelector = (props: ModelSelectorProps) => (
+    <Dialog {...props} />
+)
+
+export type ModelSelectorTriggerProps = ComponentProps<typeof DialogTrigger>
+
+export const ModelSelectorTrigger = (props: ModelSelectorTriggerProps) => (
+    <DialogTrigger {...props} />
+)
+
+export type ModelSelectorContentProps = ComponentProps<typeof DialogContent> & {
+    title?: ReactNode
+}
+
+export const ModelSelectorContent = ({
+    className,
+    children,
+    title = "Model Selector",
+    ...props
+}: ModelSelectorContentProps) => (
+    <DialogContent className={cn("p-0", className)} {...props}>
+        <DialogTitle className="sr-only">{title}</DialogTitle>
+        <Command className="**:data-[slot=command-input-wrapper]:h-auto">
+            {children}
+        </Command>
+    </DialogContent>
+)
+
+export type ModelSelectorDialogProps = ComponentProps<typeof CommandDialog>
+
+export const ModelSelectorDialog = (props: ModelSelectorDialogProps) => (
+    <CommandDialog {...props} />
+)
+
+export type ModelSelectorInputProps = ComponentProps<typeof CommandInput>
+
+export const ModelSelectorInput = ({
+    className,
+    ...props
+}: ModelSelectorInputProps) => (
+    <CommandInput className={cn("h-auto py-3.5", className)} {...props} />
+)
+
+export type ModelSelectorListProps = ComponentProps<typeof CommandList>
+
+export const ModelSelectorList = ({
+    className,
+    ...props
+}: ModelSelectorListProps) => (
+    <div className="relative">
+        <CommandList
+            className={cn(
+                // Hide scrollbar on all platforms
+                "[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
+                className,
+            )}
+            {...props}
+        />
+        {/* Bottom shadow indicator for scrollable content */}
+        <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-12 bg-gradient-to-t from-muted/80 via-muted/40 to-transparent" />
+    </div>
+)
+
+export type ModelSelectorEmptyProps = ComponentProps<typeof CommandEmpty>
+
+export const ModelSelectorEmpty = (props: ModelSelectorEmptyProps) => (
+    <CommandEmpty {...props} />
+)
+
+export type ModelSelectorGroupProps = ComponentProps<typeof CommandGroup>
+
+export const ModelSelectorGroup = (props: ModelSelectorGroupProps) => (
+    <CommandGroup {...props} />
+)
+
+export type ModelSelectorItemProps = ComponentProps<typeof CommandItem>
+
+export const ModelSelectorItem = (props: ModelSelectorItemProps) => (
+    <CommandItem {...props} />
+)
+
+export type ModelSelectorShortcutProps = ComponentProps<typeof CommandShortcut>
+
+export const ModelSelectorShortcut = (props: ModelSelectorShortcutProps) => (
+    <CommandShortcut {...props} />
+)
+
+export type ModelSelectorSeparatorProps = ComponentProps<
+    typeof CommandSeparator
+>
+
+export const ModelSelectorSeparator = (props: ModelSelectorSeparatorProps) => (
+    <CommandSeparator {...props} />
+)
+
+export type ModelSelectorLogoProps = Omit<
+    ComponentProps<"img">,
+    "src" | "alt"
+> & {
+    provider: string
+}
+
+export const ModelSelectorLogo = ({
+    provider,
+    className,
+    ...props
+}: ModelSelectorLogoProps) => {
+    // Use Lucide icon for bedrock since models.dev doesn't have a good AWS icon
+    if (provider === "amazon-bedrock") {
+        return <Cloud className={cn("size-4", className)} />
+    }
+
+    return (
+        <img
+            {...props}
+            alt={`${provider} logo`}
+            className={cn("size-4 dark:invert", className)}
+            height={16}
+            src={`https://models.dev/logos/${provider}.svg`}
+            width={16}
+        />
+    )
+}
+
+export type ModelSelectorLogoGroupProps = ComponentProps<"div">
+
+export const ModelSelectorLogoGroup = ({
+    className,
+    ...props
+}: ModelSelectorLogoGroupProps) => (
+    <div
+        className={cn(
+            "-space-x-1 flex shrink-0 items-center [&>img]:rounded-full [&>img]:bg-background [&>img]:p-px [&>img]:ring-1 dark:[&>img]:bg-foreground",
+            className,
+        )}
+        {...props}
+    />
+)
+
+export type ModelSelectorNameProps = ComponentProps<"span">
+
+export const ModelSelectorName = ({
+    className,
+    ...props
+}: ModelSelectorNameProps) => (
+    <span className={cn("flex-1 truncate text-left", className)} {...props} />
+)

components/chat-example-panel.tsx

@@ -1,6 +1,15 @@
 "use client"
 
-import { Cloud, FileText, GitBranch, Palette, Zap } from "lucide-react"
+import {
+    Cloud,
+    FileText,
+    GitBranch,
+    Palette,
+    Terminal,
+    Zap,
+} from "lucide-react"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { getAssetUrl } from "@/lib/base-path"
 
 interface ExampleCardProps {
     icon: React.ReactNode
@@ -17,6 +26,8 @@ function ExampleCard({
     onClick,
     isNew,
 }: ExampleCardProps) {
+    const dict = useDictionary()
+
     return (
         <button
             onClick={onClick}
@@ -43,7 +54,7 @@ function ExampleCard({
                         </h3>
                         {isNew && (
                             <span className="px-1.5 py-0.5 text-[10px] font-semibold bg-primary text-primary-foreground rounded">
-                                NEW
+                                {dict.common.new}
                             </span>
                         )}
                     </div>
@@ -63,16 +74,18 @@ export default function ExamplePanel({
     setInput: (input: string) => void
     setFiles: (files: File[]) => void
 }) {
+    const dict = useDictionary()
+
     const handleReplicateFlowchart = async () => {
         setInput("Replicate this flowchart.")
 
         try {
-            const response = await fetch("/example.png")
+            const response = await fetch(getAssetUrl("/example.png"))
             const blob = await response.blob()
             const file = new File([blob], "example.png", { type: "image/png" })
             setFiles([file])
         } catch (error) {
-            console.error("Error loading example image:", error)
+            console.error(dict.errors.failedToLoadExample, error)
         }
     }
 
@@ -80,14 +93,14 @@ export default function ExamplePanel({
         setInput("Replicate this in aws style")
 
         try {
-            const response = await fetch("/architecture.png")
+            const response = await fetch(getAssetUrl("/architecture.png"))
             const blob = await response.blob()
             const file = new File([blob], "architecture.png", {
                 type: "image/png",
             })
             setFiles([file])
         } catch (error) {
-            console.error("Error loading architecture image:", error)
+            console.error(dict.errors.failedToLoadExample, error)
         }
     }
 
@@ -95,49 +108,75 @@ export default function ExamplePanel({
         setInput("Summarize this paper as a diagram")
 
         try {
-            const response = await fetch("/chain-of-thought.txt")
+            const response = await fetch(getAssetUrl("/chain-of-thought.txt"))
             const blob = await response.blob()
             const file = new File([blob], "chain-of-thought.txt", {
                 type: "text/plain",
             })
             setFiles([file])
         } catch (error) {
-            console.error("Error loading text file:", error)
+            console.error(dict.errors.failedToLoadExample, error)
         }
     }
 
     return (
         <div className="py-6 px-2 animate-fade-in">
+            {/* MCP Server Notice */}
+            <a
+                href="https://github.com/DayuanJiang/next-ai-draw-io/tree/main/packages/mcp-server"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block mb-4 p-3 rounded-xl bg-gradient-to-r from-purple-500/10 to-blue-500/10 border border-purple-500/20 hover:border-purple-500/40 transition-colors group"
+            >
+                <div className="flex items-center gap-3">
+                    <div className="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center shrink-0">
+                        <Terminal className="w-4 h-4 text-purple-500" />
+                    </div>
+                    <div className="min-w-0">
+                        <div className="flex items-center gap-2">
+                            <span className="text-sm font-medium text-foreground group-hover:text-purple-500 transition-colors">
+                                {dict.examples.mcpServer}
+                            </span>
+                            <span className="px-1.5 py-0.5 text-[10px] font-semibold bg-purple-500 text-white rounded">
+                                {dict.examples.preview}
+                            </span>
+                        </div>
+                        <p className="text-xs text-muted-foreground">
+                            {dict.examples.mcpDescription}
+                        </p>
+                    </div>
+                </div>
+            </a>
+
             {/* Welcome section */}
             <div className="text-center mb-6">
                 <h2 className="text-lg font-semibold text-foreground mb-2">
-                    Create diagrams with AI
+                    {dict.examples.title}
                 </h2>
                 <p className="text-sm text-muted-foreground max-w-xs mx-auto">
-                    Describe what you want to create or upload an image to
+                    {dict.examples.subtitle}
-                    replicate
                 </p>
             </div>
 
             {/* Examples grid */}
             <div className="space-y-3">
                 <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider px-1">
-                    Quick Examples
+                    {dict.examples.quickExamples}
                 </p>
 
                 <div className="grid gap-2">
                     <ExampleCard
                         icon={<FileText className="w-4 h-4 text-primary" />}
-                        title="Paper to Diagram"
+                        title={dict.examples.paperToDiagram}
-                        description="Upload .pdf, .txt, .md, .json, .csv, .py, .js, .ts and more"
+                        description={dict.examples.paperDescription}
                         onClick={handlePdfExample}
                         isNew
                     />
 
                     <ExampleCard
                         icon={<Zap className="w-4 h-4 text-primary" />}
-                        title="Animated Diagram"
+                        title={dict.examples.animatedDiagram}
-                        description="Draw a transformer architecture with animated connectors"
+                        description={dict.examples.animatedDescription}
                         onClick={() => {
                             setInput(
                                 "Give me a **animated connector** diagram of transformer's architecture",
@@ -148,22 +187,22 @@ export default function ExamplePanel({
 
                     <ExampleCard
                         icon={<Cloud className="w-4 h-4 text-primary" />}
-                        title="AWS Architecture"
+                        title={dict.examples.awsArchitecture}
-                        description="Create a cloud architecture diagram with AWS icons"
+                        description={dict.examples.awsDescription}
                         onClick={handleReplicateArchitecture}
                     />
 
                     <ExampleCard
                         icon={<GitBranch className="w-4 h-4 text-primary" />}
-                        title="Replicate Flowchart"
+                        title={dict.examples.replicateFlowchart}
-                        description="Upload and replicate an existing flowchart"
+                        description={dict.examples.replicateDescription}
                         onClick={handleReplicateFlowchart}
                     />
 
                     <ExampleCard
                         icon={<Palette className="w-4 h-4 text-primary" />}
-                        title="Creative Drawing"
+                        title={dict.examples.creativeDrawing}
-                        description="Draw something fun and creative"
+                        description={dict.examples.creativeDescription}
                         onClick={() => {
                             setInput("Draw a cat for me")
                             setFiles([])
@@ -172,7 +211,7 @@ export default function ExamplePanel({
                 </div>
 
                 <p className="text-[11px] text-muted-foreground/60 text-center mt-4">
-                    Examples are cached for instant response
+                    {dict.examples.cachedNote}
                 </p>
             </div>
         </div>

components/chat-input.tsx

@@ -14,12 +14,17 @@ import { toast } from "sonner"
 import { ButtonWithTooltip } from "@/components/button-with-tooltip"
 import { ErrorToast } from "@/components/error-toast"
 import { HistoryDialog } from "@/components/history-dialog"
+import { ModelSelector } from "@/components/model-selector"
 import { ResetWarningModal } from "@/components/reset-warning-modal"
 import { SaveDialog } from "@/components/save-dialog"
+
 import { Button } from "@/components/ui/button"
 import { Textarea } from "@/components/ui/textarea"
 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 type { FlattenedModel } from "@/lib/types/model-config"
 import { FilePreviewList } from "./file-preview-list"
 
 const MAX_IMAGE_SIZE = 2 * 1024 * 1024 // 2MB
@@ -52,6 +57,7 @@ interface ValidationResult {
 function validateFiles(
     newFiles: File[],
     existingCount: number,
+    dict: any,
 ): ValidationResult {
     const errors: string[] = []
     const validFiles: File[] = []
@@ -59,17 +65,23 @@ function validateFiles(
     const availableSlots = MAX_FILES - existingCount
 
     if (availableSlots <= 0) {
-        errors.push(`Maximum ${MAX_FILES} files allowed`)
+        errors.push(formatMessage(dict.errors.maxFiles, { max: MAX_FILES }))
         return { validFiles, errors }
     }
 
     for (const file of newFiles) {
         if (validFiles.length >= availableSlots) {
-            errors.push(`Only ${availableSlots} more file(s) allowed`)
+            errors.push(
+                formatMessage(dict.errors.onlyMoreAllowed, {
+                    slots: availableSlots,
+                }),
+            )
             break
         }
         if (!isValidFileType(file)) {
-            errors.push(`"${file.name}" is not a supported file type`)
+            errors.push(
+                formatMessage(dict.errors.unsupportedType, { name: file.name }),
+            )
             continue
         }
         // Only check size for images (PDFs/text files are extracted client-side, so file size doesn't matter)
@@ -77,7 +89,11 @@ function validateFiles(
         if (!isExtractedFile && file.size > MAX_IMAGE_SIZE) {
             const maxSizeMB = MAX_IMAGE_SIZE / 1024 / 1024
             errors.push(
-                `"${file.name}" is ${formatFileSize(file.size)} (exceeds ${maxSizeMB}MB)`,
+                formatMessage(dict.errors.fileExceeds, {
+                    name: file.name,
+                    size: formatFileSize(file.size),
+                    max: maxSizeMB,
+                }),
             )
         } else {
             validFiles.push(file)
@@ -87,7 +103,7 @@ function validateFiles(
     return { validFiles, errors }
 }
 
-function showValidationErrors(errors: string[]) {
+function showValidationErrors(errors: string[], dict: any) {
     if (errors.length === 0) return
 
     if (errors.length === 1) {
@@ -98,14 +114,20 @@ function showValidationErrors(errors: string[]) {
         showErrorToast(
             <div className="flex flex-col gap-1">
                 <span className="font-medium">
-                    {errors.length} files rejected:
+                    {formatMessage(dict.errors.filesRejected, {
+                        count: errors.length,
+                    })}
                 </span>
                 <ul className="text-muted-foreground text-xs list-disc list-inside">
                     {errors.slice(0, 3).map((err) => (
                         <li key={err}>{err}</li>
                     ))}
                     {errors.length > 3 && (
-                        <li>...and {errors.length - 3} more</li>
+                        <li>
+                            {formatMessage(dict.errors.andMore, {
+                                count: errors.length - 3,
+                            })}
+                        </li>
                     )}
                 </ul>
             </div>,
@@ -125,10 +147,15 @@ interface ChatInputProps {
         File,
         { text: string; charCount: number; isExtracting: boolean }
     >
-    showHistory?: boolean
+
-    onToggleHistory?: (show: boolean) => void
     sessionId?: string
     error?: Error | null
+    // Model selector props
+    models?: FlattenedModel[]
+    selectedModelId?: string
+    onModelSelect?: (modelId: string | undefined) => void
+    showUnvalidatedModels?: boolean
+    onConfigureModels?: () => void
 }
 
 export function ChatInput({
@@ -140,18 +167,23 @@ export function ChatInput({
     files = [],
     onFileChange = () => {},
     pdfData = new Map(),
-    showHistory = false,
-    onToggleHistory = () => {},
     sessionId,
     error = null,
+    models = [],
+    selectedModelId,
+    onModelSelect = () => {},
+    showUnvalidatedModels = false,
+    onConfigureModels = () => {},
 }: ChatInputProps) {
+    const dict = useDictionary()
     const { diagramHistory, saveDiagramToFile } = useDiagram()
+
     const textareaRef = useRef<HTMLTextAreaElement>(null)
     const fileInputRef = useRef<HTMLInputElement>(null)
     const [isDragging, setIsDragging] = useState(false)
     const [showClearDialog, setShowClearDialog] = useState(false)
+    const [showHistory, setShowHistory] = useState(false)
     const [showSaveDialog, setShowSaveDialog] = useState(false)
-
     // Allow retry when there's an error (even if status is still "streaming" or "submitted")
     const isDisabled =
         (status === "streaming" || status === "submitted") && !error
@@ -163,7 +195,6 @@ export function ChatInput({
             textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`
         }
     }, [])
-
     // Handle programmatic input changes (e.g., setInput("") after form submission)
     useEffect(() => {
         adjustTextareaHeight()
@@ -210,8 +241,9 @@ export function ChatInput({
             const { validFiles, errors } = validateFiles(
                 imageFiles,
                 files.length,
+                dict,
             )
-            showValidationErrors(errors)
+            showValidationErrors(errors, dict)
             if (validFiles.length > 0) {
                 onFileChange([...files, ...validFiles])
             }
@@ -220,12 +252,16 @@ export function ChatInput({
 
     const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         const newFiles = Array.from(e.target.files || [])
-        const { validFiles, errors } = validateFiles(newFiles, files.length)
+        const { validFiles, errors } = validateFiles(
-        showValidationErrors(errors)
+            newFiles,
+            files.length,
+            dict,
+        )
+        showValidationErrors(errors, dict)
         if (validFiles.length > 0) {
             onFileChange([...files, ...validFiles])
         }
-        // Reset input so same file can be selected again
+
         if (fileInputRef.current) {
             fileInputRef.current.value = ""
         }
@@ -269,8 +305,9 @@ export function ChatInput({
         const { validFiles, errors } = validateFiles(
             supportedFiles,
             files.length,
+            dict,
         )
-        showValidationErrors(errors)
+        showValidationErrors(errors, dict)
         if (validFiles.length > 0) {
             onFileChange([...files, ...validFiles])
         }
@@ -303,8 +340,6 @@ export function ChatInput({
                     />
                 </div>
             )}
-
-            {/* Input container */}
             <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}
@@ -312,22 +347,20 @@ export function ChatInput({
                     onChange={handleChange}
                     onKeyDown={handleKeyDown}
                     onPaste={handlePaste}
-                    placeholder="Describe your diagram or upload a file..."
+                    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"
                 />
 
-                {/* Action bar */}
                 <div className="flex items-center justify-between px-3 py-2 border-t border-border/50">
-                    {/* Left actions */}
+                    <div className="flex items-center gap-1 overflow-x-hidden">
-                    <div className="flex items-center gap-1">
                         <ButtonWithTooltip
                             type="button"
                             variant="ghost"
                             size="sm"
                             onClick={() => setShowClearDialog(true)}
-                            tooltipContent="Clear conversation"
+                            tooltipContent={dict.chat.clearConversation}
                             className="h-8 w-8 p-0 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
                         >
                             <Trash2 className="h-4 w-4" />
@@ -338,81 +371,74 @@ export function ChatInput({
                             onOpenChange={setShowClearDialog}
                             onClear={handleClear}
                         />
-
-                        <HistoryDialog
-                            showHistory={showHistory}
-                            onToggleHistory={onToggleHistory}
-                        />
                     </div>
 
-                    {/* Right actions */}
+                    <div className="flex items-center gap-1 overflow-hidden justify-end">
-                    <div className="flex items-center gap-1">
+                        <div className="flex items-center gap-1 overflow-x-hidden">
-                        <ButtonWithTooltip
+                            <ButtonWithTooltip
-                            type="button"
+                                type="button"
-                            variant="ghost"
+                                variant="ghost"
-                            size="sm"
+                                size="sm"
-                            onClick={() => onToggleHistory(true)}
+                                onClick={() => setShowHistory(true)}
-                            disabled={isDisabled || diagramHistory.length === 0}
+                                disabled={
-                            tooltipContent="Diagram history"
+                                    isDisabled || diagramHistory.length === 0
-                            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                                }
-                        >
+                                tooltipContent={dict.chat.diagramHistory}
-                            <History className="h-4 w-4" />
+                                className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                        </ButtonWithTooltip>
+                            >
+                                <History className="h-4 w-4" />
+                            </ButtonWithTooltip>
 
-                        <ButtonWithTooltip
+                            <ButtonWithTooltip
-                            type="button"
+                                type="button"
-                            variant="ghost"
+                                variant="ghost"
-                            size="sm"
+                                size="sm"
-                            onClick={() => setShowSaveDialog(true)}
+                                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}
+                            />
+                        </div>
+                        <ModelSelector
+                            models={models}
+                            selectedModelId={selectedModelId}
+                            onSelect={onModelSelect}
+                            onConfigure={onConfigureModels}
                             disabled={isDisabled}
-                            tooltipContent="Save diagram"
+                            showUnvalidatedModels={showUnvalidatedModels}
-                            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                        >
-                            <Download className="h-4 w-4" />
-                        </ButtonWithTooltip>
-
-                        <SaveDialog
-                            open={showSaveDialog}
-                            onOpenChange={setShowSaveDialog}
-                            onSave={(filename, format) =>
-                                saveDiagramToFile(filename, format, sessionId)
-                            }
-                            defaultFilename={`diagram-${new Date()
-                                .toISOString()
-                                .slice(0, 10)}`}
                         />
-
-                        <ButtonWithTooltip
-                            type="button"
-                            variant="ghost"
-                            size="sm"
-                            onClick={triggerFileInput}
-                            disabled={isDisabled}
-                            tooltipContent="Upload file (image, PDF, text)"
-                            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}
-                        />
-
                         <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 ? "Sending..." : "Send message"
+                                isDisabled ? dict.chat.sending : dict.chat.send
                             }
                         >
                             {isDisabled ? (
@@ -420,13 +446,27 @@ export function ChatInput({
                             ) : (
                                 <>
                                     <Send className="h-4 w-4 mr-1.5" />
-                                    Send
+                                    {dict.chat.send}
                                 </>
                             )}
                         </Button>
                     </div>
                 </div>
             </div>
+            <HistoryDialog
+                showHistory={showHistory}
+                onToggleHistory={setShowHistory}
+            />
+            <SaveDialog
+                open={showSaveDialog}
+                onOpenChange={setShowSaveDialog}
+                onSave={(filename, format) =>
+                    saveDiagramToFile(filename, format, sessionId)
+                }
+                defaultFilename={`diagram-${new Date()
+                    .toISOString()
+                    .slice(0, 10)}`}
+            />
         </form>
     )
 }

components/chat-message-display.tsx

@@ -10,34 +10,57 @@ import {
     Cpu,
     FileCode,
     FileText,
-    Minus,
     Pencil,
-    Plus,
     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"
+import { toast } from "sonner"
 import {
     Reasoning,
     ReasoningContent,
     ReasoningTrigger,
 } from "@/components/ai-elements/reasoning"
 import { ScrollArea } from "@/components/ui/scroll-area"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { getApiEndpoint } from "@/lib/base-path"
 import {
+    applyDiagramOperations,
     convertToLegalXml,
+    extractCompleteMxCells,
+    isMxCellXmlComplete,
     replaceNodes,
-    validateMxCellStructure,
+    validateAndFixXml,
 } from "@/lib/utils"
 import ExamplePanel from "./chat-example-panel"
 import { CodeBlock } from "./code-block"
 
-interface EditPair {
+interface DiagramOperation {
-    search: string
+    operation: "update" | "add" | "delete"
-    replace: string
+    cell_id: string
+    new_xml?: string
+}
+
+// Helper to extract complete operations from streaming input
+function getCompleteOperations(
+    operations: DiagramOperation[] | undefined,
+): DiagramOperation[] {
+    if (!operations || !Array.isArray(operations)) return []
+    return operations.filter(
+        (op) =>
+            op &&
+            typeof op.operation === "string" &&
+            ["update", "add", "delete"].includes(op.operation) &&
+            typeof op.cell_id === "string" &&
+            op.cell_id.length > 0 &&
+            // delete doesn't need new_xml, update/add do
+            (op.operation === "delete" || typeof op.new_xml === "string"),
+    )
 }
 
 // Tool part interface for type safety
@@ -45,49 +68,44 @@ interface ToolPartLike {
     type: string
     toolCallId: string
     state?: string
-    input?: { xml?: string; edits?: EditPair[] } & Record<string, unknown>
+    input?: {
+        xml?: string
+        operations?: DiagramOperation[]
+    } & Record<string, unknown>
     output?: string
 }
 
-function EditDiffDisplay({ edits }: { edits: EditPair[] }) {
+function OperationsDisplay({ operations }: { operations: DiagramOperation[] }) {
     return (
         <div className="space-y-3">
-            {edits.map((edit, index) => (
+            {operations.map((op, index) => (
                 <div
-                    key={`${(edit.search || "").slice(0, 50)}-${(edit.replace || "").slice(0, 50)}-${index}`}
+                    key={`${op.operation}-${op.cell_id}-${index}`}
                     className="rounded-lg border border-border/50 overflow-hidden bg-background/50"
                 >
                     <div className="px-3 py-1.5 bg-muted/40 border-b border-border/30 flex items-center gap-2">
-                        <span className="text-xs font-medium text-muted-foreground">
+                        <span
-                            Change {index + 1}
+                            className={`text-[10px] font-medium uppercase tracking-wide ${
+                                op.operation === "delete"
+                                    ? "text-red-600"
+                                    : op.operation === "add"
+                                      ? "text-green-600"
+                                      : "text-blue-600"
+                            }`}
+                        >
+                            {op.operation}
+                        </span>
+                        <span className="text-xs text-muted-foreground">
+                            cell_id: {op.cell_id}
                         </span>
                     </div>
-                    <div className="divide-y divide-border/30">
+                    {op.new_xml && (
-                        {/* Search (old) */}
                         <div className="px-3 py-2">
-                            <div className="flex items-center gap-1.5 mb-1.5">
+                            <pre className="text-[11px] font-mono text-foreground/80 bg-muted/30 rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap break-all">
-                                <Minus className="w-3 h-3 text-red-500" />
+                                {op.new_xml}
-                                <span className="text-[10px] font-medium text-red-600 uppercase tracking-wide">
-                                    Remove
-                                </span>
-                            </div>
-                            <pre className="text-[11px] font-mono text-red-700 bg-red-50 rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap break-all">
-                                {edit.search}
                             </pre>
                         </div>
-                        {/* Replace (new) */}
+                    )}
-                        <div className="px-3 py-2">
-                            <div className="flex items-center gap-1.5 mb-1.5">
-                                <Plus className="w-3 h-3 text-green-500" />
-                                <span className="text-[10px] font-medium text-green-600 uppercase tracking-wide">
-                                    Add
-                                </span>
-                            </div>
-                            <pre className="text-[11px] font-mono text-green-700 bg-green-50 rounded px-2 py-1.5 overflow-x-auto whitespace-pre-wrap break-all">
-                                {edit.replace}
-                            </pre>
-                        </div>
-                    </div>
                 </div>
             ))}
         </div>
@@ -169,6 +187,8 @@ interface ChatMessageDisplayProps {
     messages: UIMessage[]
     setInput: (input: string) => void
     setFiles: (files: File[]) => void
+    processedToolCallsRef: MutableRefObject<Set<string>>
+    editDiagramOriginalXmlRef: MutableRefObject<Map<string, string>>
     sessionId?: string
     onRegenerate?: (messageIndex: number) => void
     onEditMessage?: (messageIndex: number, newText: string) => void
@@ -179,18 +199,43 @@ export function ChatMessageDisplay({
     messages,
     setInput,
     setFiles,
+    processedToolCallsRef,
+    editDiagramOriginalXmlRef,
     sessionId,
     onRegenerate,
     onEditMessage,
     status = "idle",
 }: ChatMessageDisplayProps) {
+    const dict = useDictionary()
     const { chartXML, loadDiagram: onDisplayChart } = useDiagram()
     const messagesEndRef = useRef<HTMLDivElement>(null)
     const previousXML = useRef<string>("")
-    const processedToolCalls = useRef<Set<string>>(new Set())
+    const processedToolCalls = processedToolCallsRef
+    // Track the last processed XML per toolCallId to skip redundant processing during streaming
+    const lastProcessedXmlRef = useRef<Map<string, string>>(new Map())
+    // Debounce streaming diagram updates - store pending XML and timeout
+    const pendingXmlRef = useRef<string | null>(null)
+    const debounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+        null,
+    )
+    const STREAMING_DEBOUNCE_MS = 150 // Only update diagram every 150ms during streaming
+    // Refs for edit_diagram streaming
+    const pendingEditRef = useRef<{
+        operations: DiagramOperation[]
+        toolCallId: string
+    } | null>(null)
+    const editDebounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+        null,
+    )
     const [expandedTools, setExpandedTools] = useState<Record<string, boolean>>(
         {},
     )
+    const [copiedToolCallId, setCopiedToolCallId] = useState<string | null>(
+        null,
+    )
+    const [copyFailedToolCallId, setCopyFailedToolCallId] = useState<
+        string | null
+    >(null)
     const [copiedMessageId, setCopiedMessageId] = useState<string | null>(null)
     const [copyFailedMessageId, setCopyFailedMessageId] = useState<
         string | null
@@ -206,16 +251,61 @@ export function ChatMessageDisplay({
         Record<string, boolean>
     >({})
 
-    const copyMessageToClipboard = async (messageId: string, text: string) => {
+    const setCopyState = (
+        messageId: string,
+        isToolCall: boolean,
+        isSuccess: boolean,
+    ) => {
+        if (isSuccess) {
+            if (isToolCall) {
+                setCopiedToolCallId(messageId)
+                setTimeout(() => setCopiedToolCallId(null), 2000)
+            } else {
+                setCopiedMessageId(messageId)
+                setTimeout(() => setCopiedMessageId(null), 2000)
+            }
+        } else {
+            if (isToolCall) {
+                setCopyFailedToolCallId(messageId)
+                setTimeout(() => setCopyFailedToolCallId(null), 2000)
+            } else {
+                setCopyFailedMessageId(messageId)
+                setTimeout(() => setCopyFailedMessageId(null), 2000)
+            }
+        }
+    }
+
+    const copyMessageToClipboard = async (
+        messageId: string,
+        text: string,
+        isToolCall = false,
+    ) => {
         try {
             await navigator.clipboard.writeText(text)
-
+            setCopyState(messageId, isToolCall, true)
-            setCopiedMessageId(messageId)
-            setTimeout(() => setCopiedMessageId(null), 2000)
         } catch (err) {
-            console.error("Failed to copy message:", err)
+            // Fallback for non-secure contexts (HTTP) or permission denied
-            setCopyFailedMessageId(messageId)
+            const textarea = document.createElement("textarea")
-            setTimeout(() => setCopyFailedMessageId(null), 2000)
+            textarea.value = text
+            textarea.style.position = "fixed"
+            textarea.style.left = "-9999px"
+            textarea.style.opacity = "0"
+            document.body.appendChild(textarea)
+
+            try {
+                textarea.select()
+                const success = document.execCommand("copy")
+                if (!success) {
+                    throw new Error("Copy command failed")
+                }
+                setCopyState(messageId, isToolCall, true)
+            } catch (fallbackErr) {
+                console.error("Failed to copy message:", fallbackErr)
+                toast.error(dict.chat.failedToCopyDetail)
+                setCopyState(messageId, isToolCall, false)
+            } finally {
+                document.body.removeChild(textarea)
+            }
         }
     }
 
@@ -233,7 +323,7 @@ export function ChatMessageDisplay({
         setFeedback((prev) => ({ ...prev, [messageId]: value }))
 
         try {
-            await fetch("/api/log-feedback", {
+            await fetch(getApiEndpoint("/api/log-feedback"), {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({
@@ -243,32 +333,114 @@ export function ChatMessageDisplay({
                 }),
             })
         } catch (error) {
-            console.warn("Failed to log feedback:", error)
+            console.error("Failed to log feedback:", error)
+            toast.error(dict.errors.failedToRecordFeedback)
+            // Revert optimistic UI update
+            setFeedback((prev) => {
+                const next = { ...prev }
+                delete next[messageId]
+                return next
+            })
         }
     }
 
     const handleDisplayChart = useCallback(
-        (xml: string) => {
+        (xml: string, showToast = false) => {
-            const currentXml = xml || ""
+            let currentXml = xml || ""
+            const startTime = performance.now()
+
+            // During streaming (showToast=false), extract only complete mxCell elements
+            // This allows progressive rendering even with partial/incomplete trailing XML
+            if (!showToast) {
+                const completeCells = extractCompleteMxCells(currentXml)
+                if (!completeCells) {
+                    return
+                }
+                currentXml = completeCells
+            }
+
             const convertedXml = convertToLegalXml(currentXml)
             if (convertedXml !== previousXML.current) {
-                // If chartXML is empty, create a default mxfile structure to use with replaceNodes
+                // Parse and validate XML BEFORE calling replaceNodes
-                // This ensures the XML is properly wrapped in mxfile/diagram/mxGraphModel format
+                const parser = new DOMParser()
-                const baseXML =
+                // Wrap in root element for parsing multiple mxCell elements
-                    chartXML ||
+                const testDoc = parser.parseFromString(
-                    `<mxfile><diagram name="Page-1" id="page-1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel></diagram></mxfile>`
+                    `<root>${convertedXml}</root>`,
-                const replacedXML = replaceNodes(baseXML, convertedXml)
+                    "text/xml",
+                )
+                const parseError = testDoc.querySelector("parsererror")
 
-                const validationError = validateMxCellStructure(replacedXML)
+                if (parseError) {
-                if (!validationError) {
+                    // Use console.warn instead of console.error to avoid triggering
-                    previousXML.current = convertedXml
+                    // Next.js dev mode error overlay for expected streaming states
-                    // Skip validation in loadDiagram since we already validated above
+                    // (partial XML during streaming is normal and will be fixed by subsequent updates)
-                    onDisplayChart(replacedXML, true)
+                    if (showToast) {
-                } else {
+                        // Only log as error and show toast if this is the final XML
-                    console.log(
+                        console.error(
-                        "[ChatMessageDisplay] XML validation failed:",
+                            "[ChatMessageDisplay] Malformed XML detected in final output",
-                        validationError,
+                        )
+                        toast.error(dict.errors.malformedXml)
+                    }
+                    return // Skip this update
+                }
+
+                try {
+                    // If chartXML is empty, create a default mxfile structure to use with replaceNodes
+                    // This ensures the XML is properly wrapped in mxfile/diagram/mxGraphModel format
+                    const baseXML =
+                        chartXML ||
+                        `<mxfile><diagram name="Page-1" id="page-1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel></diagram></mxfile>`
+                    const replacedXML = replaceNodes(baseXML, convertedXml)
+
+                    const xmlProcessTime = performance.now() - startTime
+
+                    // During streaming (showToast=false), skip heavy validation for lower latency
+                    // The quick DOM parse check above catches malformed XML
+                    // Full validation runs on final output (showToast=true)
+                    if (!showToast) {
+                        previousXML.current = convertedXml
+                        const loadStartTime = performance.now()
+                        onDisplayChart(replacedXML, true)
+                        console.log(
+                            `[Streaming] XML processing: ${xmlProcessTime.toFixed(1)}ms, drawio load: ${(performance.now() - loadStartTime).toFixed(1)}ms`,
+                        )
+                        return
+                    }
+
+                    // Final output: run full validation and auto-fix
+                    const validation = validateAndFixXml(replacedXML)
+                    if (validation.valid) {
+                        previousXML.current = convertedXml
+                        // Use fixed XML if available, otherwise use original
+                        const xmlToLoad = validation.fixed || replacedXML
+                        if (validation.fixes.length > 0) {
+                            console.log(
+                                "[ChatMessageDisplay] Auto-fixed XML issues:",
+                                validation.fixes,
+                            )
+                        }
+                        // Skip validation in loadDiagram since we already validated above
+                        const loadStartTime = performance.now()
+                        onDisplayChart(xmlToLoad, true)
+                        console.log(
+                            `[Final] XML processing: ${xmlProcessTime.toFixed(1)}ms, validation+load: ${(performance.now() - loadStartTime).toFixed(1)}ms`,
+                        )
+                    } else {
+                        console.error(
+                            "[ChatMessageDisplay] XML validation failed:",
+                            validation.error,
+                        )
+                        toast.error(dict.errors.validationFailed)
+                    }
+                } catch (error) {
+                    console.error(
+                        "[ChatMessageDisplay] Error processing XML:",
+                        error,
                     )
+                    // Only show toast if this is the final XML (not during streaming)
+                    if (showToast) {
+                        toast.error(dict.errors.failedToProcess)
+                    }
                 }
             }
         },
@@ -288,7 +460,12 @@ export function ChatMessageDisplay({
     }, [editingMessageId])
 
     useEffect(() => {
-        messages.forEach((message) => {
+        // Only process the last message for streaming performance
+        // Previous messages are already processed and won't change
+        const messagesToProcess =
+            messages.length > 0 ? [messages[messages.length - 1]] : []
+
+        messagesToProcess.forEach((message) => {
             if (message.parts) {
                 message.parts.forEach((part) => {
                     if (part.type?.startsWith("tool-")) {
@@ -307,30 +484,194 @@ export function ChatMessageDisplay({
                             input?.xml
                         ) {
                             const xml = input.xml as string
+
+                            // Skip if XML hasn't changed since last processing
+                            const lastXml =
+                                lastProcessedXmlRef.current.get(toolCallId)
+                            if (lastXml === xml) {
+                                return // Skip redundant processing
+                            }
+
                             if (
                                 state === "input-streaming" ||
                                 state === "input-available"
                             ) {
-                                handleDisplayChart(xml)
+                                // Debounce streaming updates - queue the XML and process after delay
+                                pendingXmlRef.current = xml
+
+                                if (!debounceTimeoutRef.current) {
+                                    // No pending timeout - set one up
+                                    debounceTimeoutRef.current = setTimeout(
+                                        () => {
+                                            const pendingXml =
+                                                pendingXmlRef.current
+                                            debounceTimeoutRef.current = null
+                                            pendingXmlRef.current = null
+                                            if (pendingXml) {
+                                                handleDisplayChart(
+                                                    pendingXml,
+                                                    false,
+                                                )
+                                                lastProcessedXmlRef.current.set(
+                                                    toolCallId,
+                                                    pendingXml,
+                                                )
+                                            }
+                                        },
+                                        STREAMING_DEBOUNCE_MS,
+                                    )
+                                }
                             } else if (
                                 state === "output-available" &&
                                 !processedToolCalls.current.has(toolCallId)
                             ) {
-                                handleDisplayChart(xml)
+                                // Final output - process immediately (clear any pending debounce)
+                                if (debounceTimeoutRef.current) {
+                                    clearTimeout(debounceTimeoutRef.current)
+                                    debounceTimeoutRef.current = null
+                                    pendingXmlRef.current = null
+                                }
+                                // Show toast only if final XML is malformed
+                                handleDisplayChart(xml, true)
                                 processedToolCalls.current.add(toolCallId)
+                                // Clean up the ref entry - tool is complete, no longer needed
+                                lastProcessedXmlRef.current.delete(toolCallId)
+                            }
+                        }
+
+                        // Handle edit_diagram streaming - apply operations incrementally for preview
+                        // Uses shared editDiagramOriginalXmlRef to coordinate with tool handler
+                        if (
+                            part.type === "tool-edit_diagram" &&
+                            input?.operations
+                        ) {
+                            const completeOps = getCompleteOperations(
+                                input.operations as DiagramOperation[],
+                            )
+
+                            if (completeOps.length === 0) return
+
+                            // Capture original XML when streaming starts (store in shared ref)
+                            if (
+                                !editDiagramOriginalXmlRef.current.has(
+                                    toolCallId,
+                                )
+                            ) {
+                                if (!chartXML) {
+                                    console.warn(
+                                        "[edit_diagram streaming] No chart XML available",
+                                    )
+                                    return
+                                }
+                                editDiagramOriginalXmlRef.current.set(
+                                    toolCallId,
+                                    chartXML,
+                                )
+                            }
+
+                            const originalXml =
+                                editDiagramOriginalXmlRef.current.get(
+                                    toolCallId,
+                                )
+                            if (!originalXml) return
+
+                            // Skip if no change from last processed state
+                            const lastCount = lastProcessedXmlRef.current.get(
+                                toolCallId + "-opCount",
+                            )
+                            if (lastCount === String(completeOps.length)) return
+
+                            if (
+                                state === "input-streaming" ||
+                                state === "input-available"
+                            ) {
+                                // Queue the operations for debounced processing
+                                pendingEditRef.current = {
+                                    operations: completeOps,
+                                    toolCallId,
+                                }
+
+                                if (!editDebounceTimeoutRef.current) {
+                                    editDebounceTimeoutRef.current = setTimeout(
+                                        () => {
+                                            const pending =
+                                                pendingEditRef.current
+                                            editDebounceTimeoutRef.current =
+                                                null
+                                            pendingEditRef.current = null
+
+                                            if (pending) {
+                                                const origXml =
+                                                    editDiagramOriginalXmlRef.current.get(
+                                                        pending.toolCallId,
+                                                    )
+                                                if (!origXml) return
+
+                                                try {
+                                                    const {
+                                                        result: editedXml,
+                                                    } = applyDiagramOperations(
+                                                        origXml,
+                                                        pending.operations,
+                                                    )
+                                                    handleDisplayChart(
+                                                        editedXml,
+                                                        false,
+                                                    )
+                                                    lastProcessedXmlRef.current.set(
+                                                        pending.toolCallId +
+                                                            "-opCount",
+                                                        String(
+                                                            pending.operations
+                                                                .length,
+                                                        ),
+                                                    )
+                                                } catch (e) {
+                                                    console.warn(
+                                                        `[edit_diagram streaming] Operation failed:`,
+                                                        e instanceof Error
+                                                            ? e.message
+                                                            : e,
+                                                    )
+                                                }
+                                            }
+                                        },
+                                        STREAMING_DEBOUNCE_MS,
+                                    )
+                                }
+                            } else if (
+                                state === "output-available" &&
+                                !processedToolCalls.current.has(toolCallId)
+                            ) {
+                                // Final state - cleanup streaming refs (tool handler does final application)
+                                if (editDebounceTimeoutRef.current) {
+                                    clearTimeout(editDebounceTimeoutRef.current)
+                                    editDebounceTimeoutRef.current = null
+                                }
+                                lastProcessedXmlRef.current.delete(
+                                    toolCallId + "-opCount",
+                                )
+                                processedToolCalls.current.add(toolCallId)
+                                // Note: Don't delete editDiagramOriginalXmlRef here - tool handler needs it
                             }
                         }
                     }
                 })
             }
         })
-    }, [messages, handleDisplayChart])
+
+        // NOTE: Don't cleanup debounce timeouts here!
+        // The cleanup runs on every re-render (when messages changes),
+        // which would cancel the timeout before it fires.
+        // Let the timeouts complete naturally - they're harmless if component unmounts.
+    }, [messages, handleDisplayChart, chartXML])
 
     const renderToolPart = (part: ToolPartLike) => {
         const callId = part.toolCallId
         const { state, input, output } = part
         const isExpanded = expandedTools[callId] ?? true
         const toolName = part.type?.replace("tool-", "")
+        const isCopied = copiedToolCallId === callId
 
         const toggleExpanded = () => {
             setExpandedTools((prev) => ({
@@ -345,11 +686,42 @@ export function ChatMessageDisplay({
                     return "Generate Diagram"
                 case "edit_diagram":
                     return "Edit Diagram"
+                case "get_shape_library":
+                    return "Get Shape Library"
                 default:
                     return name
             }
         }
 
+        const handleCopy = () => {
+            let textToCopy = ""
+
+            if (input && typeof input === "object") {
+                if (input.xml) {
+                    textToCopy = input.xml
+                } else if (
+                    input.operations &&
+                    Array.isArray(input.operations)
+                ) {
+                    textToCopy = JSON.stringify(input.operations, null, 2)
+                } else if (Object.keys(input).length > 0) {
+                    textToCopy = JSON.stringify(input, null, 2)
+                }
+            }
+
+            if (
+                output &&
+                toolName === "get_shape_library" &&
+                typeof output === "string"
+            ) {
+                textToCopy = output
+            }
+
+            if (textToCopy) {
+                copyMessageToClipboard(callId, textToCopy, true)
+            }
+        }
+
         return (
             <div
                 key={callId}
@@ -369,15 +741,50 @@ export function ChatMessageDisplay({
                             <div className="h-4 w-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
                         )}
                         {state === "output-available" && (
-                            <span className="text-xs font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
+                            <>
-                                Complete
+                                <span className="text-xs font-medium text-green-600 bg-green-50 px-2 py-0.5 rounded-full">
-                            </span>
+                                    {dict.tools.complete}
-                        )}
+                                </span>
-                        {state === "output-error" && (
+                                {isExpanded && (
-                            <span className="text-xs font-medium text-red-600 bg-red-50 px-2 py-0.5 rounded-full">
+                                    <button
-                                Error
+                                        type="button"
-                            </span>
+                                        onClick={handleCopy}
+                                        className="p-1 rounded hover:bg-muted transition-colors"
+                                        title={
+                                            copiedToolCallId === callId
+                                                ? dict.chat.copied
+                                                : copyFailedToolCallId ===
+                                                    callId
+                                                  ? dict.chat.failedToCopy
+                                                  : dict.chat.copyResponse
+                                        }
+                                    >
+                                        {isCopied ? (
+                                            <Check className="w-4 h-4 text-green-600" />
+                                        ) : (
+                                            <Copy className="w-4 h-4 text-muted-foreground" />
+                                        )}
+                                    </button>
+                                )}
+                            </>
                         )}
+                        {state === "output-error" &&
+                            (() => {
+                                // Check if this is a truncation (incomplete XML) vs real error
+                                const isTruncated =
+                                    (toolName === "display_diagram" ||
+                                        toolName === "append_diagram") &&
+                                    !isMxCellXmlComplete(input?.xml)
+                                return isTruncated ? (
+                                    <span className="text-xs font-medium text-yellow-600 bg-yellow-50 px-2 py-0.5 rounded-full">
+                                        Truncated
+                                    </span>
+                                ) : (
+                                    <span className="text-xs font-medium text-red-600 bg-red-50 px-2 py-0.5 rounded-full">
+                                        Error
+                                    </span>
+                                )
+                            })()}
                         {input && Object.keys(input).length > 0 && (
                             <button
                                 type="button"
@@ -398,9 +805,9 @@ export function ChatMessageDisplay({
                         {typeof input === "object" && input.xml ? (
                             <CodeBlock code={input.xml} language="xml" />
                         ) : typeof input === "object" &&
-                          input.edits &&
+                          input.operations &&
-                          Array.isArray(input.edits) ? (
+                          Array.isArray(input.operations) ? (
-                            <EditDiffDisplay edits={input.edits} />
+                            <OperationsDisplay operations={input.operations} />
                         ) : typeof input === "object" &&
                           Object.keys(input).length > 0 ? (
                             <CodeBlock
@@ -410,11 +817,42 @@ export function ChatMessageDisplay({
                         ) : null}
                     </div>
                 )}
-                {output && state === "output-error" && (
+                {output &&
-                    <div className="px-4 py-3 border-t border-border/40 text-sm text-red-600">
+                    state === "output-error" &&
-                        {output}
+                    (() => {
-                    </div>
+                        const isTruncated =
-                )}
+                            (toolName === "display_diagram" ||
+                                toolName === "append_diagram") &&
+                            !isMxCellXmlComplete(input?.xml)
+                        return (
+                            <div
+                                className={`px-4 py-3 border-t border-border/40 text-sm ${isTruncated ? "text-yellow-600" : "text-red-600"}`}
+                            >
+                                {isTruncated
+                                    ? "Output truncated due to length limits. Try a simpler request or increase the maxOutputLength."
+                                    : output}
+                            </div>
+                        )
+                    })()}
+                {/* Show get_shape_library output on success */}
+                {output &&
+                    toolName === "get_shape_library" &&
+                    state === "output-available" &&
+                    isExpanded && (
+                        <div className="px-4 py-3 border-t border-border/40">
+                            <div className="text-xs text-muted-foreground mb-2">
+                                Library loaded (
+                                {typeof output === "string" ? output.length : 0}{" "}
+                                chars)
+                            </div>
+                            <pre className="text-xs bg-muted/50 p-2 rounded-md overflow-auto max-h-32 whitespace-pre-wrap">
+                                {typeof output === "string"
+                                    ? output.substring(0, 800) +
+                                      (output.length > 800 ? "\n..." : "")
+                                    : String(output)}
+                            </pre>
+                        </div>
+                    )}
             </div>
         )
     }
@@ -471,7 +909,10 @@ export function ChatMessageDisplay({
                                                             )
                                                         }}
                                                         className="p-1.5 rounded-lg text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted transition-colors"
-                                                        title="Edit message"
+                                                        title={
+                                                            dict.chat
+                                                                .editMessage
+                                                        }
                                                     >
                                                         <Pencil className="h-3.5 w-3.5" />
                                                     </button>
@@ -488,11 +929,13 @@ export function ChatMessageDisplay({
                                                 title={
                                                     copiedMessageId ===
                                                     message.id
-                                                        ? "Copied!"
+                                                        ? dict.chat.copied
                                                         : copyFailedMessageId ===
                                                             message.id
-                                                          ? "Failed to copy"
+                                                          ? dict.chat
-                                                          : "Copy message"
+                                                                .failedToCopy
+                                                          : dict.chat
+                                                                .copyResponse
                                                 }
                                             >
                                                 {copiedMessageId ===
@@ -607,7 +1050,7 @@ export function ChatMessageDisplay({
                                                     }}
                                                     className="px-3 py-1.5 text-xs rounded-lg bg-muted hover:bg-muted/80 transition-colors"
                                                 >
-                                                    Cancel
+                                                    {dict.common.cancel}
                                                 </button>
                                                 <button
                                                     type="button"
@@ -629,7 +1072,7 @@ export function ChatMessageDisplay({
                                                     disabled={!editText.trim()}
                                                     className="px-3 py-1.5 text-xs rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50 transition-colors"
                                                 >
-                                                    Save & Submit
+                                                    {dict.chat.saveAndSubmit}
                                                 </button>
                                             </div>
                                         </div>
@@ -762,7 +1205,8 @@ export function ChatMessageDisplay({
                                                                     "user" &&
                                                                 isLastUserMessage &&
                                                                 onEditMessage
-                                                                    ? "Click to edit"
+                                                                    ? dict.chat
+                                                                          .clickToEdit
                                                                     : undefined
                                                             }
                                                         >
@@ -964,8 +1408,8 @@ export function ChatMessageDisplay({
                                                 title={
                                                     copiedMessageId ===
                                                     message.id
-                                                        ? "Copied!"
+                                                        ? dict.chat.copied
-                                                        : "Copy response"
+                                                        : dict.chat.copyResponse
                                                 }
                                             >
                                                 {copiedMessageId ===
@@ -991,7 +1435,9 @@ export function ChatMessageDisplay({
                                                             )
                                                         }
                                                         className="p-1.5 rounded-lg text-muted-foreground/60 hover:text-foreground hover:bg-muted transition-colors"
-                                                        title="Regenerate response"
+                                                        title={
+                                                            dict.chat.regenerate
+                                                        }
                                                     >
                                                         <RotateCcw className="h-3.5 w-3.5" />
                                                     </button>
@@ -1013,7 +1459,7 @@ export function ChatMessageDisplay({
                                                         ? "text-green-600 bg-green-100"
                                                         : "text-muted-foreground/60 hover:text-green-600 hover:bg-green-50"
                                                 }`}
-                                                title="Good response"
+                                                title={dict.chat.goodResponse}
                                             >
                                                 <ThumbsUp className="h-3.5 w-3.5" />
                                             </button>
@@ -1032,7 +1478,7 @@ export function ChatMessageDisplay({
                                                         ? "text-red-600 bg-red-100"
                                                         : "text-muted-foreground/60 hover:text-red-600 hover:bg-red-50"
                                                 }`}
-                                                title="Bad response"
+                                                title={dict.chat.badResponse}
                                             >
                                                 <ThumbsDown className="h-3.5 w-3.5" />
                                             </button>

components/dev-xml-simulator.tsx

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

components/file-preview-list.tsx

@@ -3,6 +3,7 @@
 import { FileCode, FileText, Loader2, X } from "lucide-react"
 import Image from "next/image"
 import { useEffect, useRef, useState } from "react"
+import { useDictionary } from "@/hooks/use-dictionary"
 import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
 
 function formatCharCount(count: number): string {
@@ -26,10 +27,10 @@ export function FilePreviewList({
     onRemoveFile,
     pdfData = new Map(),
 }: FilePreviewListProps) {
+    const dict = useDictionary()
     const [selectedImage, setSelectedImage] = useState<string | null>(null)
     const [imageUrls, setImageUrls] = useState<Map<File, string>>(new Map())
     const imageUrlsRef = useRef<Map<File, string>>(new Map())
-
     // Create and cleanup object URLs when files change
     useEffect(() => {
         const currentUrls = imageUrlsRef.current
@@ -46,7 +47,6 @@ export function FilePreviewList({
                 }
             }
         })
-
         // Revoke URLs for files that are no longer in the list
         currentUrls.forEach((url, file) => {
             if (!newUrls.has(file)) {
@@ -57,7 +57,6 @@ export function FilePreviewList({
         imageUrlsRef.current = newUrls
         setImageUrls(newUrls)
     }, [files])
-
     // Cleanup all URLs on unmount only
     useEffect(() => {
         return () => {
@@ -68,7 +67,6 @@ export function FilePreviewList({
             imageUrlsRef.current = new Map()
         }
     }, [])
-
     // Clear selected image if its URL was revoked
     useEffect(() => {
         if (
@@ -126,14 +124,14 @@ export function FilePreviewList({
                                         </span>
                                         {pdfInfo?.isExtracting ? (
                                             <span className="text-[10px] text-muted-foreground">
-                                                Reading...
+                                                {dict.file.reading}
                                             </span>
                                         ) : pdfInfo?.charCount ? (
                                             <span className="text-[10px] text-green-600 font-medium">
                                                 {formatCharCount(
                                                     pdfInfo.charCount,
                                                 )}{" "}
-                                                chars
+                                                {dict.file.chars}
                                             </span>
                                         ) : null}
                                     </div>
@@ -147,7 +145,7 @@ export function FilePreviewList({
                                 type="button"
                                 onClick={() => onRemoveFile(file)}
                                 className="absolute -top-2 -right-2 bg-destructive rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
-                                aria-label="Remove file"
+                                aria-label={dict.file.removeFile}
                             >
                                 <X className="h-3 w-3" />
                             </button>
@@ -155,7 +153,6 @@ export function FilePreviewList({
                     )
                 })}
             </div>
-
             {/* Image Modal/Lightbox */}
             {selectedImage && (
                 <div
@@ -165,7 +162,7 @@ export function FilePreviewList({
                     <button
                         className="absolute top-4 right-4 z-10 bg-white rounded-full p-2 hover:bg-gray-200 transition-colors"
                         onClick={() => setSelectedImage(null)}
-                        aria-label="Close"
+                        aria-label={dict.common.close}
                     >
                         <X className="h-6 w-6" />
                     </button>

components/history-dialog.tsx

@@ -12,6 +12,8 @@ import {
     DialogTitle,
 } from "@/components/ui/dialog"
 import { useDiagram } from "@/contexts/diagram-context"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { formatMessage } from "@/lib/i18n/utils"
 
 interface HistoryDialogProps {
     showHistory: boolean
@@ -22,6 +24,7 @@ export function HistoryDialog({
     showHistory,
     onToggleHistory,
 }: HistoryDialogProps) {
+    const dict = useDictionary()
     const { loadDiagram: onDisplayChart, diagramHistory } = useDiagram()
     const [selectedIndex, setSelectedIndex] = useState<number | null>(null)
 
@@ -42,18 +45,15 @@ export function HistoryDialog({
         <Dialog open={showHistory} onOpenChange={onToggleHistory}>
             <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
                 <DialogHeader>
-                    <DialogTitle>Diagram History</DialogTitle>
+                    <DialogTitle>{dict.history.title}</DialogTitle>
                     <DialogDescription>
-                        Here saved each diagram before AI modification.
+                        {dict.history.description}
-                        <br />
-                        Click on a diagram to restore it
                     </DialogDescription>
                 </DialogHeader>
 
                 {diagramHistory.length === 0 ? (
                     <div className="text-center p-4 text-gray-500">
-                        No history available yet. Send messages to create
+                        {dict.history.noHistory}
-                        diagram history.
                     </div>
                 ) : (
                     <div className="grid grid-cols-2 md:grid-cols-3 gap-4 py-4">
@@ -70,14 +70,14 @@ export function HistoryDialog({
                                 <div className="aspect-video bg-white rounded overflow-hidden flex items-center justify-center">
                                     <Image
                                         src={item.svg}
-                                        alt={`Diagram version ${index + 1}`}
+                                        alt={`${dict.history.version} ${index + 1}`}
                                         width={200}
                                         height={100}
                                         className="object-contain w-full h-full p-1"
                                     />
                                 </div>
                                 <div className="text-xs text-center mt-1 text-gray-500">
-                                    Version {index + 1}
+                                    {dict.history.version} {index + 1}
                                 </div>
                             </div>
                         ))}
@@ -88,21 +88,23 @@ export function HistoryDialog({
                     {selectedIndex !== null ? (
                         <>
                             <div className="flex-1 text-sm text-muted-foreground">
-                                Restore to Version {selectedIndex + 1}?
+                                {formatMessage(dict.history.restoreTo, {
+                                    version: selectedIndex + 1,
+                                })}
                             </div>
                             <Button
                                 variant="outline"
                                 onClick={() => setSelectedIndex(null)}
                             >
-                                Cancel
+                                {dict.common.cancel}
                             </Button>
                             <Button onClick={handleConfirmRestore}>
-                                Confirm
+                                {dict.common.confirm}
                             </Button>
                         </>
                     ) : (
                         <Button variant="outline" onClick={handleClose}>
-                            Close
+                            {dict.common.close}
                         </Button>
                     )}
                 </DialogFooter>

components/model-selector.tsx

@@ -0,0 +1,303 @@
+"use client"
+
+import {
+    AlertTriangle,
+    Bot,
+    Check,
+    ChevronDown,
+    Server,
+    Settings2,
+} from "lucide-react"
+import { useEffect, useMemo, useRef, useState } from "react"
+import {
+    ModelSelectorContent,
+    ModelSelectorEmpty,
+    ModelSelectorGroup,
+    ModelSelectorInput,
+    ModelSelectorItem,
+    ModelSelectorList,
+    ModelSelectorLogo,
+    ModelSelectorName,
+    ModelSelector as ModelSelectorRoot,
+    ModelSelectorSeparator,
+    ModelSelectorTrigger,
+} from "@/components/ai-elements/model-selector"
+import { ButtonWithTooltip } from "@/components/button-with-tooltip"
+import { useDictionary } from "@/hooks/use-dictionary"
+import type { FlattenedModel } from "@/lib/types/model-config"
+import { cn } from "@/lib/utils"
+
+interface ModelSelectorProps {
+    models: FlattenedModel[]
+    selectedModelId: string | undefined
+    onSelect: (modelId: string | undefined) => void
+    onConfigure: () => void
+    disabled?: boolean
+    showUnvalidatedModels?: boolean
+}
+
+// Map our provider names to models.dev logo names
+const PROVIDER_LOGO_MAP: Record<string, string> = {
+    openai: "openai",
+    anthropic: "anthropic",
+    google: "google",
+    azure: "azure",
+    bedrock: "amazon-bedrock",
+    openrouter: "openrouter",
+    deepseek: "deepseek",
+    siliconflow: "siliconflow",
+    sglang: "openai", // SGLang is OpenAI-compatible, use OpenAI logo
+    gateway: "vercel",
+    edgeone: "tencent-cloud",
+    doubao: "bytedance",
+}
+
+// Group models by providerLabel (handles duplicate providers)
+function groupModelsByProvider(
+    models: FlattenedModel[],
+): Map<string, { provider: string; models: FlattenedModel[] }> {
+    const groups = new Map<
+        string,
+        { provider: string; models: FlattenedModel[] }
+    >()
+    for (const model of models) {
+        const key = model.providerLabel
+        const existing = groups.get(key)
+        if (existing) {
+            existing.models.push(model)
+        } else {
+            groups.set(key, { provider: model.provider, models: [model] })
+        }
+    }
+    return groups
+}
+
+export function ModelSelector({
+    models,
+    selectedModelId,
+    onSelect,
+    onConfigure,
+    disabled = false,
+    showUnvalidatedModels = false,
+}: ModelSelectorProps) {
+    const dict = useDictionary()
+    const [open, setOpen] = useState(false)
+    // Filter models based on showUnvalidatedModels setting
+    const displayModels = useMemo(() => {
+        if (showUnvalidatedModels) {
+            return models
+        }
+        return models.filter((m) => m.validated === true)
+    }, [models, showUnvalidatedModels])
+    const groupedModels = useMemo(
+        () => groupModelsByProvider(displayModels),
+        [displayModels],
+    )
+
+    // Find selected model for display
+    const selectedModel = useMemo(
+        () => models.find((m) => m.id === selectedModelId),
+        [models, selectedModelId],
+    )
+
+    const handleSelect = (value: string) => {
+        if (value === "__configure__") {
+            onConfigure()
+        } else if (value === "__server_default__") {
+            onSelect(undefined)
+        } else {
+            onSelect(value)
+        }
+        setOpen(false)
+    }
+
+    const tooltipContent = selectedModel
+        ? `${selectedModel.modelId} ${dict.modelConfig.clickToChange}`
+        : `${dict.modelConfig.usingServerDefault} ${dict.modelConfig.clickToChange}`
+
+    const wrapperRef = useRef<HTMLDivElement | null>(null)
+    const [showLabel, setShowLabel] = useState(true)
+
+    // Threshold (px) under which we hide the label (tweak as needed)
+    const HIDE_THRESHOLD = 240
+    const SHOW_THRESHOLD = 260
+    useEffect(() => {
+        const el = wrapperRef.current
+        if (!el) return
+
+        const target = el.parentElement ?? el
+
+        const ro = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                const width = entry.contentRect.width
+                setShowLabel((prev) => {
+                    // if currently showing and width dropped below hide threshold -> hide
+                    if (prev && width <= HIDE_THRESHOLD) return false
+                    // if currently hidden and width rose above show threshold -> show
+                    if (!prev && width >= SHOW_THRESHOLD) return true
+                    // otherwise keep previous state (hysteresis)
+                    return prev
+                })
+            }
+        })
+
+        ro.observe(target)
+
+        const initialWidth = target.getBoundingClientRect().width
+        setShowLabel(initialWidth >= SHOW_THRESHOLD)
+
+        return () => ro.disconnect()
+    }, [])
+
+    return (
+        <div ref={wrapperRef} className="inline-block">
+            <ModelSelectorRoot open={open} onOpenChange={setOpen}>
+                <ModelSelectorTrigger asChild>
+                    <ButtonWithTooltip
+                        tooltipContent={tooltipContent}
+                        variant="ghost"
+                        size="sm"
+                        disabled={disabled}
+                        className={cn(
+                            "hover:bg-accent gap-1.5 h-8 px-2 transition-all duration-150 ease-in-out",
+                            !showLabel && "px-1.5 justify-center",
+                        )}
+                        // accessibility: expose label to screen readers
+                        aria-label={tooltipContent}
+                    >
+                        <Bot className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
+                        {/* show/hide visible label based on measured width */}
+                        {showLabel ? (
+                            <span className="text-xs truncate">
+                                {selectedModel
+                                    ? selectedModel.modelId
+                                    : dict.modelConfig.default}
+                            </span>
+                        ) : (
+                            // Keep an sr-only label for screen readers when hidden
+                            <span className="sr-only">
+                                {selectedModel
+                                    ? selectedModel.modelId
+                                    : dict.modelConfig.default}
+                            </span>
+                        )}
+                        <ChevronDown className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
+                    </ButtonWithTooltip>
+                </ModelSelectorTrigger>
+
+                <ModelSelectorContent title={dict.modelConfig.selectModel}>
+                    <ModelSelectorInput
+                        placeholder={dict.modelConfig.searchModels}
+                    />
+                    <ModelSelectorList className="[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
+                        <ModelSelectorEmpty>
+                            {displayModels.length === 0 && models.length > 0
+                                ? dict.modelConfig.noVerifiedModels
+                                : 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",
+                                )}
+                            >
+                                <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>
+
+                        {/* 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>
+                            ),
+                        )}
+
+                        {/* 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
+                                ? dict.modelConfig.allModelsShown
+                                : dict.modelConfig.onlyVerifiedShown}
+                        </div>
+                    </ModelSelectorList>
+                </ModelSelectorContent>
+            </ModelSelectorRoot>
+        </div>
+    )
+}

components/quota-limit-toast.tsx

@@ -1,15 +1,17 @@
 "use client"
 
-import { Coffee, X } from "lucide-react"
+import { Coffee, Settings, X } from "lucide-react"
-import Link from "next/link"
 import type React from "react"
 import { FaGithub } from "react-icons/fa"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { formatMessage } from "@/lib/i18n/utils"
 
 interface QuotaLimitToastProps {
     type?: "request" | "token"
     used: number
     limit: number
     onDismiss: () => void
+    onConfigModel?: () => void
 }
 
 export function QuotaLimitToast({
@@ -17,10 +19,13 @@ export function QuotaLimitToast({
     used,
     limit,
     onDismiss,
+    onConfigModel,
 }: QuotaLimitToastProps) {
+    const dict = useDictionary()
     const isTokenLimit = type === "token"
     const formatNumber = (n: number) =>
         n >= 1000 ? `${(n / 1000).toFixed(1)}k` : n.toString()
+
     const handleKeyDown = (e: React.KeyboardEvent) => {
         if (e.key === "Escape") {
             e.preventDefault()
@@ -44,7 +49,6 @@ export function QuotaLimitToast({
             >
                 <X className="w-4 h-4" />
             </button>
-
             {/* Title row with icon */}
             <div className="flex items-center gap-2.5 mb-3 pr-6">
                 <div className="flex-shrink-0 w-8 h-8 rounded-lg bg-accent flex items-center justify-center">
@@ -55,50 +59,56 @@ export function QuotaLimitToast({
                 </div>
                 <h3 className="font-semibold text-foreground text-sm">
                     {isTokenLimit
-                        ? "Daily Token Limit Reached"
+                        ? dict.quota.tokenLimit
-                        : "Daily Quota Reached"}
+                        : dict.quota.dailyLimit}
                 </h3>
                 <span className="px-2 py-0.5 text-xs font-medium rounded-md bg-muted text-muted-foreground">
-                    {isTokenLimit
+                    {formatMessage(dict.quota.usedOf, {
-                        ? `${formatNumber(used)}/${formatNumber(limit)} tokens`
+                        used: formatNumber(used),
-                        : `${used}/${limit}`}
+                        limit: formatNumber(limit),
+                    })}
                 </span>
             </div>
-
             {/* Message */}
             <div className="text-sm text-muted-foreground leading-relaxed mb-4 space-y-2">
                 <p>
-                    Oops — you've reached the daily{" "}
+                    {isTokenLimit
-                    {isTokenLimit ? "token" : "API"} limit for this demo! As an
+                        ? dict.quota.messageToken
-                    indie developer covering all the API costs myself, I have to
+                        : dict.quota.messageApi}
-                    set these limits to keep things sustainable.{" "}
-                    <Link
-                        href="/about"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="inline-flex items-center gap-1 text-amber-600 font-medium hover:text-amber-700 hover:underline"
-                    >
-                        Learn more →
-                    </Link>
                 </p>
-                <p>
+                <p
-                    <strong>Tip:</strong> You can use your own API key (click
+                    dangerouslySetInnerHTML={{
-                    the Settings icon) or self-host the project to bypass these
+                        __html: formatMessage(dict.quota.doubaoSponsorship, {
-                    limits.
+                            link: "https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project",
-                </p>
+                        }),
-                <p>Your limit resets tomorrow. Thanks for understanding!</p>
+                    }}
-            </div>
+                />
-
+                <p dangerouslySetInnerHTML={{ __html: dict.quota.tip }} />
+                <p>{dict.quota.reset}</p>
+            </div>{" "}
             {/* Action buttons */}
             <div className="flex items-center gap-2">
+                {onConfigModel && (
+                    <button
+                        type="button"
+                        onClick={() => {
+                            onConfigModel()
+                            onDismiss()
+                        }}
+                        className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+                    >
+                        <Settings className="w-3.5 h-3.5" />
+                        {dict.quota.configModel}
+                    </button>
+                )}
                 <a
                     href="https://github.com/DayuanJiang/next-ai-draw-io"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-border text-foreground hover:bg-muted transition-colors"
                 >
                     <FaGithub className="w-3.5 h-3.5" />
-                    Self-host
+                    {dict.quota.selfHost}
                 </a>
                 <a
                     href="https://github.com/sponsors/DayuanJiang"
@@ -107,7 +117,7 @@ export function QuotaLimitToast({
                     className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-border text-foreground hover:bg-muted transition-colors"
                 >
                     <Coffee className="w-3.5 h-3.5" />
-                    Sponsor
+                    {dict.quota.sponsor}
                 </a>
             </div>
         </div>

components/reset-warning-modal.tsx

@@ -9,6 +9,7 @@ import {
     DialogHeader,
     DialogTitle,
 } from "@/components/ui/dialog"
+import { useDictionary } from "@/hooks/use-dictionary"
 
 interface ResetWarningModalProps {
     open: boolean
@@ -21,14 +22,15 @@ export function ResetWarningModal({
     onOpenChange,
     onClear,
 }: ResetWarningModalProps) {
+    const dict = useDictionary()
+
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent>
                 <DialogHeader>
-                    <DialogTitle>Clear Everything?</DialogTitle>
+                    <DialogTitle>{dict.dialogs.clearTitle}</DialogTitle>
                     <DialogDescription>
-                        This will clear the current conversation and reset the
+                        {dict.dialogs.clearDescription}
-                        diagram. This action cannot be undone.
                     </DialogDescription>
                 </DialogHeader>
                 <DialogFooter>
@@ -36,10 +38,10 @@ export function ResetWarningModal({
                         variant="outline"
                         onClick={() => onOpenChange(false)}
                     >
-                        Cancel
+                        {dict.common.cancel}
                     </Button>
                     <Button variant="destructive" onClick={onClear}>
-                        Clear Everything
+                        {dict.dialogs.clearEverything}
                     </Button>
                 </DialogFooter>
             </DialogContent>

components/save-dialog.tsx

@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button"
 import {
     Dialog,
     DialogContent,
+    DialogDescription,
     DialogFooter,
     DialogHeader,
     DialogTitle,
@@ -17,19 +18,10 @@ import {
     SelectTrigger,
     SelectValue,
 } from "@/components/ui/select"
+import { useDictionary } from "@/hooks/use-dictionary"
 
 export type ExportFormat = "drawio" | "png" | "svg"
 
-const FORMAT_OPTIONS: {
-    value: ExportFormat
-    label: string
-    extension: string
-}[] = [
-    { value: "drawio", label: "Draw.io XML", extension: ".drawio" },
-    { value: "png", label: "PNG Image", extension: ".png" },
-    { value: "svg", label: "SVG Image", extension: ".svg" },
-]
-
 interface SaveDialogProps {
     open: boolean
     onOpenChange: (open: boolean) => void
@@ -43,6 +35,7 @@ export function SaveDialog({
     onSave,
     defaultFilename,
 }: SaveDialogProps) {
+    const dict = useDictionary()
     const [filename, setFilename] = useState(defaultFilename)
     const [format, setFormat] = useState<ExportFormat>("drawio")
 
@@ -65,17 +58,40 @@ export function SaveDialog({
         }
     }
 
+    const FORMAT_OPTIONS = [
+        {
+            value: "drawio" as const,
+            label: dict.save.formats.drawio,
+            extension: ".drawio",
+        },
+        {
+            value: "png" as const,
+            label: dict.save.formats.png,
+            extension: ".png",
+        },
+        {
+            value: "svg" as const,
+            label: dict.save.formats.svg,
+            extension: ".svg",
+        },
+    ]
+
     const currentFormat = FORMAT_OPTIONS.find((f) => f.value === format)
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="sm:max-w-md">
                 <DialogHeader>
-                    <DialogTitle>Save Diagram</DialogTitle>
+                    <DialogTitle>{dict.save.title}</DialogTitle>
+                    <DialogDescription>
+                        {dict.save.description}
+                    </DialogDescription>
                 </DialogHeader>
                 <div className="space-y-4">
                     <div className="space-y-2">
-                        <label className="text-sm font-medium">Format</label>
+                        <label className="text-sm font-medium">
+                            {dict.save.format}
+                        </label>
                         <Select
                             value={format}
                             onValueChange={(v) => setFormat(v as ExportFormat)}
@@ -96,13 +112,15 @@ export function SaveDialog({
                         </Select>
                     </div>
                     <div className="space-y-2">
-                        <label className="text-sm font-medium">Filename</label>
+                        <label className="text-sm font-medium">
+                            {dict.save.filename}
+                        </label>
                         <div className="flex items-stretch">
                             <Input
                                 value={filename}
                                 onChange={(e) => setFilename(e.target.value)}
                                 onKeyDown={handleKeyDown}
-                                placeholder="Enter filename"
+                                placeholder={dict.save.filenamePlaceholder}
                                 autoFocus
                                 onFocus={(e) => e.target.select()}
                                 className="rounded-r-none border-r-0 focus-visible:z-10"
@@ -118,9 +136,9 @@ export function SaveDialog({
                         variant="outline"
                         onClick={() => onOpenChange(false)}
                     >
-                        Cancel
+                        {dict.common.cancel}
                     </Button>
-                    <Button onClick={handleSave}>Save</Button>
+                    <Button onClick={handleSave}>{dict.common.save}</Button>
                 </DialogFooter>
             </DialogContent>
         </Dialog>

components/settings-dialog.tsx

@@ -1,7 +1,8 @@
 "use client"
 
-import { Moon, Sun } from "lucide-react"
+import { Github, Info, Moon, Sun, Tag } from "lucide-react"
-import { useEffect, useState } from "react"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { Suspense, useEffect, useState } from "react"
 import { Button } from "@/components/ui/button"
 import {
     Dialog,
@@ -20,6 +21,40 @@ import {
     SelectValue,
 } from "@/components/ui/select"
 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"
+
+// Reusable setting item component for consistent layout
+function SettingItem({
+    label,
+    description,
+    children,
+}: {
+    label: string
+    description?: string
+    children: React.ReactNode
+}) {
+    return (
+        <div className="flex items-center justify-between py-4 first:pt-0 last:pb-0">
+            <div className="space-y-0.5 pr-4">
+                <Label className="text-sm font-medium">{label}</Label>
+                {description && (
+                    <p className="text-xs text-muted-foreground max-w-[260px]">
+                        {description}
+                    </p>
+                )}
+            </div>
+            <div className="shrink-0">{children}</div>
+        </div>
+    )
+}
+
+const LANGUAGE_LABELS: Record<Locale, string> = {
+    en: "English",
+    zh: "中文",
+    ja: "日本語",
+}
 
 interface SettingsDialogProps {
     open: boolean
@@ -29,15 +64,13 @@ interface SettingsDialogProps {
     onToggleDrawioUi: () => void
     darkMode: boolean
     onToggleDarkMode: () => void
+    minimalStyle?: boolean
+    onMinimalStyleChange?: (value: boolean) => 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"
-export const STORAGE_AI_PROVIDER_KEY = "next-ai-draw-io-ai-provider"
-export const STORAGE_AI_BASE_URL_KEY = "next-ai-draw-io-ai-base-url"
-export const STORAGE_AI_API_KEY_KEY = "next-ai-draw-io-ai-api-key"
-export const STORAGE_AI_MODEL_KEY = "next-ai-draw-io-ai-model"
 
 function getStoredAccessCodeRequired(): boolean | null {
     if (typeof window === "undefined") return null
@@ -46,7 +79,7 @@ function getStoredAccessCodeRequired(): boolean | null {
     return stored === "true"
 }
 
-export function SettingsDialog({
+function SettingsContent({
     open,
     onOpenChange,
     onCloseProtectionChange,
@@ -54,7 +87,13 @@ export function SettingsDialog({
     onToggleDrawioUi,
     darkMode,
     onToggleDarkMode,
+    minimalStyle = false,
+    onMinimalStyleChange = () => {},
 }: 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)
@@ -62,16 +101,13 @@ export function SettingsDialog({
     const [accessCodeRequired, setAccessCodeRequired] = useState(
         () => getStoredAccessCodeRequired() ?? false,
     )
-    const [provider, setProvider] = useState("")
+    const [currentLang, setCurrentLang] = useState("en")
-    const [baseUrl, setBaseUrl] = useState("")
-    const [apiKey, setApiKey] = useState("")
-    const [modelId, setModelId] = useState("")
 
     useEffect(() => {
         // Only fetch if not cached in localStorage
         if (getStoredAccessCodeRequired() !== null) return
 
-        fetch("/api/config")
+        fetch(getApiEndpoint("/api/config"))
             .then((res) => {
                 if (!res.ok) throw new Error(`HTTP ${res.status}`)
                 return res.json()
@@ -90,6 +126,17 @@ export function SettingsDialog({
             })
     }, [])
 
+    // Detect current language from pathname
+    useEffect(() => {
+        const seg = pathname.split("/").filter(Boolean)
+        const first = seg[0]
+        if (first && i18n.locales.includes(first as Locale)) {
+            setCurrentLang(first)
+        } else {
+            setCurrentLang(i18n.defaultLocale)
+        }
+    }, [pathname])
+
     useEffect(() => {
         if (open) {
             const storedCode =
@@ -102,16 +149,25 @@ export function SettingsDialog({
             // Default to true if not set
             setCloseProtection(storedCloseProtection !== "false")
 
-            // Load AI provider settings
-            setProvider(localStorage.getItem(STORAGE_AI_PROVIDER_KEY) || "")
-            setBaseUrl(localStorage.getItem(STORAGE_AI_BASE_URL_KEY) || "")
-            setApiKey(localStorage.getItem(STORAGE_AI_API_KEY_KEY) || "")
-            setModelId(localStorage.getItem(STORAGE_AI_MODEL_KEY) || "")
-
             setError("")
         }
     }, [open])
 
+    const changeLanguage = (lang: string) => {
+        // Save locale to localStorage for persistence across restarts
+        localStorage.setItem("next-ai-draw-io-locale", lang)
+
+        const parts = pathname.split("/")
+        if (parts.length > 1 && i18n.locales.includes(parts[1] as Locale)) {
+            parts[1] = lang
+        } else {
+            parts.splice(1, 0, lang)
+        }
+        const newPath = parts.join("/") || "/"
+        const searchStr = search?.toString() ? `?${search.toString()}` : ""
+        router.push(newPath + searchStr)
+    }
+
     const handleSave = async () => {
         if (!accessCodeRequired) return
 
@@ -119,24 +175,27 @@ export function SettingsDialog({
         setIsVerifying(true)
 
         try {
-            const response = await fetch("/api/verify-access-code", {
+            const response = await fetch(
-                method: "POST",
+                getApiEndpoint("/api/verify-access-code"),
-                headers: {
+                {
-                    "x-access-code": accessCode.trim(),
+                    method: "POST",
+                    headers: {
+                        "x-access-code": accessCode.trim(),
+                    },
                 },
-            })
+            )
 
             const data = await response.json()
 
             if (!data.valid) {
-                setError(data.message || "Invalid access code")
+                setError(data.message || dict.errors.invalidAccessCode)
                 return
             }
 
             localStorage.setItem(STORAGE_ACCESS_CODE_KEY, accessCode.trim())
             onOpenChange(false)
         } catch {
-            setError("Failed to verify access code")
+            setError(dict.errors.networkError)
         } finally {
             setIsVerifying(false)
         }
@@ -150,18 +209,32 @@ export function SettingsDialog({
     }
 
     return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="sm:max-w-lg p-0 gap-0">
-            <DialogContent className="sm:max-w-md">
+            {/* Header */}
-                <DialogHeader>
+            <DialogHeader className="px-6 pt-6 pb-4">
-                    <DialogTitle>Settings</DialogTitle>
+                <DialogTitle>{dict.settings.title}</DialogTitle>
-                    <DialogDescription>
+                <DialogDescription className="mt-1">
-                        Configure your application settings.
+                    {dict.settings.description}
-                    </DialogDescription>
+                </DialogDescription>
-                </DialogHeader>
+            </DialogHeader>
-                <div className="space-y-4 py-2">
+
+            {/* Content */}
+            <div className="px-6 pb-6">
+                <div className="divide-y divide-border-subtle">
+                    {/* Access Code (conditional) */}
                     {accessCodeRequired && (
-                        <div className="space-y-2">
+                        <div className="py-4 first:pt-0 space-y-3">
-                            <Label htmlFor="access-code">Access Code</Label>
+                            <div className="space-y-0.5">
+                                <Label
+                                    htmlFor="access-code"
+                                    className="text-sm font-medium"
+                                >
+                                    {dict.settings.accessCode}
+                                </Label>
+                                <p className="text-xs text-muted-foreground">
+                                    {dict.settings.accessCodeDescription}
+                                </p>
+                            </div>
                             <div className="flex gap-2">
                                 <Input
                                     id="access-code"
@@ -171,214 +244,64 @@ export function SettingsDialog({
                                         setAccessCode(e.target.value)
                                     }
                                     onKeyDown={handleKeyDown}
-                                    placeholder="Enter access code"
+                                    placeholder={
+                                        dict.settings.accessCodePlaceholder
+                                    }
                                     autoComplete="off"
+                                    className="h-9"
                                 />
                                 <Button
                                     onClick={handleSave}
                                     disabled={isVerifying || !accessCode.trim()}
+                                    className="h-9 px-4 rounded-xl"
                                 >
-                                    {isVerifying ? "..." : "Save"}
+                                    {isVerifying ? "..." : dict.common.save}
                                 </Button>
                             </div>
-                            <p className="text-[0.8rem] text-muted-foreground">
-                                Required to use this application.
-                            </p>
                             {error && (
-                                <p className="text-[0.8rem] text-destructive">
+                                <p className="text-xs text-destructive">
                                     {error}
                                 </p>
                             )}
                         </div>
                     )}
-                    <div className="space-y-2">
-                        <Label>AI Provider Settings</Label>
-                        <p className="text-[0.8rem] text-muted-foreground">
-                            Use your own API key to bypass usage limits. Your
-                            key is stored locally in your browser and is never
-                            stored on the server.
-                        </p>
-                        <div className="space-y-3 pt-2">
-                            <div className="space-y-2">
-                                <Label htmlFor="ai-provider">Provider</Label>
-                                <Select
-                                    value={provider || "default"}
-                                    onValueChange={(value) => {
-                                        const actualValue =
-                                            value === "default" ? "" : value
-                                        setProvider(actualValue)
-                                        localStorage.setItem(
-                                            STORAGE_AI_PROVIDER_KEY,
-                                            actualValue,
-                                        )
-                                    }}
-                                >
-                                    <SelectTrigger id="ai-provider">
-                                        <SelectValue placeholder="Use Server Default" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem value="default">
-                                            Use Server Default
-                                        </SelectItem>
-                                        <SelectItem value="openai">
-                                            OpenAI
-                                        </SelectItem>
-                                        <SelectItem value="anthropic">
-                                            Anthropic
-                                        </SelectItem>
-                                        <SelectItem value="google">
-                                            Google
-                                        </SelectItem>
-                                        <SelectItem value="azure">
-                                            Azure OpenAI
-                                        </SelectItem>
-                                        <SelectItem value="openrouter">
-                                            OpenRouter
-                                        </SelectItem>
-                                        <SelectItem value="deepseek">
-                                            DeepSeek
-                                        </SelectItem>
-                                        <SelectItem value="siliconflow">
-                                            SiliconFlow
-                                        </SelectItem>
-                                    </SelectContent>
-                                </Select>
-                            </div>
-                            {provider && provider !== "default" && (
-                                <>
-                                    <div className="space-y-2">
-                                        <Label htmlFor="ai-model">
-                                            Model ID
-                                        </Label>
-                                        <Input
-                                            id="ai-model"
-                                            value={modelId}
-                                            onChange={(e) => {
-                                                setModelId(e.target.value)
-                                                localStorage.setItem(
-                                                    STORAGE_AI_MODEL_KEY,
-                                                    e.target.value,
-                                                )
-                                            }}
-                                            placeholder={
-                                                provider === "openai"
-                                                    ? "e.g., gpt-4o"
-                                                    : provider === "anthropic"
-                                                      ? "e.g., claude-sonnet-4-5"
-                                                      : provider === "google"
-                                                        ? "e.g., gemini-2.0-flash-exp"
-                                                        : provider ===
-                                                            "deepseek"
-                                                          ? "e.g., deepseek-chat"
-                                                          : "Model ID"
-                                            }
-                                        />
-                                    </div>
-                                    <div className="space-y-2">
-                                        <Label htmlFor="ai-api-key">
-                                            API Key
-                                        </Label>
-                                        <Input
-                                            id="ai-api-key"
-                                            type="password"
-                                            value={apiKey}
-                                            onChange={(e) => {
-                                                setApiKey(e.target.value)
-                                                localStorage.setItem(
-                                                    STORAGE_AI_API_KEY_KEY,
-                                                    e.target.value,
-                                                )
-                                            }}
-                                            placeholder="Your API key"
-                                            autoComplete="off"
-                                        />
-                                        <p className="text-[0.8rem] text-muted-foreground">
-                                            Overrides{" "}
-                                            {provider === "openai"
-                                                ? "OPENAI_API_KEY"
-                                                : provider === "anthropic"
-                                                  ? "ANTHROPIC_API_KEY"
-                                                  : provider === "google"
-                                                    ? "GOOGLE_GENERATIVE_AI_API_KEY"
-                                                    : provider === "azure"
-                                                      ? "AZURE_API_KEY"
-                                                      : provider ===
-                                                          "openrouter"
-                                                        ? "OPENROUTER_API_KEY"
-                                                        : provider ===
-                                                            "deepseek"
-                                                          ? "DEEPSEEK_API_KEY"
-                                                          : provider ===
-                                                              "siliconflow"
-                                                            ? "SILICONFLOW_API_KEY"
-                                                            : "server API key"}
-                                        </p>
-                                    </div>
-                                    <div className="space-y-2">
-                                        <Label htmlFor="ai-base-url">
-                                            Base URL (optional)
-                                        </Label>
-                                        <Input
-                                            id="ai-base-url"
-                                            value={baseUrl}
-                                            onChange={(e) => {
-                                                setBaseUrl(e.target.value)
-                                                localStorage.setItem(
-                                                    STORAGE_AI_BASE_URL_KEY,
-                                                    e.target.value,
-                                                )
-                                            }}
-                                            placeholder={
-                                                provider === "anthropic"
-                                                    ? "https://api.anthropic.com/v1"
-                                                    : provider === "siliconflow"
-                                                      ? "https://api.siliconflow.com/v1"
-                                                      : "Custom endpoint URL"
-                                            }
-                                        />
-                                    </div>
-                                    <Button
-                                        variant="outline"
-                                        size="sm"
-                                        className="w-full"
-                                        onClick={() => {
-                                            localStorage.removeItem(
-                                                STORAGE_AI_PROVIDER_KEY,
-                                            )
-                                            localStorage.removeItem(
-                                                STORAGE_AI_BASE_URL_KEY,
-                                            )
-                                            localStorage.removeItem(
-                                                STORAGE_AI_API_KEY_KEY,
-                                            )
-                                            localStorage.removeItem(
-                                                STORAGE_AI_MODEL_KEY,
-                                            )
-                                            setProvider("")
-                                            setBaseUrl("")
-                                            setApiKey("")
-                                            setModelId("")
-                                        }}
-                                    >
-                                        Clear Settings
-                                    </Button>
-                                </>
-                            )}
-                        </div>
-                    </div>
 
-                    <div className="flex items-center justify-between">
+                    {/* Language */}
-                        <div className="space-y-0.5">
+                    <SettingItem
-                            <Label htmlFor="theme-toggle">Theme</Label>
+                        label={dict.settings.language}
-                            <p className="text-[0.8rem] text-muted-foreground">
+                        description={dict.settings.languageDescription}
-                                Dark/Light mode for interface and DrawIO canvas.
+                    >
-                            </p>
+                        <Select
-                        </div>
+                            value={currentLang}
+                            onValueChange={changeLanguage}
+                        >
+                            <SelectTrigger
+                                id="language-select"
+                                className="w-[120px] h-9 rounded-xl"
+                            >
+                                <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                                {i18n.locales.map((locale) => (
+                                    <SelectItem key={locale} value={locale}>
+                                        {LANGUAGE_LABELS[locale]}
+                                    </SelectItem>
+                                ))}
+                            </SelectContent>
+                        </Select>
+                    </SettingItem>
+
+                    {/* Theme */}
+                    <SettingItem
+                        label={dict.settings.theme}
+                        description={dict.settings.themeDescription}
+                    >
                         <Button
                             id="theme-toggle"
                             variant="outline"
                             size="icon"
                             onClick={onToggleDarkMode}
+                            className="h-9 w-9 rounded-xl border-border-subtle hover:bg-interactive-hover"
                         >
                             {darkMode ? (
                                 <Sun className="h-4 w-4" />
@@ -386,36 +309,35 @@ export function SettingsDialog({
                                 <Moon className="h-4 w-4" />
                             )}
                         </Button>
-                    </div>
+                    </SettingItem>
 
-                    <div className="flex items-center justify-between">
+                    {/* Draw.io Style */}
-                        <div className="space-y-0.5">
+                    <SettingItem
-                            <Label htmlFor="drawio-ui">DrawIO Style</Label>
+                        label={dict.settings.drawioStyle}
-                            <p className="text-[0.8rem] text-muted-foreground">
+                        description={`${dict.settings.drawioStyleDescription} ${
-                                Canvas style:{" "}
+                            drawioUi === "min"
-                                {drawioUi === "min" ? "Minimal" : "Sketch"}
+                                ? dict.settings.minimal
-                            </p>
+                                : dict.settings.sketch
-                        </div>
+                        }`}
+                    >
                         <Button
                             id="drawio-ui"
                             variant="outline"
-                            size="sm"
                             onClick={onToggleDrawioUi}
+                            className="h-9 w-[120px] rounded-xl border-border-subtle hover:bg-interactive-hover font-normal"
                         >
-                            Switch to{" "}
+                            {dict.settings.switchTo}{" "}
-                            {drawioUi === "min" ? "Sketch" : "Minimal"}
+                            {drawioUi === "min"
+                                ? dict.settings.sketch
+                                : dict.settings.minimal}
                         </Button>
-                    </div>
+                    </SettingItem>
 
-                    <div className="flex items-center justify-between">
+                    {/* Close Protection */}
-                        <div className="space-y-0.5">
+                    <SettingItem
-                            <Label htmlFor="close-protection">
+                        label={dict.settings.closeProtection}
-                                Close Protection
+                        description={dict.settings.closeProtectionDescription}
-                            </Label>
+                    >
-                            <p className="text-[0.8rem] text-muted-foreground">
-                                Show confirmation when leaving the page.
-                            </p>
-                        </div>
                         <Switch
                             id="close-protection"
                             checked={closeProtection}
@@ -428,9 +350,81 @@ export function SettingsDialog({
                                 onCloseProtectionChange?.(checked)
                             }}
                         />
-                    </div>
+                    </SettingItem>
+
+                    {/* Diagram Style */}
+                    <SettingItem
+                        label={dict.settings.diagramStyle}
+                        description={dict.settings.diagramStyleDescription}
+                    >
+                        <div className="flex items-center gap-2">
+                            <Switch
+                                id="minimal-style"
+                                checked={minimalStyle}
+                                onCheckedChange={onMinimalStyleChange}
+                            />
+                            <span className="text-sm text-muted-foreground">
+                                {minimalStyle
+                                    ? dict.chat.minimalStyle
+                                    : dict.chat.styledMode}
+                            </span>
+                        </div>
+                    </SettingItem>
                 </div>
-            </DialogContent>
+            </div>
+
+            {/* Footer */}
+            <div className="px-6 py-4 border-t border-border-subtle bg-surface-1/50 rounded-b-2xl">
+                <div className="flex items-center justify-center gap-3">
+                    <span className="text-xs text-muted-foreground flex items-center gap-1">
+                        <Tag className="h-3 w-3" />
+                        {process.env.APP_VERSION}
+                    </span>
+                    <span className="text-muted-foreground">·</span>
+                    <a
+                        href="https://github.com/DayuanJiang/next-ai-draw-io"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
+                    >
+                        <Github className="h-3 w-3" />
+                        GitHub
+                    </a>
+                    {process.env.NEXT_PUBLIC_SHOW_ABOUT_AND_NOTICE ===
+                        "true" && (
+                        <>
+                            <span className="text-muted-foreground">·</span>
+                            <a
+                                href={`/${currentLang}/about${currentLang === "zh" ? "/cn" : currentLang === "ja" ? "/ja" : ""}`}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="text-xs text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1"
+                            >
+                                <Info className="h-3 w-3" />
+                                {dict.nav.about}
+                            </a>
+                        </>
+                    )}
+                </div>
+            </div>
+        </DialogContent>
+    )
+}
+
+export function SettingsDialog(props: SettingsDialogProps) {
+    return (
+        <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+            <Suspense
+                fallback={
+                    <DialogContent className="sm:max-w-lg p-0">
+                        <div className="h-80 flex items-center justify-center">
+                            <div className="animate-spin h-6 w-6 border-2 border-primary border-t-transparent rounded-full" />
+                        </div>
+                    </DialogContent>
+                }
+            >
+                <SettingsContent {...props} />
+            </Suspense>
         </Dialog>
     )
 }

components/ui/alert-dialog.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}

components/ui/command.tsx

@@ -0,0 +1,191 @@
+"use client"
+
+import * as React from "react"
+import { Command as CommandPrimitive } from "cmdk"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string
+  description?: string
+  className?: string
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className={cn("overflow-hidden p-0", className)}>
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  )
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      onMouseEnter={(e) => {
+        // Ensure hover updates selection for visual feedback
+        const item = e.currentTarget
+        item.setAttribute("data-selected", "true")
+        // Deselect siblings
+        const siblings = item.parentElement?.querySelectorAll("[cmdk-item]")
+        siblings?.forEach((sibling) => {
+          if (sibling !== item) {
+            sibling.setAttribute("data-selected", "false")
+          }
+        })
+      }}
+      {...props}
+    />
+  )
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

components/ui/dialog.tsx

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

components/ui/input.tsx

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

components/ui/popover.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

contexts/diagram-context.tsx

@@ -1,11 +1,12 @@
 "use client"
 
 import type React from "react"
-import { createContext, useContext, useRef, useState } from "react"
+import { createContext, useContext, useEffect, useRef, useState } from "react"
 import type { DrawIoEmbedRef } from "react-drawio"
 import { STORAGE_DIAGRAM_XML_KEY } from "@/components/chat-panel"
 import type { ExportFormat } from "@/components/save-dialog"
-import { extractDiagramXML, validateMxCellStructure } from "../lib/utils"
+import { getApiEndpoint } from "@/lib/base-path"
+import { extractDiagramXML, validateAndFixXml } from "../lib/utils"
 
 interface DiagramContextType {
     chartXML: string
@@ -23,9 +24,12 @@ interface DiagramContextType {
         format: ExportFormat,
         sessionId?: string,
     ) => void
+    saveDiagramToStorage: () => Promise<void>
     isDrawioReady: boolean
     onDrawioLoad: () => void
     resetDrawioReady: () => void
+    showSaveDialog: boolean
+    setShowSaveDialog: (show: boolean) => void
 }
 
 const DiagramContext = createContext<DiagramContextType | undefined>(undefined)
@@ -37,11 +41,15 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         { svg: string; xml: string }[]
     >([])
     const [isDrawioReady, setIsDrawioReady] = useState(false)
+    const [canSaveDiagram, setCanSaveDiagram] = useState(false)
+    const [showSaveDialog, setShowSaveDialog] = useState(false)
     const hasCalledOnLoadRef = useRef(false)
     const drawioRef = useRef<DrawIoEmbedRef | null>(null)
     const resolverRef = useRef<((value: string) => void) | null>(null)
     // Track if we're expecting an export for history (user-initiated)
     const expectHistoryExportRef = useRef<boolean>(false)
+    // Track if diagram has been restored from localStorage
+    const hasDiagramRestoredRef = useRef<boolean>(false)
 
     const onDrawioLoad = () => {
         // Only set ready state once to prevent infinite loops
@@ -57,6 +65,48 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         setIsDrawioReady(false)
     }
 
+    // Restore diagram XML when DrawIO becomes ready
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- loadDiagram uses refs internally and is stable
+    useEffect(() => {
+        // Reset restore flag when DrawIO is not ready (e.g., theme/UI change remounts it)
+        if (!isDrawioReady) {
+            hasDiagramRestoredRef.current = false
+            setCanSaveDiagram(false)
+            return
+        }
+        if (hasDiagramRestoredRef.current) return
+        hasDiagramRestoredRef.current = true
+
+        try {
+            const savedDiagramXml = localStorage.getItem(
+                STORAGE_DIAGRAM_XML_KEY,
+            )
+            if (savedDiagramXml) {
+                // Skip validation for trusted saved diagrams
+                loadDiagram(savedDiagramXml, true)
+            }
+        } catch (error) {
+            console.error("Failed to restore diagram from localStorage:", error)
+        }
+
+        // Allow saving after restore is complete
+        setTimeout(() => {
+            setCanSaveDiagram(true)
+        }, 500)
+    }, [isDrawioReady])
+
+    // Save diagram XML to localStorage whenever it changes (debounced)
+    useEffect(() => {
+        if (!canSaveDiagram) return
+        if (!chartXML || chartXML.length <= 300) return
+
+        const timeoutId = setTimeout(() => {
+            localStorage.setItem(STORAGE_DIAGRAM_XML_KEY, chartXML)
+        }, 1000)
+
+        return () => clearTimeout(timeoutId)
+    }, [chartXML, canSaveDiagram])
+
     // Track if we're expecting an export for file save (stores raw export data)
     const saveResolverRef = useRef<{
         resolver: ((data: string) => void) | null
@@ -82,25 +132,62 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         }
     }
 
+    // Save current diagram to localStorage (used before theme/UI changes)
+    const saveDiagramToStorage = async (): Promise<void> => {
+        if (!drawioRef.current) return
+
+        try {
+            const currentXml = await Promise.race([
+                new Promise<string>((resolve) => {
+                    resolverRef.current = resolve
+                    drawioRef.current?.exportDiagram({ format: "xmlsvg" })
+                }),
+                new Promise<string>((_, reject) =>
+                    setTimeout(() => reject(new Error("Export timeout")), 2000),
+                ),
+            ])
+
+            // Only save if diagram has meaningful content (not empty template)
+            if (currentXml && currentXml.length > 300) {
+                localStorage.setItem(STORAGE_DIAGRAM_XML_KEY, currentXml)
+            }
+        } catch (error) {
+            console.error("Failed to save diagram to storage:", error)
+        }
+    }
+
     const loadDiagram = (
         chart: string,
         skipValidation?: boolean,
     ): string | null => {
+        let xmlToLoad = chart
+
         // Validate XML structure before loading (unless skipped for internal use)
         if (!skipValidation) {
-            const validationError = validateMxCellStructure(chart)
+            const validation = validateAndFixXml(chart)
-            if (validationError) {
+            if (!validation.valid) {
-                console.warn("[loadDiagram] Validation error:", validationError)
+                console.warn(
-                return validationError
+                    "[loadDiagram] Validation error:",
+                    validation.error,
+                )
+                return validation.error
+            }
+            // Use fixed XML if auto-fix was applied
+            if (validation.fixed) {
+                console.log(
+                    "[loadDiagram] Auto-fixed XML issues:",
+                    validation.fixes,
+                )
+                xmlToLoad = validation.fixed
             }
         }
 
         // Keep chartXML in sync even when diagrams are injected (e.g., display_diagram tool)
-        setChartXML(chart)
+        setChartXML(xmlToLoad)
 
         if (drawioRef.current) {
             drawioRef.current.load({
-                xml: chart,
+                xml: xmlToLoad,
             })
         }
 
@@ -125,14 +212,20 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         setLatestSvg(data.data)
 
         // Only add to history if this was a user-initiated export
+        // Limit to 20 entries to prevent memory leaks during long sessions
+        const MAX_HISTORY_SIZE = 20
         if (expectHistoryExportRef.current) {
-            setDiagramHistory((prev) => [
+            setDiagramHistory((prev) => {
-                ...prev,
+                const newHistory = [
-                {
+                    ...prev,
-                    svg: data.data,
+                    {
-                    xml: extractedXML,
+                        svg: data.data,
-                },
+                        xml: extractedXML,
-            ])
+                    },
+                ]
+                // Keep only the last MAX_HISTORY_SIZE entries (circular buffer)
+                return newHistory.slice(-MAX_HISTORY_SIZE)
+            })
             expectHistoryExportRef.current = false
         }
 
@@ -237,7 +330,7 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
         sessionId?: string,
     ) => {
         try {
-            await fetch("/api/log-save", {
+            await fetch(getApiEndpoint("/api/log-save"), {
                 method: "POST",
                 headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({ filename, format, sessionId }),
@@ -261,9 +354,12 @@ export function DiagramProvider({ children }: { children: React.ReactNode }) {
                 handleDiagramExport,
                 clearDiagram,
                 saveDiagramToFile,
+                saveDiagramToStorage,
                 isDrawioReady,
                 onDrawioLoad,
                 resetDrawioReady,
+                showSaveDialog,
+                setShowSaveDialog,
             }}
         >
             {children}

docker-compose.yml

@@ -7,6 +7,11 @@ services:
       context: .
       args:
         - NEXT_PUBLIC_DRAWIO_BASE_URL=http://localhost:8080
+        # Uncomment below for subdirectory deployment
+        # - NEXT_PUBLIC_BASE_PATH=/nextaidrawio
     ports: ["3000:3000"]
     env_file: .env
+    environment:
+      # For subdirectory deployment, uncomment and set your path:
+      # NEXT_PUBLIC_BASE_PATH: /nextaidrawio
     depends_on: [drawio]

docs/cn/README_CN.md

@@ -4,7 +4,7 @@
 
 **AI驱动的图表创建工具 - 对话、绘制、可视化**
 
-[English](../README.md) | 中文 | [日本語](./README_JA.md)
+[English](../../README.md) | 中文 | [日本語](../ja/README_JA.md)
 
 [![TrendShift](https://trendshift.io/api/badge/repositories/15449)](https://next-ai-drawio.jiang.jp/)
 
@@ -13,12 +13,14 @@
 [![React](https://img.shields.io/badge/React-19.x-61dafb)](https://react.dev/)
 [![Sponsor](https://img.shields.io/badge/Sponsor-❤-ea4aaa)](https://github.com/sponsors/DayuanJiang)
 
-[![Live Demo](../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/)
+[![Live Demo](../../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/)
 
 </div>
 
 一个集成了AI功能的Next.js网页应用，与draw.io图表无缝结合。通过自然语言命令和AI辅助可视化来创建、修改和增强图表。
 
+> 注：感谢 <img src="https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/public/doubao-color.png" alt="" height="20" /> [字节跳动豆包](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project) 的赞助支持，本项目的 Demo 现已接入强大的 K2-thinking 模型！
+
 https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 
 ## 目录
@@ -26,14 +28,19 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
   - [目录](#目录)
   - [示例](#示例)
   - [功能特性](#功能特性)
+  - [MCP服务器（预览）](#mcp服务器预览)
+    - [Claude Code CLI](#claude-code-cli)
   - [快速开始](#快速开始)
     - [在线试用](#在线试用)
-    - [使用Docker运行（推荐）](#使用docker运行推荐)
+    - [桌面应用](#桌面应用)
+    - [使用Docker运行](#使用docker运行)
     - [安装](#安装)
   - [部署](#部署)
+    - [部署到腾讯云EdgeOne Pages](#部署到腾讯云edgeone-pages)
+    - [部署到Vercel（推荐）](#部署到vercel推荐)
+    - [部署到Cloudflare Workers](#部署到cloudflare-workers)
   - [多提供商支持](#多提供商支持)
   - [工作原理](#工作原理)
-  - [项目结构](#项目结构)
   - [支持与联系](#支持与联系)
   - [Star历史](#star历史)
 
@@ -47,31 +54,31 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
     <td colspan="2" valign="top" align="center">
       <strong>动画Transformer连接器</strong><br />
       <p><strong>提示词：</strong> 给我一个带有**动画连接器**的Transformer架构图。</p>
-      <img src="../public/animated_connectors.svg" alt="带动画连接器的Transformer架构" width="480" />
+      <img src="../../public/animated_connectors.svg" alt="带动画连接器的Transformer架构" width="480" />
     </td>
   </tr>
   <tr>
     <td width="50%" valign="top">
       <strong>GCP架构图</strong><br />
       <p><strong>提示词：</strong> 使用**GCP图标**生成一个GCP架构图。在这个图中，用户连接到托管在实例上的前端。</p>
-      <img src="../public/gcp_demo.svg" alt="GCP架构图" width="480" />
+      <img src="../../public/gcp_demo.svg" alt="GCP架构图" width="480" />
     </td>
     <td width="50%" valign="top">
       <strong>AWS架构图</strong><br />
       <p><strong>提示词：</strong> 使用**AWS图标**生成一个AWS架构图。在这个图中，用户连接到托管在实例上的前端。</p>
-      <img src="../public/aws_demo.svg" alt="AWS架构图" width="480" />
+      <img src="../../public/aws_demo.svg" alt="AWS架构图" width="480" />
     </td>
   </tr>
   <tr>
     <td width="50%" valign="top">
       <strong>Azure架构图</strong><br />
       <p><strong>提示词：</strong> 使用**Azure图标**生成一个Azure架构图。在这个图中，用户连接到托管在实例上的前端。</p>
-      <img src="../public/azure_demo.svg" alt="Azure架构图" width="480" />
+      <img src="../../public/azure_demo.svg" alt="Azure架构图" width="480" />
     </td>
     <td width="50%" valign="top">
       <strong>猫咪素描</strong><br />
       <p><strong>提示词：</strong> 给我画一只可爱的猫。</p>
-      <img src="../public/cat_demo.svg" alt="猫咪绘图" width="240" />
+      <img src="../../public/cat_demo.svg" alt="猫咪绘图" width="240" />
     </td>
   </tr>
 </table>
@@ -88,47 +95,55 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 -   **云架构图支持**：专门支持生成云架构图（AWS、GCP、Azure）
 -   **动画连接器**：在图表元素之间创建动态动画连接器，实现更好的可视化效果
 
+## MCP服务器（预览）
+
+> **预览功能**：此功能为实验性功能，可能不稳定。
+
+通过MCP（模型上下文协议）在Claude Desktop、Cursor和VS Code等AI代理中使用Next AI Draw.io。
+
+```json
+{
+  "mcpServers": {
+    "drawio": {
+      "command": "npx",
+      "args": ["@next-ai-drawio/mcp-server@latest"]
+    }
+  }
+}
+```
+
+### Claude Code CLI
+
+```bash
+claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
+```
+
+然后让Claude创建图表：
+> "创建一个展示用户认证流程的流程图，包含登录、MFA和会话管理"
+
+图表会实时显示在浏览器中！
+
+详情请参阅[MCP服务器README](../../packages/mcp-server/README.md)，了解VS Code、Cursor等客户端配置。
+
 ## 快速开始
 
 ### 在线试用
 
 无需安装！直接在我们的演示站点试用：
 
-[![Live Demo](../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/)
+[![Live Demo](../../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/)
-
-> 注意：由于访问量较大，演示站点目前使用 minimax-m2 模型。如需获得最佳效果，建议使用 Claude Sonnet 4.5 或 Claude Opus 4.5 自行部署。
 
 > **使用自己的 API Key**：您可以使用自己的 API Key 来绕过演示站点的用量限制。点击聊天面板中的设置图标即可配置您的 Provider 和 API Key。您的 Key 仅保存在浏览器本地，不会被存储在服务器上。
 
-### 使用Docker运行（推荐）
+### 桌面应用
 
-如果您只想在本地运行，最好的方式是使用Docker。
+从 [Releases 页面](https://github.com/DayuanJiang/next-ai-draw-io/releases) 下载适用于您平台的原生桌面应用：
 
-首先，如果您还没有安装Docker，请先安装：[获取Docker](https://docs.docker.com/get-docker/)
+支持的平台：Windows、macOS、Linux。
 
-然后运行：
+### 使用Docker运行
 
-```bash
+[查看 Docker 指南](./docker.md)
-docker run -d -p 3000:3000 \
-  -e AI_PROVIDER=openai \
-  -e AI_MODEL=gpt-4o \
-  -e OPENAI_API_KEY=your_api_key \
-  ghcr.io/dayuanjiang/next-ai-draw-io:latest
-```
-
-或者使用 env 文件：
-
-```bash
-cp env.example .env
-# 编辑 .env 填写您的配置
-docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest
-```
-
-在浏览器中打开 [http://localhost:3000](http://localhost:3000)。
-
-请根据您首选的AI提供商配置替换环境变量。可用选项请参阅[多提供商支持](#多提供商支持)。
-
-> **离线部署：** 如果 `embed.diagrams.net` 被屏蔽，请参阅 [离线部署指南](./offline-deployment.md) 了解配置选项。
 
 ### 安装
 
@@ -137,56 +152,49 @@ docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:l
 ```bash
 git clone https://github.com/DayuanJiang/next-ai-draw-io
 cd next-ai-draw-io
-```
-
-2. 安装依赖：
-
-```bash
 npm install
-```
-
-3. 配置您的AI提供商：
-
-在根目录创建 `.env.local` 文件：
-
-```bash
 cp env.example .env.local
 ```
 
-编辑 `.env.local` 并配置您选择的提供商：
-
--   将 `AI_PROVIDER` 设置为您选择的提供商（bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow）
--   将 `AI_MODEL` 设置为您要使用的特定模型
--   添加您的提供商所需的API密钥
--   `TEMPERATURE`：可选的温度设置（例如 `0` 表示确定性输出）。对于不支持此参数的模型（如推理模型），请不要设置。
--   `ACCESS_CODE_LIST` 访问密码，可选，可以使用逗号隔开多个密码。
-
-> 警告：如果不填写 `ACCESS_CODE_LIST`，则任何人都可以直接使用你部署后的网站，可能会导致你的 token 被急速消耗完毕，建议填写此选项。
-
 详细设置说明请参阅[提供商配置指南](./ai-providers.md)。
 
-4. 运行开发服务器：
+2. 运行开发服务器：
 
 ```bash
 npm run dev
 ```
 
-5. 在浏览器中打开 [http://localhost:3000](http://localhost:3000) 查看应用。
+3. 在浏览器中打开 [http://localhost:6002](http://localhost:6002) 查看应用。
 
 ## 部署
 
-部署Next.js应用最简单的方式是使用Next.js创建者提供的[Vercel平台](https://vercel.com/new)。
+### 部署到腾讯云EdgeOne Pages
+
+您可以通过[腾讯云EdgeOne Pages](https://pages.edgeone.ai/zh)一键部署。
+
+直接点击此按钮一键部署：
+[![使用 EdgeOne Pages 部署](https://cdnstatic.tencentcs.com/edgeone/pages/deploy.svg)](https://console.cloud.tencent.com/edgeone/pages/new?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
+
+查看[腾讯云EdgeOne Pages文档](https://pages.edgeone.ai/zh/document/product-introduction)了解更多详情。
+
+同时，通过腾讯云EdgeOne Pages部署，也会获得[每日免费的DeepSeek模型额度](https://edgeone.cloud.tencent.com/pages/document/169925463311781888)。
+
+### 部署到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)
+
+部署Next.js应用最简单的方式是使用Next.js创建者提供的[Vercel平台](https://vercel.com/new)。请确保在Vercel控制台中**设置环境变量**，就像您在本地 `.env.local` 文件中所做的那样。
 
 查看[Next.js部署文档](https://nextjs.org/docs/app/building-your-application/deploying)了解更多详情。
 
-或者您可以通过此按钮部署：
+### 部署到Cloudflare Workers
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
 
-请确保在Vercel控制台中**设置环境变量**，就像您在本地 `.env.local` 文件中所做的那样。
+[查看 Cloudflare 部署指南](./cloudflare-deploy.md)
 
 
 ## 多提供商支持
 
+-   [字节跳动豆包](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project)
 -   AWS Bedrock（默认）
 -   OpenAI
 -   Anthropic
@@ -196,14 +204,16 @@ npm run dev
 -   OpenRouter
 -   DeepSeek
 -   SiliconFlow
+-   SGLang
+-   Vercel AI Gateway
 
 除AWS Bedrock和OpenRouter外，所有提供商都支持自定义端点。
 
 📖 **[详细的提供商配置指南](./ai-providers.md)** - 查看各提供商的设置说明。
 
-**模型要求**：此任务需要强大的模型能力，因为它涉及生成具有严格格式约束的长文本（draw.io XML）。推荐使用Claude Sonnet 4.5、GPT-4o、Gemini 2.0和DeepSeek V3/R1。
+**模型要求**：此任务需要强大的模型能力，因为它涉及生成具有严格格式约束的长文本（draw.io XML）。推荐使用 Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro 和 DeepSeek V3.2/R1。
 
-注意：`claude-sonnet-4-5` 已在带有AWS标志的draw.io图表上进行训练，因此如果您想创建AWS架构图，这是最佳选择。
+注意：`claude` 系列已在带有 AWS、Azure、GCP 等云架构 Logo 的 draw.io 图表上进行训练，因此如果您想创建云架构图，这是最佳选择。
 
 
 ## 工作原理
@@ -216,27 +226,11 @@ npm run dev
 
 图表以XML格式表示，可在draw.io中渲染。AI处理您的命令并相应地生成或修改此XML。
 
-## 项目结构
-
-```
-app/                  # Next.js App Router
-  api/chat/           # 带AI工具的聊天API端点
-  page.tsx            # 带DrawIO嵌入的主页面
-components/           # React组件
-  chat-panel.tsx      # 带图表控制的聊天界面
-  chat-input.tsx      # 带文件上传的用户输入组件
-  history-dialog.tsx  # 图表版本历史查看器
-  ui/                 # UI组件（按钮、卡片等）
-contexts/             # React上下文提供者
-  diagram-context.tsx # 全局图表状态管理
-lib/                  # 工具函数和辅助程序
-  ai-providers.ts     # 多提供商AI配置
-  utils.ts            # XML处理和转换工具
-public/               # 静态资源包括示例图片
-```
 
 ## 支持与联系
 
+**特别感谢[字节跳动豆包](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project)赞助演示站点的 API Token 使用！** 注册火山引擎 ARK 平台即可获得50万免费Token！
+
 如果您觉得这个项目有用，请考虑[赞助](https://github.com/sponsors/DayuanJiang)来帮助我托管在线演示站点！
 
 如需支持或咨询，请在GitHub仓库上提交issue或联系维护者：

docs/cn/ai-providers.md

@@ -0,0 +1,236 @@
+# AI 提供商配置
+
+本指南介绍如何为 next-ai-draw-io 配置不同的 AI 模型提供商。
+
+## 快速开始
+
+1. 将 `.env.example` 复制为 `.env.local`
+2. 设置所选提供商的 API 密钥
+3. 将 `AI_MODEL` 设置为所需的模型
+4. 运行 `npm run dev`
+
+## 支持的提供商
+
+### 豆包 (字节跳动火山引擎)
+
+> **免费 Token**：在 [火山引擎 ARK 平台](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project) 注册，即可获得所有模型 50 万免费 Token！
+
+```bash
+DOUBAO_API_KEY=your_api_key
+AI_MODEL=doubao-seed-1-8-251215  # 或其他豆包模型
+```
+
+### Google Gemini
+
+```bash
+GOOGLE_GENERATIVE_AI_API_KEY=your_api_key
+AI_MODEL=gemini-2.0-flash
+```
+
+可选的自定义端点：
+
+```bash
+GOOGLE_BASE_URL=https://your-custom-endpoint
+```
+
+### OpenAI
+
+```bash
+OPENAI_API_KEY=your_api_key
+AI_MODEL=gpt-4o
+```
+
+可选的自定义端点（用于 OpenAI 兼容服务）：
+
+```bash
+OPENAI_BASE_URL=https://your-custom-endpoint/v1
+```
+
+### Anthropic
+
+```bash
+ANTHROPIC_API_KEY=your_api_key
+AI_MODEL=claude-sonnet-4-5-20250514
+```
+
+可选的自定义端点：
+
+```bash
+ANTHROPIC_BASE_URL=https://your-custom-endpoint
+```
+
+### DeepSeek
+
+```bash
+DEEPSEEK_API_KEY=your_api_key
+AI_MODEL=deepseek-chat
+```
+
+可选的自定义端点：
+
+```bash
+DEEPSEEK_BASE_URL=https://your-custom-endpoint
+```
+
+### SiliconFlow (OpenAI 兼容)
+
+```bash
+SILICONFLOW_API_KEY=your_api_key
+AI_MODEL=deepseek-ai/DeepSeek-V3  # 示例；使用任何 SiliconFlow 模型 ID
+```
+
+可选的自定义端点（默认为推荐域名）：
+
+```bash
+SILICONFLOW_BASE_URL=https://api.siliconflow.com/v1  # 或 https://api.siliconflow.cn/v1
+```
+
+### SGLang
+
+```bash
+SGLANG_API_KEY=your_api_key
+AI_MODEL=your_model_id
+```
+
+可选的自定义端点：
+
+```bash
+SGLANG_BASE_URL=https://your-custom-endpoint/v1
+```
+
+### Azure OpenAI
+
+```bash
+AZURE_API_KEY=your_api_key
+AZURE_RESOURCE_NAME=your-resource-name  # 必填：您的 Azure 资源名称
+AI_MODEL=your-deployment-name
+```
+
+或者使用自定义端点代替资源名称：
+
+```bash
+AZURE_API_KEY=your_api_key
+AZURE_BASE_URL=https://your-resource.openai.azure.com  # AZURE_RESOURCE_NAME 的替代方案
+AI_MODEL=your-deployment-name
+```
+
+可选的推理配置：
+
+```bash
+AZURE_REASONING_EFFORT=low      # 可选：low, medium, high
+AZURE_REASONING_SUMMARY=detailed  # 可选：none, brief, detailed
+```
+
+### AWS Bedrock
+
+```bash
+AWS_REGION=us-west-2
+AWS_ACCESS_KEY_ID=your_access_key_id
+AWS_SECRET_ACCESS_KEY=your_secret_access_key
+AI_MODEL=anthropic.claude-sonnet-4-5-20250514-v1:0
+```
+
+注意：在 AWS 环境（Lambda、带有 IAM 角色的 EC2）中，凭证会自动从 IAM 角色获取。
+
+### OpenRouter
+
+```bash
+OPENROUTER_API_KEY=your_api_key
+AI_MODEL=anthropic/claude-sonnet-4
+```
+
+可选的自定义端点：
+
+```bash
+OPENROUTER_BASE_URL=https://your-custom-endpoint
+```
+
+### Ollama (本地)
+
+```bash
+AI_PROVIDER=ollama
+AI_MODEL=llama3.2
+```
+
+可选的自定义 URL：
+
+```bash
+OLLAMA_BASE_URL=http://localhost:11434
+```
+
+### Vercel AI Gateway
+
+Vercel AI Gateway 通过单个 API 密钥提供对多个 AI 提供商的统一访问。这简化了身份验证，让您无需管理多个 API 密钥即可在不同提供商之间切换。
+
+**基本用法（Vercel 托管网关）：**
+
+```bash
+AI_GATEWAY_API_KEY=your_gateway_api_key
+AI_MODEL=openai/gpt-4o
+```
+
+**自定义网关 URL（用于本地开发或自托管网关）：**
+
+```bash
+AI_GATEWAY_API_KEY=your_custom_api_key
+AI_GATEWAY_BASE_URL=https://your-custom-gateway.com/v1/ai
+AI_MODEL=openai/gpt-4o
+```
+
+模型格式使用 `provider/model` 语法：
+
+-   `openai/gpt-4o` - OpenAI GPT-4o
+-   `anthropic/claude-sonnet-4-5` - Anthropic Claude Sonnet 4.5
+-   `google/gemini-2.0-flash` - Google Gemini 2.0 Flash
+
+**配置说明：**
+
+-   如果未设置 `AI_GATEWAY_BASE_URL`，则使用默认的 Vercel Gateway URL (`https://ai-gateway.vercel.sh/v1/ai`)
+-   自定义基础 URL 适用于：
+    -   使用自定义网关实例进行本地开发
+    -   自托管 AI Gateway 部署
+    -   企业代理配置
+-   当使用自定义基础 URL 时，必须同时提供 `AI_GATEWAY_API_KEY`
+
+从 [Vercel AI Gateway 仪表板](https://vercel.com/ai-gateway) 获取您的 API 密钥。
+
+## 自动检测
+
+如果您只配置了**一个**提供商的 API 密钥，系统将自动检测并使用该提供商。无需设置 `AI_PROVIDER`。
+
+如果您配置了**多个** API 密钥，则必须显式设置 `AI_PROVIDER`：
+
+```bash
+AI_PROVIDER=google  # 或：openai, anthropic, deepseek, siliconflow, doubao, azure, bedrock, openrouter, ollama, gateway, sglang
+```
+
+## 模型能力要求
+
+此任务对模型能力要求极高，因为它涉及生成具有严格格式约束（draw.io XML）的长文本。
+
+**推荐模型**：
+
+-   Claude Sonnet 4.5 / Opus 4.5
+
+**关于 Ollama 的说明**：虽然支持将 Ollama 作为提供商，但除非您在本地运行像 DeepSeek R1 或 Qwen3-235B 这样的高性能模型，否则对于此用例通常不太实用。
+
+## 温度设置 (Temperature)
+
+您可以通过环境变量选择性地配置温度：
+
+```bash
+TEMPERATURE=0  # 输出更具确定性（推荐用于图表）
+```
+
+**重要提示**：对于不支持温度设置的模型（例如以下模型），请勿设置 `TEMPERATURE`：
+- GPT-5.1 和其他推理模型
+- 某些专用模型
+
+未设置时，模型将使用其默认行为。
+
+## 推荐
+
+-   **最佳体验**：使用支持视觉的模型（GPT-4o, Claude, Gemini）以获得图像转图表功能
+-   **经济实惠**：DeepSeek 提供具有竞争力的价格
+-   **隐私保护**：使用 Ollama 进行完全本地、离线的操作（需要强大的硬件支持）
+-   **灵活性**：OpenRouter 通过单一 API 提供对众多模型的访问

docs/cn/cloudflare-deploy.md

@@ -0,0 +1,267 @@
+# 部署到 Cloudflare Workers
+
+本项目可以通过 **OpenNext 适配器** 部署为 **Cloudflare Worker**，为您提供：
+
+- 全球边缘部署
+- 极低延迟
+- 免费的 `workers.dev` 域名托管
+- 通过 R2 实现完整的 Next.js ISR 支持（可选）
+
+> **Windows 用户重要提示：** OpenNext 和 Wrangler 在 **原生 Windows 环境下并不完全可靠**。建议方案：
+>
+> - 使用 **GitHub Codespaces**（完美运行）
+> - 或者使用 **WSL (Linux)**
+>
+> 纯 Windows 构建可能会因为 WASM 文件路径问题而失败。
+
+---
+
+## 前置条件
+
+1. 一个 **Cloudflare 账户**（免费版即可满足基本部署需求）
+2. **Node.js 18+**
+3. 安装 **Wrangler CLI**（作为开发依赖安装即可）：
+
+```bash
+npm install -D wrangler
+```
+
+4. 登录 Cloudflare：
+
+```bash
+npx wrangler login
+```
+
+> **注意：** 只有在启用 R2 进行 ISR 缓存时才需要绑定支付方式。基本的 Workers 部署是免费的。
+
+---
+
+## 第一步 — 安装依赖
+
+```bash
+npm install
+```
+
+---
+
+## 第二步 — 配置环境变量
+
+Cloudflare 在本地测试时使用不同的文件。
+
+### 1) 创建 `.dev.vars`（用于 Cloudflare 本地调试 + 部署）
+
+```bash
+cp env.example .dev.vars
+```
+
+填入您的 API 密钥和配置信息。
+
+### 2) 确保 `.env.local` 也存在（用于常规 Next.js 开发）
+
+```bash
+cp env.example .env.local
+```
+
+在此处填入相同的值。
+
+---
+
+## 第三步 — 选择部署类型
+
+### 选项 A：不使用 R2 部署（简单，免费）
+
+如果您不需要 ISR 缓存，可以选择不使用 R2 进行部署：
+
+**1. 使用简单的 `open-next.config.ts`：**
+
+```ts
+import { defineCloudflareConfig } from "@opennextjs/cloudflare/config"
+
+export default defineCloudflareConfig({})
+```
+
+**2. 使用简单的 `wrangler.jsonc`（不包含 r2_buckets）：**
+
+```jsonc
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "main": ".open-next/worker.js",
+  "name": "next-ai-draw-io-worker",
+  "compatibility_date": "2025-12-08",
+  "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
+  "assets": {
+    "directory": ".open-next/assets",
+    "binding": "ASSETS"
+  },
+  "services": [
+    {
+      "binding": "WORKER_SELF_REFERENCE",
+      "service": "next-ai-draw-io-worker"
+    }
+  ]
+}
+```
+
+直接跳至 **第四步**。
+
+---
+
+### 选项 B：使用 R2 部署（完整的 ISR 支持）
+
+R2 开启了 **增量静态再生 (ISR)** 缓存功能。需要在您的 Cloudflare 账户中绑定支付方式。
+
+**1. 在 Cloudflare 控制台中创建 R2 存储桶：**
+
+- 进入 **Storage & Databases → R2**
+- 点击 **Create bucket**
+- 命名为：`next-inc-cache`
+
+**2. 配置 `open-next.config.ts`：**
+
+```ts
+import { defineCloudflareConfig } from "@opennextjs/cloudflare/config"
+import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache"
+
+export default defineCloudflareConfig({
+  incrementalCache: r2IncrementalCache,
+})
+```
+
+**3. 配置 `wrangler.jsonc`（包含 R2）：**
+
+```jsonc
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "main": ".open-next/worker.js",
+  "name": "next-ai-draw-io-worker",
+  "compatibility_date": "2025-12-08",
+  "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
+  "assets": {
+    "directory": ".open-next/assets",
+    "binding": "ASSETS"
+  },
+  "r2_buckets": [
+    {
+      "binding": "NEXT_INC_CACHE_R2_BUCKET",
+      "bucket_name": "next-inc-cache"
+    }
+  ],
+  "services": [
+    {
+      "binding": "WORKER_SELF_REFERENCE",
+      "service": "next-ai-draw-io-worker"
+    }
+  ]
+}
+```
+
+> **重要提示：** `bucket_name` 必须与您在 Cloudflare 控制台中创建的名称完全一致。
+
+---
+
+## 第四步 — 注册 workers.dev 子域名（仅首次需要）
+
+在首次部署之前，您需要一个 workers.dev 子域名。
+
+**选项 1：通过 Cloudflare 控制台（推荐）**
+
+访问：https://dash.cloudflare.com → Workers & Pages → Overview → Set up a subdomain
+
+**选项 2：在部署过程中**
+
+运行 `npm run deploy` 时，Wrangler 可能会提示：
+
+```
+Would you like to register a workers.dev subdomain? (Y/n)
+```
+
+输入 `Y` 并选择一个子域名。
+
+> **注意：** 在 CI/CD 或非交互式环境中，该提示不会出现。请先通过控制台进行注册。
+
+---
+
+## 第五步 — 部署到 Cloudflare
+
+```bash
+npm run deploy
+```
+
+该脚本执行的操作：
+
+- 构建 Next.js 应用
+- 通过 OpenNext 将其转换为 Cloudflare Worker
+- 上传静态资源
+- 发布 Worker
+
+您的应用将可通过以下地址访问：
+
+```
+https://<worker-name>.<your-subdomain>.workers.dev
+```
+
+---
+
+## 常见问题与修复
+
+### `You need to register a workers.dev subdomain`
+
+**原因：** 您的账户尚未注册 workers.dev 子域名。
+
+**修复：** 前往 https://dash.cloudflare.com → Workers & Pages → Set up a subdomain。
+
+---
+
+### `Please enable R2 through the Cloudflare Dashboard`
+
+**原因：** wrangler.jsonc 中配置了 R2，但您的账户尚未启用该功能。
+
+**修复：** 启用 R2（需要支付方式）或使用选项 A（不使用 R2 部署）。
+
+---
+
+### `No R2 binding "NEXT_INC_CACHE_R2_BUCKET" found`
+
+**原因：** `wrangler.jsonc` 中缺少 `r2_buckets` 配置。
+
+**修复：** 添加 `r2_buckets` 部分或切换到选项 A（不使用 R2）。
+
+---
+
+### `Can't set compatibility date in the future`
+
+**原因：** wrangler 配置中的 `compatibility_date` 设置为了未来的日期。
+
+**修复：** 将 `compatibility_date` 修改为今天或更早的日期。
+
+---
+
+### Windows 错误：`resvg.wasm?module` (ENOENT)
+
+**原因：** Windows 文件名不能包含 `?`，但某个 wasm 资源文件名中使用了 `?module`。
+
+**修复：** 在 Linux 环境（WSL、Codespaces 或 CI）上进行构建/部署。
+
+---
+
+## 可选：本地预览
+
+部署前在本地预览 Worker：
+
+```bash
+npm run preview
+```
+
+---
+
+## 总结
+
+| 功能 | 不使用 R2 | 使用 R2 |
+|---------|------------|---------|
+| 成本 | 免费 | 需要绑定支付方式 |
+| ISR 缓存 | 无 | 有 |
+| 静态页面 | 支持 | 支持 |
+| API 路由 | 支持 | 支持 |
+| 配置复杂度 | 简单 | 中等 |
+
+测试或简单应用请选择 **不使用 R2**。需要 ISR 缓存的生产环境应用请选择 **使用 R2**。

docs/cn/docker.md

@@ -0,0 +1,29 @@
+# 使用 Docker 运行
+
+如果您只是想在本地运行，最好的方式是使用 Docker。
+
+首先，如果您尚未安装 Docker，请先安装：[获取 Docker](https://docs.docker.com/get-docker/)
+
+然后运行：
+
+```bash
+docker run -d -p 3000:3000 \
+  -e AI_PROVIDER=openai \
+  -e AI_MODEL=gpt-4o \
+  -e OPENAI_API_KEY=your_api_key \
+  ghcr.io/dayuanjiang/next-ai-draw-io:latest
+```
+
+或者使用环境变量文件：
+
+```bash
+cp env.example .env
+# 编辑 .env 文件并填入您的配置
+docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest
+```
+
+在浏览器中打开 [http://localhost:3000](http://localhost:3000)。
+
+请将环境变量替换为您首选的 AI 提供商配置。查看 [AI 提供商](./ai-providers.md) 了解可用选项。
+
+> **离线部署：** 如果无法访问 `embed.diagrams.net`，请参阅 [离线部署](./offline-deployment.md) 了解配置选项。

docs/cn/offline-deployment.md

@@ -0,0 +1,38 @@
+# 离线部署
+
+通过自托管 draw.io 来替代 `embed.diagrams.net`，从而离线部署 Next AI Draw.io。
+
+**注意：** `NEXT_PUBLIC_DRAWIO_BASE_URL` 是一个**构建时**变量。修改它需要重新构建 Docker 镜像。
+
+## Docker Compose 设置
+
+1. 克隆仓库并在 `.env` 文件中定义 API 密钥。
+2. 创建 `docker-compose.yml`：
+
+```yaml
+services:
+  drawio:
+    image: jgraph/drawio:latest
+    ports: ["8080:8080"]
+  next-ai-draw-io:
+    build:
+      context: .
+      args:
+        - NEXT_PUBLIC_DRAWIO_BASE_URL=http://localhost:8080
+    ports: ["3000:3000"]
+    env_file: .env
+    depends_on: [drawio]
+```
+
+3. 运行 `docker compose up -d` 并打开 `http://localhost:3000`。
+
+## 配置与重要警告
+
+**`NEXT_PUBLIC_DRAWIO_BASE_URL` 必须是用户浏览器可访问的地址。**
+
+| 场景 | URL 值 |
+|----------|-----------|
+| 本地主机 (Localhost) | `http://localhost:8080` |
+| 远程/服务器 | `http://YOUR_SERVER_IP:8080` |
+
+**切勿使用** Docker 内部别名（如 `http://drawio:8080`），因为浏览器无法解析它们。

docs/en/ai-providers.md

@@ -11,6 +11,15 @@ This guide explains how to configure different AI model providers for next-ai-dr
 
 ## Supported Providers
 
+### Doubao (ByteDance Volcengine)
+
+> **Free tokens**: Register on the [Volcengine ARK platform](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project) to get 500K free tokens for all models!
+
+```bash
+DOUBAO_API_KEY=your_api_key
+AI_MODEL=doubao-seed-1-8-251215  # or other Doubao model
+```
+
 ### Google Gemini
 
 ```bash
@@ -76,17 +85,40 @@ Optional custom endpoint (defaults to the recommended domain):
 SILICONFLOW_BASE_URL=https://api.siliconflow.com/v1  # or https://api.siliconflow.cn/v1
 ```
 
-### Azure OpenAI
+### SGLang
 
 ```bash
-AZURE_API_KEY=your_api_key
+SGLANG_API_KEY=your_api_key
-AI_MODEL=your-deployment-name
+AI_MODEL=your_model_id
 ```
 
 Optional custom endpoint:
 
 ```bash
-AZURE_BASE_URL=https://your-resource.openai.azure.com
+SGLANG_BASE_URL=https://your-custom-endpoint/v1
+```
+
+### Azure OpenAI
+
+```bash
+AZURE_API_KEY=your_api_key
+AZURE_RESOURCE_NAME=your-resource-name  # Required: your Azure resource name
+AI_MODEL=your-deployment-name
+```
+
+Or use a custom endpoint instead of resource name:
+
+```bash
+AZURE_API_KEY=your_api_key
+AZURE_BASE_URL=https://your-resource.openai.azure.com  # Alternative to AZURE_RESOURCE_NAME
+AI_MODEL=your-deployment-name
+```
+
+Optional reasoning configuration:
+
+```bash
+AZURE_REASONING_EFFORT=low      # Optional: low, medium, high
+AZURE_REASONING_SUMMARY=detailed  # Optional: none, brief, detailed
 ```
 
 ### AWS Bedrock
@@ -126,6 +158,42 @@ Optional custom URL:
 OLLAMA_BASE_URL=http://localhost:11434
 ```
 
+### 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.
+
+**Basic Usage (Vercel-hosted Gateway):**
+
+```bash
+AI_GATEWAY_API_KEY=your_gateway_api_key
+AI_MODEL=openai/gpt-4o
+```
+
+**Custom Gateway URL (for local development or self-hosted Gateway):**
+
+```bash
+AI_GATEWAY_API_KEY=your_custom_api_key
+AI_GATEWAY_BASE_URL=https://your-custom-gateway.com/v1/ai
+AI_MODEL=openai/gpt-4o
+```
+
+Model format uses `provider/model` syntax:
+
+-   `openai/gpt-4o` - OpenAI GPT-4o
+-   `anthropic/claude-sonnet-4-5` - Anthropic Claude Sonnet 4.5
+-   `google/gemini-2.0-flash` - Google Gemini 2.0 Flash
+
+**Configuration notes:**
+
+-   If `AI_GATEWAY_BASE_URL` is not set, the default Vercel Gateway URL (`https://ai-gateway.vercel.sh/v1/ai`) is used
+-   Custom base URL is useful for:
+    -   Local development with a custom Gateway instance
+    -   Self-hosted AI Gateway deployments
+    -   Enterprise proxy configurations
+-   When using a custom base URL, you must also provide `AI_GATEWAY_API_KEY`
+
+Get your API key from the [Vercel AI Gateway dashboard](https://vercel.com/ai-gateway).
+
 ## Auto-Detection
 
 If you only configure **one** provider's API key, the system will automatically detect and use that provider. No need to set `AI_PROVIDER`.
@@ -133,7 +201,7 @@ 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, azure, bedrock, openrouter, ollama
+AI_PROVIDER=google  # or: openai, anthropic, deepseek, siliconflow, doubao, azure, bedrock, openrouter, ollama, gateway, sglang
 ```
 
 ## Model Capability Requirements

docs/en/cloudflare-deploy.md

@@ -0,0 +1,267 @@
+# Deploy on Cloudflare Workers
+
+This project can be deployed as a **Cloudflare Worker** using the **OpenNext adapter**, giving you:
+
+- Global edge deployment
+- Very low latency
+- Free `workers.dev` hosting
+- Full Next.js ISR support via R2 (optional)
+
+> **Important Windows Note:** OpenNext and Wrangler are **not fully reliable on native Windows**. Recommended options:
+>
+> - Use **GitHub Codespaces** (works perfectly)
+> - OR use **WSL (Linux)**
+>
+> Pure Windows builds may fail due to WASM file path issues.
+
+---
+
+## Prerequisites
+
+1. A **Cloudflare account** (free tier works for basic deployment)
+2. **Node.js 18+**
+3. **Wrangler CLI** installed (dev dependency is fine):
+
+```bash
+npm install -D wrangler
+```
+
+4. Cloudflare login:
+
+```bash
+npx wrangler login
+```
+
+> **Note:** A payment method is only required if you want to enable R2 for ISR caching. Basic Workers deployment is free.
+
+---
+
+## Step 1 — Install dependencies
+
+```bash
+npm install
+```
+
+---
+
+## Step 2 — Configure environment variables
+
+Cloudflare uses a different file for local testing.
+
+### 1) Create `.dev.vars` (for Cloudflare local + deploy)
+
+```bash
+cp env.example .dev.vars
+```
+
+Fill in your API keys and configuration.
+
+### 2) Make sure `.env.local` also exists (for regular Next.js dev)
+
+```bash
+cp env.example .env.local
+```
+
+Fill in the same values there.
+
+---
+
+## Step 3 — Choose your deployment type
+
+### Option A: Deploy WITHOUT R2 (Simple, Free)
+
+If you don't need ISR caching, you can deploy without R2:
+
+**1. Use simple `open-next.config.ts`:**
+
+```ts
+import { defineCloudflareConfig } from "@opennextjs/cloudflare/config"
+
+export default defineCloudflareConfig({})
+```
+
+**2. Use simple `wrangler.jsonc` (without r2_buckets):**
+
+```jsonc
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "main": ".open-next/worker.js",
+  "name": "next-ai-draw-io-worker",
+  "compatibility_date": "2025-12-08",
+  "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
+  "assets": {
+    "directory": ".open-next/assets",
+    "binding": "ASSETS"
+  },
+  "services": [
+    {
+      "binding": "WORKER_SELF_REFERENCE",
+      "service": "next-ai-draw-io-worker"
+    }
+  ]
+}
+```
+
+Skip to **Step 4**.
+
+---
+
+### Option B: Deploy WITH R2 (Full ISR Support)
+
+R2 enables **Incremental Static Regeneration (ISR)** caching. Requires a payment method on your Cloudflare account.
+
+**1. Create an R2 bucket** in the Cloudflare Dashboard:
+
+- Go to **Storage & Databases → R2**
+- Click **Create bucket**
+- Name it: `next-inc-cache`
+
+**2. Configure `open-next.config.ts`:**
+
+```ts
+import { defineCloudflareConfig } from "@opennextjs/cloudflare/config"
+import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache"
+
+export default defineCloudflareConfig({
+  incrementalCache: r2IncrementalCache,
+})
+```
+
+**3. Configure `wrangler.jsonc` (with R2):**
+
+```jsonc
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "main": ".open-next/worker.js",
+  "name": "next-ai-draw-io-worker",
+  "compatibility_date": "2025-12-08",
+  "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
+  "assets": {
+    "directory": ".open-next/assets",
+    "binding": "ASSETS"
+  },
+  "r2_buckets": [
+    {
+      "binding": "NEXT_INC_CACHE_R2_BUCKET",
+      "bucket_name": "next-inc-cache"
+    }
+  ],
+  "services": [
+    {
+      "binding": "WORKER_SELF_REFERENCE",
+      "service": "next-ai-draw-io-worker"
+    }
+  ]
+}
+```
+
+> **Important:** The `bucket_name` must exactly match the name you created in the Cloudflare dashboard.
+
+---
+
+## Step 4 — Register a workers.dev subdomain (first-time only)
+
+Before your first deployment, you need a workers.dev subdomain.
+
+**Option 1: Via Cloudflare Dashboard (Recommended)**
+
+Visit: https://dash.cloudflare.com → Workers & Pages → Overview → Set up a subdomain
+
+**Option 2: During deploy**
+
+When you run `npm run deploy`, Wrangler may prompt:
+
+```
+Would you like to register a workers.dev subdomain? (Y/n)
+```
+
+Type `Y` and choose a subdomain name.
+
+> **Note:** In CI/CD or non-interactive environments, the prompt won't appear. Register via the dashboard first.
+
+---
+
+## Step 5 — Deploy to Cloudflare
+
+```bash
+npm run deploy
+```
+
+What the script does:
+
+- Builds the Next.js app
+- Converts it to a Cloudflare Worker via OpenNext
+- Uploads static assets
+- Publishes the Worker
+
+Your app will be available at:
+
+```
+https://<worker-name>.<your-subdomain>.workers.dev
+```
+
+---
+
+## Common issues & fixes
+
+### `You need to register a workers.dev subdomain`
+
+**Cause:** No workers.dev subdomain registered for your account.
+
+**Fix:** Go to https://dash.cloudflare.com → Workers & Pages → Set up a subdomain.
+
+---
+
+### `Please enable R2 through the Cloudflare Dashboard`
+
+**Cause:** R2 is configured in wrangler.jsonc but not enabled on your account.
+
+**Fix:** Either enable R2 (requires payment method) or use Option A (deploy without R2).
+
+---
+
+### `No R2 binding "NEXT_INC_CACHE_R2_BUCKET" found`
+
+**Cause:** `r2_buckets` is missing from `wrangler.jsonc`.
+
+**Fix:** Add the `r2_buckets` section or switch to Option A (without R2).
+
+---
+
+### `Can't set compatibility date in the future`
+
+**Cause:** `compatibility_date` in wrangler config is set to a future date.
+
+**Fix:** Change `compatibility_date` to today or an earlier date.
+
+---
+
+### Windows error: `resvg.wasm?module` (ENOENT)
+
+**Cause:** Windows filenames cannot include `?`, but a wasm asset uses `?module` in its filename.
+
+**Fix:** Build/deploy on Linux (WSL, Codespaces, or CI).
+
+---
+
+## Optional: Preview locally
+
+Preview the Worker locally before deploying:
+
+```bash
+npm run preview
+```
+
+---
+
+## Summary
+
+| Feature | Without R2 | With R2 |
+|---------|------------|---------|
+| Cost | Free | Requires payment method |
+| ISR Caching | No | Yes |
+| Static Pages | Yes | Yes |
+| API Routes | Yes | Yes |
+| Setup Complexity | Simple | Moderate |
+
+Choose **without R2** for testing or simple apps. Choose **with R2** for production apps that need ISR caching.

docs/en/docker.md

@@ -0,0 +1,29 @@
+# Run with Docker
+
+If you just want to run it locally, the best way is to use Docker.
+
+First, install Docker if you haven't already: [Get Docker](https://docs.docker.com/get-docker/)
+
+Then run:
+
+```bash
+docker run -d -p 3000:3000 \
+  -e AI_PROVIDER=openai \
+  -e AI_MODEL=gpt-4o \
+  -e OPENAI_API_KEY=your_api_key \
+  ghcr.io/dayuanjiang/next-ai-draw-io:latest
+```
+
+Or use an env file:
+
+```bash
+cp env.example .env
+# Edit .env with your configuration
+docker run -d -p 3000:3000 --env-file .env 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.
+
+> **Offline Deployment:** If `embed.diagrams.net` is blocked, see [Offline Deployment](./offline-deployment.md) for configuration options.

docs/en/offline-deployment.md

@@ -33,7 +33,7 @@ services:
 | Scenario | URL Value |
 |----------|-----------|
 | Localhost | `http://localhost:8080` |
-| Remote/Server | `http://YOUR_SERVER_IP:8080` or `https://drawio.your-domain.com` |
+| Remote/Server | `http://YOUR_SERVER_IP:8080` |
 
 **Do NOT use** internal Docker aliases like `http://drawio:8080`; the browser cannot resolve them.
 

docs/ja/README_JA.md

@@ -4,7 +4,7 @@
 
 **AI搭載のダイアグラム作成ツール - チャット、描画、可視化**
 
-[English](../README.md) | [中文](./README_CN.md) | 日本語
+[English](../../README.md) | [中文](../cn/README_CN.md) | 日本語
 
 [![TrendShift](https://trendshift.io/api/badge/repositories/15449)](https://next-ai-drawio.jiang.jp/)
 
@@ -13,12 +13,14 @@
 [![React](https://img.shields.io/badge/React-19.x-61dafb)](https://react.dev/)
 [![Sponsor](https://img.shields.io/badge/Sponsor-❤-ea4aaa)](https://github.com/sponsors/DayuanJiang)
 
-[![Live Demo](../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/)
+[![Live Demo](../../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/)
 
 </div>
 
 AI機能とdraw.ioダイアグラムを統合したNext.jsウェブアプリケーションです。自然言語コマンドとAI支援の可視化により、ダイアグラムを作成、修正、強化できます。
 
+> 注：<img src="https://raw.githubusercontent.com/DayuanJiang/next-ai-draw-io/main/public/doubao-color.png" alt="" height="20" /> [ByteDance Doubao](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project) のご支援により、デモサイトに強力な K2-thinking モデルを導入しました！
+
 https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 
 ## 目次
@@ -26,14 +28,19 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
   - [目次](#目次)
   - [例](#例)
   - [機能](#機能)
+  - [MCPサーバー（プレビュー）](#mcpサーバープレビュー)
+    - [Claude Code CLI](#claude-code-cli)
   - [はじめに](#はじめに)
     - [オンラインで試す](#オンラインで試す)
-    - [Dockerで実行（推奨）](#dockerで実行推奨)
+    - [デスクトップアプリケーション](#デスクトップアプリケーション)
+    - [Dockerで実行](#dockerで実行)
     - [インストール](#インストール)
   - [デプロイ](#デプロイ)
+    - [EdgeOne Pagesへのデプロイ](#edgeone-pagesへのデプロイ)
+    - [Vercelへのデプロイ（推奨）](#vercelへのデプロイ推奨)
+    - [Cloudflare Workersへのデプロイ](#cloudflare-workersへのデプロイ)
   - [マルチプロバイダーサポート](#マルチプロバイダーサポート)
   - [仕組み](#仕組み)
-  - [プロジェクト構造](#プロジェクト構造)
   - [サポート＆お問い合わせ](#サポートお問い合わせ)
   - [スター履歴](#スター履歴)
 
@@ -47,31 +54,31 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
     <td colspan="2" valign="top" align="center">
       <strong>アニメーションTransformerコネクタ</strong><br />
       <p><strong>プロンプト：</strong> **アニメーションコネクタ**付きのTransformerアーキテクチャ図を作成してください。</p>
-      <img src="../public/animated_connectors.svg" alt="アニメーションコネクタ付きTransformerアーキテクチャ" width="480" />
+      <img src="../../public/animated_connectors.svg" alt="アニメーションコネクタ付きTransformerアーキテクチャ" width="480" />
     </td>
   </tr>
   <tr>
     <td width="50%" valign="top">
       <strong>GCPアーキテクチャ図</strong><br />
       <p><strong>プロンプト：</strong> **GCPアイコン**を使用してGCPアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
-      <img src="../public/gcp_demo.svg" alt="GCPアーキテクチャ図" width="480" />
+      <img src="../../public/gcp_demo.svg" alt="GCPアーキテクチャ図" width="480" />
     </td>
     <td width="50%" valign="top">
       <strong>AWSアーキテクチャ図</strong><br />
       <p><strong>プロンプト：</strong> **AWSアイコン**を使用してAWSアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
-      <img src="../public/aws_demo.svg" alt="AWSアーキテクチャ図" width="480" />
+      <img src="../../public/aws_demo.svg" alt="AWSアーキテクチャ図" width="480" />
     </td>
   </tr>
   <tr>
     <td width="50%" valign="top">
       <strong>Azureアーキテクチャ図</strong><br />
       <p><strong>プロンプト：</strong> **Azureアイコン**を使用してAzureアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
-      <img src="../public/azure_demo.svg" alt="Azureアーキテクチャ図" width="480" />
+      <img src="../../public/azure_demo.svg" alt="Azureアーキテクチャ図" width="480" />
     </td>
     <td width="50%" valign="top">
       <strong>猫のスケッチ</strong><br />
       <p><strong>プロンプト：</strong> かわいい猫を描いてください。</p>
-      <img src="../public/cat_demo.svg" alt="猫の絵" width="240" />
+      <img src="../../public/cat_demo.svg" alt="猫の絵" width="240" />
     </td>
   </tr>
 </table>
@@ -88,47 +95,55 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 -   **クラウドアーキテクチャダイアグラムサポート**：クラウドアーキテクチャダイアグラムの生成を専門的にサポート（AWS、GCP、Azure）
 -   **アニメーションコネクタ**：より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成
 
+## MCPサーバー（プレビュー）
+
+> **プレビュー機能**：この機能は実験的であり、安定しない可能性があります。
+
+MCP（Model Context Protocol）を介して、Claude Desktop、Cursor、VS CodeなどのAIエージェントでNext AI Draw.ioを使用できます。
+
+```json
+{
+  "mcpServers": {
+    "drawio": {
+      "command": "npx",
+      "args": ["@next-ai-drawio/mcp-server@latest"]
+    }
+  }
+}
+```
+
+### Claude Code CLI
+
+```bash
+claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest
+```
+
+Claudeにダイアグラムの作成を依頼：
+> 「ログイン、MFA、セッション管理を含むユーザー認証のフローチャートを作成してください」
+
+ダイアグラムがリアルタイムでブラウザに表示されます！
+
+詳細は[MCPサーバーREADME](../../packages/mcp-server/README.md)をご覧ください（VS Code、Cursorなどのクライアント設定も含む）。
+
 ## はじめに
 
 ### オンラインで試す
 
 インストール不要！デモサイトで直接お試しください：
 
-[![Live Demo](../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/)
+[![Live Demo](../../public/live-demo-button.svg)](https://next-ai-drawio.jiang.jp/)
-
-> 注意：アクセス数が多いため、デモサイトでは現在 minimax-m2 モデルを使用しています。最高の結果を得るには、Claude Sonnet 4.5 または Claude Opus 4.5 でのセルフホスティングをお勧めします。
 
 > **自分のAPIキーを使用**：自分のAPIキーを使用することで、デモサイトの利用制限を回避できます。チャットパネルの設定アイコンをクリックして、プロバイダーとAPIキーを設定してください。キーはブラウザのローカルに保存され、サーバーには保存されません。
 
-### Dockerで実行（推奨）
+### デスクトップアプリケーション
 
-ローカルで実行したいだけなら、Dockerを使用するのが最も簡単です。
+[Releases ページ](https://github.com/DayuanJiang/next-ai-draw-io/releases)からお使いのプラットフォーム用のネイティブデスクトップアプリをダウンロードしてください：
 
-まず、Dockerをインストールしていない場合はインストールしてください：[Dockerを入手](https://docs.docker.com/get-docker/)
+対応プラットフォーム：Windows、macOS、Linux。
 
-次に実行：
+### Dockerで実行
 
-```bash
+[Docker ガイドを参照](./docker.md)
-docker run -d -p 3000:3000 \
-  -e AI_PROVIDER=openai \
-  -e AI_MODEL=gpt-4o \
-  -e OPENAI_API_KEY=your_api_key \
-  ghcr.io/dayuanjiang/next-ai-draw-io:latest
-```
-
-または env ファイルを使用：
-
-```bash
-cp env.example .env
-# .env を編集して設定を入力
-docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest
-```
-
-ブラウザで [http://localhost:3000](http://localhost:3000) を開いてください。
-
-環境変数はお好みのAIプロバイダー設定に置き換えてください。利用可能なオプションについては[マルチプロバイダーサポート](#マルチプロバイダーサポート)を参照してください。
-
-> **オフラインデプロイ：** `embed.diagrams.net` がブロックされている場合は、[オフラインデプロイガイド](./offline-deployment.md) で設定オプションをご確認ください。
 
 ### インストール
 
@@ -137,56 +152,50 @@ docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:l
 ```bash
 git clone https://github.com/DayuanJiang/next-ai-draw-io
 cd next-ai-draw-io
-```
-
-2. 依存関係をインストール：
-
-```bash
 npm install
-```
-
-3. AIプロバイダーを設定：
-
-ルートディレクトリに`.env.local`ファイルを作成：
-
-```bash
 cp env.example .env.local
 ```
 
-`.env.local`を編集して選択したプロバイダーを設定：
-
--   `AI_PROVIDER`を選択したプロバイダーに設定（bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow）
--   `AI_MODEL`を使用する特定のモデルに設定
--   プロバイダーに必要なAPIキーを追加
--   `TEMPERATURE`：オプションの温度設定（例：`0`で決定論的な出力）。温度をサポートしないモデル（推論モデルなど）では設定しないでください。
--   `ACCESS_CODE_LIST` アクセスパスワード（オプション）。カンマ区切りで複数のパスワードを指定できます。
-
-> 警告：`ACCESS_CODE_LIST`を設定しない場合、誰でもデプロイされたサイトに直接アクセスできるため、トークンが急速に消費される可能性があります。このオプションを設定することをお勧めします。
-
 詳細な設定手順については[プロバイダー設定ガイド](./ai-providers.md)を参照してください。
 
-4. 開発サーバーを起動：
+2. 開発サーバーを起動：
 
 ```bash
 npm run dev
 ```
 
-5. ブラウザで[http://localhost:3000](http://localhost:3000)を開いてアプリケーションを確認。
+3. ブラウザで[http://localhost:6002](http://localhost:6002)を開いてアプリケーションを確認。
 
 ## デプロイ
 
-Next.jsアプリをデプロイする最も簡単な方法は、Next.jsの作成者による[Vercelプラットフォーム](https://vercel.com/new)を使用することです。
+### EdgeOne Pagesへのデプロイ
+
+[Tencent EdgeOne Pages](https://pages.edgeone.ai/)を使用してワンクリックでデプロイできます。
+
+このボタンでデプロイ：
+
+[![Deploy to EdgeOne Pages](https://cdnstatic.tencentcs.com/edgeone/pages/deploy.svg)](https://edgeone.ai/pages/new?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
+
+詳細は[Tencent EdgeOne Pagesドキュメント](https://pages.edgeone.ai/document/deployment-overview)をご覧ください。
+
+また、Tencent EdgeOne Pagesでデプロイすると、[DeepSeekモデルの毎日の無料クォータ](https://pages.edgeone.ai/document/edge-ai)が付与されます。
+
+### 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)
+
+Next.jsアプリをデプロイする最も簡単な方法は、Next.jsの作成者による[Vercelプラットフォーム](https://vercel.com/new)を使用することです。ローカルの`.env.local`ファイルと同様に、Vercelダッシュボードで**環境変数を設定**してください。
 
 詳細は[Next.jsデプロイメントドキュメント](https://nextjs.org/docs/app/building-your-application/deploying)をご覧ください。
 
-または、このボタンでデプロイできます：
+### Cloudflare Workersへのデプロイ
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FDayuanJiang%2Fnext-ai-draw-io)
 
-ローカルの`.env.local`ファイルと同様に、Vercelダッシュボードで**環境変数を設定**してください。
+[Cloudflare デプロイガイドを参照](./cloudflare-deploy.md)
 
 
 ## マルチプロバイダーサポート
 
+-   [ByteDance Doubao](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project)
 -   AWS Bedrock（デフォルト）
 -   OpenAI
 -   Anthropic
@@ -196,14 +205,16 @@ Next.jsアプリをデプロイする最も簡単な方法は、Next.jsの作成
 -   OpenRouter
 -   DeepSeek
 -   SiliconFlow
+-   SGLang
+-   Vercel AI Gateway
 
 AWS BedrockとOpenRouter以外のすべてのプロバイダーはカスタムエンドポイントをサポートしています。
 
 📖 **[詳細なプロバイダー設定ガイド](./ai-providers.md)** - 各プロバイダーの設定手順をご覧ください。
 
-**モデル要件**：このタスクは厳密なフォーマット制約（draw.io XML）を持つ長文テキスト生成を伴うため、強力なモデル機能が必要です。Claude Sonnet 4.5、GPT-4o、Gemini 2.0、DeepSeek V3/R1を推奨します。
+**モデル要件**：このタスクは厳密なフォーマット制約（draw.io XML）を持つ長文テキスト生成を伴うため、強力なモデル機能が必要です。Claude Sonnet 4.5、GPT-5.1、Gemini 3 Pro、DeepSeek V3.2/R1を推奨します。
 
-注：`claude-sonnet-4-5`はAWSロゴ付きのdraw.ioダイアグラムで学習されているため、AWSアーキテクチャダイアグラムを作成したい場合は最適な選択です。
+注：`claude`シリーズはAWS、Azure、GCPなどのクラウドアーキテクチャロゴ付きのdraw.ioダイアグラムで学習されているため、クラウドアーキテクチャダイアグラムを作成したい場合は最適な選択です。
 
 
 ## 仕組み
@@ -216,27 +227,11 @@ AWS BedrockとOpenRouter以外のすべてのプロバイダーはカスタム
 
 ダイアグラムはdraw.ioでレンダリングできるXMLとして表現されます。AIがコマンドを処理し、それに応じてこのXMLを生成または変更します。
 
-## プロジェクト構造
-
-```
-app/                  # Next.js App Router
-  api/chat/           # AIツール付きチャットAPIエンドポイント
-  page.tsx            # DrawIO埋め込み付きメインページ
-components/           # Reactコンポーネント
-  chat-panel.tsx      # ダイアグラム制御付きチャットインターフェース
-  chat-input.tsx      # ファイルアップロード付きユーザー入力コンポーネント
-  history-dialog.tsx  # ダイアグラムバージョン履歴ビューア
-  ui/                 # UIコンポーネント（ボタン、カードなど）
-contexts/             # Reactコンテキストプロバイダー
-  diagram-context.tsx # グローバルダイアグラム状態管理
-lib/                  # ユーティリティ関数とヘルパー
-  ai-providers.ts     # マルチプロバイダーAI設定
-  utils.ts            # XML処理と変換ユーティリティ
-public/               # サンプル画像を含む静的アセット
-```
 
 ## サポート＆お問い合わせ
 
+**デモサイトのAPIトークン使用を支援してくださった[ByteDance Doubao](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project)に特別な感謝を申し上げます！** ARKプラットフォームに登録すると、50万トークンが無料でもらえます！
+
 このプロジェクトが役に立ったら、ライブデモサイトのホスティングを支援するために[スポンサー](https://github.com/sponsors/DayuanJiang)をご検討ください！
 
 サポートやお問い合わせについては、GitHubリポジトリでissueを開くか、メンテナーにご連絡ください：

docs/ja/ai-providers.md

@@ -0,0 +1,236 @@
+# AIプロバイダーの設定
+
+このガイドでは、next-ai-draw-io でさまざまな AI モデルプロバイダーを設定する方法について説明します。
+
+## クイックスタート
+
+1. `.env.example` を `.env.local` にコピーします
+2. 選択したプロバイダーの API キーを設定します
+3. `AI_MODEL` を希望のモデルに設定します
+4. `npm run dev` を実行します
+
+## 対応プロバイダー
+
+### Doubao (ByteDance Volcengine)
+
+> **無料トークン**: [Volcengine ARK プラットフォーム](https://console.volcengine.com/ark/region:ark+cn-beijing/overview?briefPage=0&briefType=introduce&type=new&utm_campaign=doubao&utm_content=aidrawio&utm_medium=github&utm_source=coopensrc&utm_term=project)に登録すると、すべてのモデルで使える50万トークンが無料で入手できます！
+
+```bash
+DOUBAO_API_KEY=your_api_key
+AI_MODEL=doubao-seed-1-8-251215  # または他の Doubao モデル
+```
+
+### Google Gemini
+
+```bash
+GOOGLE_GENERATIVE_AI_API_KEY=your_api_key
+AI_MODEL=gemini-2.0-flash
+```
+
+任意のカスタムエンドポイント:
+
+```bash
+GOOGLE_BASE_URL=https://your-custom-endpoint
+```
+
+### OpenAI
+
+```bash
+OPENAI_API_KEY=your_api_key
+AI_MODEL=gpt-4o
+```
+
+任意のカスタムエンドポイント（OpenAI 互換サービス用）:
+
+```bash
+OPENAI_BASE_URL=https://your-custom-endpoint/v1
+```
+
+### Anthropic
+
+```bash
+ANTHROPIC_API_KEY=your_api_key
+AI_MODEL=claude-sonnet-4-5-20250514
+```
+
+任意のカスタムエンドポイント:
+
+```bash
+ANTHROPIC_BASE_URL=https://your-custom-endpoint
+```
+
+### DeepSeek
+
+```bash
+DEEPSEEK_API_KEY=your_api_key
+AI_MODEL=deepseek-chat
+```
+
+任意のカスタムエンドポイント:
+
+```bash
+DEEPSEEK_BASE_URL=https://your-custom-endpoint
+```
+
+### SiliconFlow (OpenAI 互換)
+
+```bash
+SILICONFLOW_API_KEY=your_api_key
+AI_MODEL=deepseek-ai/DeepSeek-V3  # 例; 任意の SiliconFlow モデル ID を使用
+```
+
+任意のカスタムエンドポイント（デフォルトは推奨ドメイン）:
+
+```bash
+SILICONFLOW_BASE_URL=https://api.siliconflow.com/v1  # または https://api.siliconflow.cn/v1
+```
+
+### SGLang
+
+```bash
+SGLANG_API_KEY=your_api_key
+AI_MODEL=your_model_id
+```
+
+任意のカスタムエンドポイント:
+
+```bash
+SGLANG_BASE_URL=https://your-custom-endpoint/v1
+```
+
+### Azure OpenAI
+
+```bash
+AZURE_API_KEY=your_api_key
+AZURE_RESOURCE_NAME=your-resource-name  # 必須: Azure リソース名
+AI_MODEL=your-deployment-name
+```
+
+またはリソース名の代わりにカスタムエンドポイントを使用:
+
+```bash
+AZURE_API_KEY=your_api_key
+AZURE_BASE_URL=https://your-resource.openai.azure.com  # AZURE_RESOURCE_NAME の代替
+AI_MODEL=your-deployment-name
+```
+
+任意の推論設定:
+
+```bash
+AZURE_REASONING_EFFORT=low      # 任意: low, medium, high
+AZURE_REASONING_SUMMARY=detailed  # 任意: none, brief, detailed
+```
+
+### AWS Bedrock
+
+```bash
+AWS_REGION=us-west-2
+AWS_ACCESS_KEY_ID=your_access_key_id
+AWS_SECRET_ACCESS_KEY=your_secret_access_key
+AI_MODEL=anthropic.claude-sonnet-4-5-20250514-v1:0
+```
+
+注: AWS 上（IAM ロールを持つ Lambda や EC2）では、認証情報は IAM ロールから自動的に取得されます。
+
+### OpenRouter
+
+```bash
+OPENROUTER_API_KEY=your_api_key
+AI_MODEL=anthropic/claude-sonnet-4
+```
+
+任意のカスタムエンドポイント:
+
+```bash
+OPENROUTER_BASE_URL=https://your-custom-endpoint
+```
+
+### Ollama (ローカル)
+
+```bash
+AI_PROVIDER=ollama
+AI_MODEL=llama3.2
+```
+
+任意のカスタム URL:
+
+```bash
+OLLAMA_BASE_URL=http://localhost:11434
+```
+
+### Vercel AI Gateway
+
+Vercel AI Gateway は、単一の API キーで複数の AI プロバイダーへの統合アクセスを提供します。これにより認証が簡素化され、複数の API キーを管理することなくプロバイダーを切り替えることができます。
+
+**基本的な使用法 (Vercel ホストの Gateway):**
+
+```bash
+AI_GATEWAY_API_KEY=your_gateway_api_key
+AI_MODEL=openai/gpt-4o
+```
+
+**カスタム Gateway URL (ローカル開発またはセルフホスト Gateway 用):**
+
+```bash
+AI_GATEWAY_API_KEY=your_custom_api_key
+AI_GATEWAY_BASE_URL=https://your-custom-gateway.com/v1/ai
+AI_MODEL=openai/gpt-4o
+```
+
+モデル形式は `provider/model` 構文を使用します:
+
+-   `openai/gpt-4o` - OpenAI GPT-4o
+-   `anthropic/claude-sonnet-4-5` - Anthropic Claude Sonnet 4.5
+-   `google/gemini-2.0-flash` - Google Gemini 2.0 Flash
+
+**設定に関する注意点:**
+
+-   `AI_GATEWAY_BASE_URL` が設定されていない場合、デフォルトの Vercel Gateway URL (`https://ai-gateway.vercel.sh/v1/ai`) が使用されます
+-   カスタムベース URL は以下の場合に便利です:
+    -   カスタム Gateway インスタンスを使用したローカル開発
+    -   セルフホスト AI Gateway デプロイメント
+    -   エンタープライズプロキシ設定
+-   カスタムベース URL を使用する場合、`AI_GATEWAY_API_KEY` も指定する必要があります
+
+[Vercel AI Gateway ダッシュボード](https://vercel.com/ai-gateway)から API キーを取得してください。
+
+## 自動検出
+
+**1つ**のプロバイダーの API キーのみを設定した場合、システムはそのプロバイダーを自動的に検出して使用します。`AI_PROVIDER` を設定する必要はありません。
+
+**複数**の API キーを設定する場合は、`AI_PROVIDER` を明示的に設定する必要があります:
+
+```bash
+AI_PROVIDER=google  # または: openai, anthropic, deepseek, siliconflow, doubao, azure, bedrock, openrouter, ollama, gateway, sglang
+```
+
+## モデル性能要件
+
+このタスクは、厳密なフォーマット制約（draw.io XML）を伴う長文テキストの生成を含むため、非常に強力なモデル性能が必要です。
+
+**推奨モデル**:
+
+-   Claude Sonnet 4.5 / Opus 4.5
+
+**Ollama に関する注意**: Ollama はプロバイダーとしてサポートされていますが、DeepSeek R1 や Qwen3-235B のような高性能モデルをローカルで実行していない限り、このユースケースでは一般的に実用的ではありません。
+
+## Temperature（温度）設定
+
+環境変数で Temperature を任意に設定できます:
+
+```bash
+TEMPERATURE=0  # より決定論的な出力（ダイアグラムに推奨）
+```
+
+**重要**: 以下の Temperature 設定をサポートしていないモデルでは、`TEMPERATURE` を未設定のままにしてください:
+- GPT-5.1 およびその他の推論モデル
+- 一部の特殊なモデル
+
+未設定の場合、モデルはデフォルトの挙動を使用します。
+
+## 推奨事項
+
+-   **最高の体験**: 画像からダイアグラムを生成する機能には、ビジョン（画像認識）をサポートするモデル（GPT-4o, Claude, Gemini）を使用してください
+-   **低コスト**: DeepSeek は競争力のある価格を提供しています
+-   **プライバシー**: 完全にローカルなオフライン操作には Ollama を使用してください（強力なハードウェアが必要です）
+-   **柔軟性**: OpenRouter は単一の API で多数のモデルへのアクセスを提供します

docs/ja/cloudflare-deploy.md

@@ -0,0 +1,267 @@
+# Cloudflare Workers へのデプロイ
+
+このプロジェクトは **OpenNext アダプター** を使用して **Cloudflare Worker** としてデプロイすることができ、以下のメリットがあります：
+
+- グローバルエッジへのデプロイ
+- 超低レイテンシー
+- 無料の `workers.dev` ホスティング
+- R2 を介した完全な Next.js ISR サポート（オプション）
+
+> **Windows ユーザー向けの重要な注意:** OpenNext と Wrangler は、**ネイティブ Windows 環境では完全には信頼できません**。以下の方法を推奨します：
+>
+> - **GitHub Codespaces** を使用する（完全に動作します）
+> - または **WSL (Linux)** を使用する
+>
+> 純粋な Windows 環境でのビルドは、WASM ファイルパスの問題により失敗する可能性があります。
+
+---
+
+## 前提条件
+
+1. **Cloudflare アカウント**（基本的なデプロイには無料プランで十分です）
+2. **Node.js 18以上**
+3. **Wrangler CLI** のインストール（開発依存関係で問題ありません）：
+
+```bash
+npm install -D wrangler
+```
+
+4. Cloudflare へのログイン：
+
+```bash
+npx wrangler login
+```
+
+> **注意:** 支払い方法の登録が必要なのは、ISR キャッシュのために R2 を有効にする場合のみです。基本的な Workers へのデプロイは無料です。
+
+---
+
+## ステップ 1 — 依存関係のインストール
+
+```bash
+npm install
+```
+
+---
+
+## ステップ 2 — 環境変数の設定
+
+Cloudflare はローカルテスト用に別のファイルを使用します。
+
+### 1) `.dev.vars` の作成（Cloudflare ローカルおよびデプロイ用）
+
+```bash
+cp env.example .dev.vars
+```
+
+API キーと設定を入力してください。
+
+### 2) `.env.local` も存在することを確認（通常の Next.js 開発用）
+
+```bash
+cp env.example .env.local
+```
+
+同じ値を入力してください。
+
+---
+
+## ステップ 3 — デプロイタイプの選択
+
+### オプション A: R2 なしでのデプロイ（シンプル、無料）
+
+ISR キャッシュが不要な場合は、R2 なしでデプロイできます：
+
+**1. シンプルな `open-next.config.ts` を使用:**
+
+```ts
+import { defineCloudflareConfig } from "@opennextjs/cloudflare/config"
+
+export default defineCloudflareConfig({})
+```
+
+**2. シンプルな `wrangler.jsonc` を使用（r2_buckets なし）:**
+
+```jsonc
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "main": ".open-next/worker.js",
+  "name": "next-ai-draw-io-worker",
+  "compatibility_date": "2025-12-08",
+  "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
+  "assets": {
+    "directory": ".open-next/assets",
+    "binding": "ASSETS"
+  },
+  "services": [
+    {
+      "binding": "WORKER_SELF_REFERENCE",
+      "service": "next-ai-draw-io-worker"
+    }
+  ]
+}
+```
+
+**ステップ 4** へ進んでください。
+
+---
+
+### オプション B: R2 ありでのデプロイ（完全な ISR サポート）
+
+R2 を使用すると **Incremental Static Regeneration (ISR)** キャッシュが有効になります。これには Cloudflare アカウントに支払い方法の登録が必要です。
+
+**1. R2 バケットの作成**（Cloudflare ダッシュボードにて）:
+
+- **Storage & Databases → R2** へ移動
+- **Create bucket** をクリック
+- 名前を入力: `next-inc-cache`
+
+**2. `open-next.config.ts` の設定:**
+
+```ts
+import { defineCloudflareConfig } from "@opennextjs/cloudflare/config"
+import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache"
+
+export default defineCloudflareConfig({
+  incrementalCache: r2IncrementalCache,
+})
+```
+
+**3. `wrangler.jsonc` の設定（R2 あり）:**
+
+```jsonc
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "main": ".open-next/worker.js",
+  "name": "next-ai-draw-io-worker",
+  "compatibility_date": "2025-12-08",
+  "compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
+  "assets": {
+    "directory": ".open-next/assets",
+    "binding": "ASSETS"
+  },
+  "r2_buckets": [
+    {
+      "binding": "NEXT_INC_CACHE_R2_BUCKET",
+      "bucket_name": "next-inc-cache"
+    }
+  ],
+  "services": [
+    {
+      "binding": "WORKER_SELF_REFERENCE",
+      "service": "next-ai-draw-io-worker"
+    }
+  ]
+}
+```
+
+> **重要:** `bucket_name` は Cloudflare ダッシュボードで作成した名前と完全に一致させる必要があります。
+
+---
+
+## ステップ 4 — workers.dev サブドメインの登録（初回のみ）
+
+初回デプロイの前に、workers.dev サブドメインが必要です。
+
+**オプション 1: Cloudflare ダッシュボード経由（推奨）**
+
+アクセス先: https://dash.cloudflare.com → Workers & Pages → Overview → Set up a subdomain
+
+**オプション 2: デプロイ時**
+
+`npm run deploy` を実行した際、Wrangler が以下のように尋ねてくる場合があります：
+
+```
+Would you like to register a workers.dev subdomain? (Y/n)
+```
+
+`Y` を入力し、サブドメイン名を選択してください。
+
+> **注意:** CI/CD や非対話型環境では、このプロンプトは表示されません。事前にダッシュボードで登録してください。
+
+---
+
+## ステップ 5 — Cloudflare へのデプロイ
+
+```bash
+npm run deploy
+```
+
+スクリプトの処理内容：
+
+- Next.js アプリのビルド
+- OpenNext を介した Cloudflare Worker への変換
+- 静的アセットのアップロード
+- Worker の公開
+
+アプリは以下の URL で利用可能になります：
+
+```
+https://<worker-name>.<your-subdomain>.workers.dev
+```
+
+---
+
+## よくある問題と解決策
+
+### `You need to register a workers.dev subdomain`
+
+**原因:** アカウントに workers.dev サブドメインが登録されていません。
+
+**解決策:** https://dash.cloudflare.com → Workers & Pages → Set up a subdomain から登録してください。
+
+---
+
+### `Please enable R2 through the Cloudflare Dashboard`
+
+**原因:** `wrangler.jsonc` で R2 が設定されていますが、アカウントで R2 が有効になっていません。
+
+**解決策:** R2 を有効にする（支払い方法が必要）か、オプション A（R2 なしでデプロイ）を使用してください。
+
+---
+
+### `No R2 binding "NEXT_INC_CACHE_R2_BUCKET" found`
+
+**原因:** `wrangler.jsonc` に `r2_buckets` がありません。
+
+**解決策:** `r2_buckets` セクションを追加するか、オプション A（R2 なし）に切り替えてください。
+
+---
+
+### `Can't set compatibility date in the future`
+
+**原因:** wrangler 設定の `compatibility_date` が未来の日付に設定されています。
+
+**解決策:** `compatibility_date` を今日またはそれ以前の日付に変更してください。
+
+---
+
+### Windows エラー: `resvg.wasm?module` (ENOENT)
+
+**原因:** Windows のファイル名には `?` を含めることができませんが、wasm アセットのファイル名に `?module` が使用されているためです。
+
+**解決策:** Linux 環境（WSL、Codespaces、または CI）でビルド/デプロイしてください。
+
+---
+
+## オプション: ローカルでのプレビュー
+
+デプロイ前に Worker をローカルでプレビューできます：
+
+```bash
+npm run preview
+```
+
+---
+
+## まとめ
+
+| 機能 | R2 なし | R2 あり |
+|---------|------------|---------|
+| コスト | 無料 | 支払い方法が必要 |
+| ISR キャッシュ | なし | あり |
+| 静的ページ | あり | あり |
+| API ルート | あり | あり |
+| 設定の複雑さ | シンプル | 普通 |
+
+テストやシンプルなアプリには **R2 なし** を選んでください。ISR キャッシュが必要な本番アプリには **R2 あり** を選んでください。

docs/ja/docker.md

@@ -0,0 +1,29 @@
+# Dockerで実行する
+
+ローカルで実行したいだけであれば、Dockerを使用するのが最も良い方法です。
+
+まず、Dockerがまだインストールされていない場合はインストールしてください: [Dockerを入手](https://docs.docker.com/get-docker/)
+
+次に、以下を実行します。
+
+```bash
+docker run -d -p 3000:3000 \
+  -e AI_PROVIDER=openai \
+  -e AI_MODEL=gpt-4o \
+  -e OPENAI_API_KEY=your_api_key \
+  ghcr.io/dayuanjiang/next-ai-draw-io:latest
+```
+
+または、envファイルを使用します。
+
+```bash
+cp env.example .env
+# .envを構成に合わせて編集します
+docker run -d -p 3000:3000 --env-file .env ghcr.io/dayuanjiang/next-ai-draw-io:latest
+```
+
+ブラウザで[http://localhost:3000](http://localhost:3000)を開きます。
+
+環境変数は、お好みのAIプロバイダー設定に置き換えてください。利用可能なオプションについては、[AIプロバイダー](./ai-providers.md)を参照してください。
+
+> **オフラインデプロイ:** `embed.diagrams.net`がブロックされている場合は、構成オプションについて[オフラインデプロイ](./offline-deployment.md)を参照してください。

docs/ja/offline-deployment.md

@@ -0,0 +1,38 @@
+# オフラインデプロイ
+
+`embed.diagrams.net` の代わりに draw.io をセルフホストすることで、Next AI Draw.io をオフライン環境にデプロイできます。
+
+**注:** `NEXT_PUBLIC_DRAWIO_BASE_URL` は**ビルド時**の変数です。これを変更する場合は、Docker イメージの再ビルドが必要です。
+
+## Docker Compose のセットアップ
+
+1. リポジトリをクローンし、`.env` ファイルに API キーを定義します。
+2. `docker-compose.yml` を作成します。
+
+```yaml
+services:
+  drawio:
+    image: jgraph/drawio:latest
+    ports: ["8080:8080"]
+  next-ai-draw-io:
+    build:
+      context: .
+      args:
+        - NEXT_PUBLIC_DRAWIO_BASE_URL=http://localhost:8080
+    ports: ["3000:3000"]
+    env_file: .env
+    depends_on: [drawio]
+```
+
+3. `docker compose up -d` を実行し、`http://localhost:3000` にアクセスします。
+
+## 設定と重要な警告
+
+**`NEXT_PUBLIC_DRAWIO_BASE_URL` は、ユーザーのブラウザからアクセスできる必要があります。**
+
+| シナリオ | URL の値 |
+|----------|-----------|
+| ローカルホスト | `http://localhost:8080` |
+| リモート/サーバー | `http://YOUR_SERVER_IP:8080` |
+
+**`http://drawio:8080` のような Docker 内部のエイリアスは絶対に使用しないでください。** ブラウザはこれらを名前解決できません。

docs/shape-libraries/README.md

@@ -0,0 +1,78 @@
+# Draw.io Shape Libraries
+
+Reference: `style="shape=mxgraph.<library>.<shape_name>"`
+
+## Cloud Providers
+
+| Library | Shapes | Prefix | Description | File |
+|---------|--------|--------|-------------|------|
+| aws4 | 1031 | `mxgraph.aws4` | Amazon Web Services (2025) - EC2, S3, Lambda, RDS, etc. | [aws4.md](./aws4.md) |
+| azure2 | 608 | `img/lib/azure2/` | Microsoft Azure (2024) - VMs, Storage, AI, Networking, etc. | [azure2.md](./azure2.md) |
+| gcp2 | 297 | `mxgraph.gcp2` | Google Cloud Platform - Compute Engine, BigQuery, GKE, etc. | [gcp2.md](./gcp2.md) |
+| alibaba_cloud | 273 | `mxgraph.alibaba_cloud` | Alibaba Cloud - ECS, OSS, RDS, SLB, VPC, etc. | [alibaba_cloud.md](./alibaba_cloud.md) |
+| openstack | 18 | `mxgraph.openstack` | OpenStack cloud platform icons | [openstack.md](./openstack.md) |
+| digitalocean | 74 | `mxgraph.digitalocean` | DigitalOcean - Droplets, Spaces, Kubernetes, etc. | [digitalocean.md](./digitalocean.md) |
+| salesforce | 96 | `mxgraph.salesforce` | Salesforce platform icons | [salesforce.md](./salesforce.md) |
+
+## Networking & Infrastructure
+
+| Library | Shapes | Prefix | Description | File |
+|---------|--------|--------|-------------|------|
+| cisco19 | 232 | `mxgraph.cisco19` | Cisco network equipment - routers, switches, firewalls | [cisco19.md](./cisco19.md) |
+| network | 58 | `mxgraph.networks` | General network diagram symbols | [network.md](./network.md) |
+| arista | 45 | `mxgraph.arista` | Arista network switches and equipment | [arista.md](./arista.md) |
+| kubernetes | 40 | `mxgraph.kubernetes` | Kubernetes - pods, services, deployments, nodes | [kubernetes.md](./kubernetes.md) |
+| vvd | 93 | `mxgraph.vvd` | VMware Validated Design icons | [vvd.md](./vvd.md) |
+| rack | 11 | `mxgraph.rack` | Server rack and data center equipment | [rack.md](./rack.md) |
+
+## Business Process
+
+| Library | Shapes | Prefix | Description | File |
+|---------|--------|--------|-------------|------|
+| bpmn | 39 | `mxgraph.bpmn` | Business Process Model and Notation - events, gateways, tasks | [bpmn.md](./bpmn.md) |
+| eip | 36 | `mxgraph.eip` | Enterprise Integration Patterns - messaging, routing | [eip.md](./eip.md) |
+| lean_mapping | 13 | `mxgraph.lean_mapping` | Lean/Value Stream Mapping symbols | [lean_mapping.md](./lean_mapping.md) |
+
+## General Diagrams
+
+| Library | Shapes | Prefix | Description | File |
+|---------|--------|--------|-------------|------|
+| flowchart | 34 | `mxgraph.flowchart` | Standard flowchart symbols - process, decision, data | [flowchart.md](./flowchart.md) |
+| basic | 30 | `mxgraph.basic` | Basic shapes - stars, banners, callouts, hearts | [basic.md](./basic.md) |
+| arrows2 | 34 | `mxgraph.arrows2` | Arrow shapes and connectors | [arrows2.md](./arrows2.md) |
+| infographic | 29 | `mxgraph.infographic` | Infographic elements - charts, icons, badges | [infographic.md](./infographic.md) |
+| sitemap | 50 | `mxgraph.sitemap` | Website sitemap icons - pages, forms, navigation | [sitemap.md](./sitemap.md) |
+
+## UI/Mockups
+
+| Library | Shapes | Prefix | Description | File |
+|---------|--------|--------|-------------|------|
+| android | 17 | `mxgraph.android` | Android UI mockup components | [android.md](./android.md) |
+
+## Enterprise Software
+
+| Library | Shapes | Prefix | Description | File |
+|---------|--------|--------|-------------|------|
+| citrix | 97 | `mxgraph.citrix` | Citrix virtualization - XenApp, XenDesktop, NetScaler | [citrix.md](./citrix.md) |
+| sap | 98 | `mxgraph.sap` | SAP enterprise software icons | [sap.md](./sap.md) |
+| mscae | 73 | `mxgraph.mscae` | Microsoft Cloud and Enterprise symbols | [mscae.md](./mscae.md) |
+| atlassian | 26 | `mxgraph.atlassian` | Atlassian - Jira, Confluence issue types | [atlassian.md](./atlassian.md) |
+
+## Engineering
+
+| Library | Shapes | Prefix | Description | File |
+|---------|--------|--------|-------------|------|
+| fluidpower | 246 | `mxgraph.fluid_power` | Hydraulic/pneumatic engineering symbols | [fluidpower.md](./fluidpower.md) |
+| electrical | 50 | `mxgraph.electrical` | Electrical circuit symbols - resistors, capacitors | [electrical.md](./electrical.md) |
+| pid | 18 | `mxgraph.pid2` | Piping and Instrumentation Diagram symbols | [pid.md](./pid.md) |
+| cabinets | 53 | `mxgraph.cabinets` | Electrical cabinet components - breakers, terminals | [cabinets.md](./cabinets.md) |
+| floorplan | 44 | `mxgraph.floorplan` | Floor plan furniture and fixtures | [floorplan.md](./floorplan.md) |
+
+## Icons & Graphics
+
+| Library | Shapes | Prefix | Description | File |
+|---------|--------|--------|-------------|------|
+| webicons | 176 | `mxgraph.webicons` | Web/social media logos - GitHub, Twitter, AWS, etc. | [webicons.md](./webicons.md) |
+| un-ocha-icons | 242 | `mxgraph.un-ocha-icons` | UN OCHA humanitarian icons | [un-ocha-icons.md](./un-ocha-icons.md) |
+
+**Total: 33 libraries, 4,281 shapes**

docs/shape-libraries/alibaba_cloud.md

@@ -0,0 +1,328 @@
+# alibaba_cloud
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.alibaba_cloud`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.alibaba_cloud.{shape};fillColor=#FF6A00;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+
+
+## Shapes (311)
+
+- `abap_business_application_platform`
+- `acms_application_configuration_manangement`
+- `acr_cloud_container_registry`
+- `actiontrail`
+- `adam_advanced_database_and_application_migration`
+- `adb_analyticdb_for_mysql`
+- `address_purification`
+- `afs_fraud_service`
+- `agw_aligateway`
+- `ahas_application_high_availability_service`
+- `airec_artificial_intelligence_recommendation`
+- `alb_application_load_balancer_01`
+- `alb_application_load_balancer_02`
+- `alibaba_cloud_logo`
+- `alibaba_cloud_logo_chinese`
+- `alibaba_cloud_logo_english`
+- `alimail`
+- `alimt_machine_translation`
+- `aliyun_linux`
+- `amqp_advanced_message_queuing_protocol`
+- `amscloudapp`
+- `analyticdb_for_postgresql`
+- `antibot`
+- `apigateway`
+- `apsara_file_storage_for_hdfs`
+- `apsaravideo_vod`
+- `arms_application_real-time_monitoring_service`
+- `ask_ack_container_service_for_kubernetes`
+- `asm_service_mesh`
+- `assettech`
+- `avds_vulnerability_db_scanning`
+- `baas_blockchain_as_a_service`
+- `bandwidth_bag`
+- `bastionhost`
+- `batchcompute`
+- `bccluster`
+- `beebot`
+- `beian`
+- `bizdevops`
+- `bizworks`
+- `bpstudio`
+- `cas_ssl_central_authentication_service`
+- `cassandra_wide-column_database_01`
+- `cassandra_wide-column_database_02`
+- `ccc_cloud_call_center`
+- `ccn_cloud_connect_network`
+- `ccs_customer_service_01`
+- `ccs_customer_service_02`
+- `cddc_cloud_database_dedicated_cluster`
+- `cdn_content_distribution_network`
+- `cdp_cloudera_cdp`
+- `cdt_cloud_datatransfer`
+- `cen_cloud_enterprise_network`
+- `cfw_cloud_firewall`
+- `cityvisual`
+- `clb_classic_load_balancer_01`
+- `clb_classic_load_balancer_02`
+- `clickhouse`
+- `cloud_auth`
+- `cloud_config`
+- `cloud_display`
+- `cloud_governance_center`
+- `cloud_security_center`
+- `cloud_shield`
+- `cloudap`
+- `cloudbox`
+- `clouddesktop`
+- `clouddev`
+- `cloudphoto`
+- `cloudproc`
+- `cloudshell`
+- `cmn_cloud_managed_network`
+- `cmp_cloud_mobile_push`
+- `cms_cloud_monitor_service`
+- `codepipeline`
+- `codestore`
+- `companyreg`
+- `computenest`
+- `content_security`
+- `coo`
+- `cpns_cell_phone_number_service`
+- `csas_cloud_security_access_service`
+- `cvc_cloud_video_conferencing`
+- `cwh_cloud_web_hosting`
+- `das_database_autonomy_service`
+- `databot`
+- `datahub`
+- `dataphin`
+- `dataquotient`
+- `datav`
+- `dataworks_dataide`
+- `dbaudit`
+- `dbes_database_expert_service`
+- `dbfs_database_file_system`
+- `dbs_database_backup`
+- `dcdn_dynamic_route_for_cdn`
+- `ddh_dedicated_host`
+- `ddos-bgp`
+- `ddos-dip`
+- `ddos-pro`
+- `ddos_protection`
+- `devops`
+- `dg_database_gateway`
+- `directmail`
+- `disk_block_storage`
+- `dlf_data_lake_formation`
+- `dms_data_management_service`
+- `dns_domain_name_system`
+- `dns_privatezone_01`
+- `dns_privatezone_02`
+- `domain`
+- `domain_and_website`
+- `drds_distribute_relational_database_service`
+- `dsi_data_security_insurance`
+- `dts_data_transmission_service`
+- `e-mapreduce`
+- `eais_elastic_accelerated_computing_instances`
+- `eci_elastic_container_instance`
+- `ecs_elastic_compute_service`
+- `edas_enterprise_distributed_application_service`
+- `ehpc_elastic_high_performance_computing`
+- `eip_elastic_ip_address`
+- `elastic_web_hosting`
+- `elasticsearch`
+- `emas_enterprise_mobile_application_studio`
+- `energyexpert`
+- `ens_edge_node_service`
+- `enterprise_website`
+- `eprofile`
+- `esign`
+- `ess_elastic_scaling_service`
+- `eventbridge`
+- `express_connect`
+- `face_recognition`
+- `fc_function_compute`
+- `flow_service`
+- `flowbag`
+- `fnf_serverless_function_flow`
+- `fpga_field_programmable_gate_array`
+- `fraud_detection`
+- `ga_global_accelerator`
+- `gameshield`
+- `gdb_graph_database`
+- `graphanalytics`
+- `graphcompute`
+- `gtm_global_traffic_manager`
+- `gts_global_transaction_service`
+- `gws_graphic_workstation`
+- `havip_high-availability_virtual_ip_address`
+- `hbase`
+- `hbr_hybrid_backup_recovery`
+- `hcs-hgw_hybrid_cloud_storage_array`
+- `hcs-mgw_hybrid_cloud_storage_datatransport`
+- `hcs-sgw_hybrid_cloud_storage_gateway`
+- `hdr_hybrid_disaster_recovery`
+- `hologres`
+- `holowatcher`
+- `hsm_hardware_security_module`
+- `httpdns`
+- `idrsservice`
+- `image_recognition`
+- `imagesearch`
+- `imarketing`
+- `imm_intelligent_media_management`
+- `imp_intelligent_media_production`
+- `imp_low_code_video_factory`
+- `indvi_industrial_visual_intelligence`
+- `intelligent_advisor`
+- `iot_internet_of_things_platform`
+- `iot_wireless_connection_service`
+- `iotid_identity`
+- `iov_iot_vehicle_cloud`
+- `ipv6_gateway`
+- `isoc_iot_security_operations_center`
+- `isu_intelligent_semantic_understanding`
+- `ivision`
+- `ivpd_intelligent_visual_production`
+- `kafka`
+- `linkedmall`
+- `linkwan`
+- `live`
+- `livinglink`
+- `log_streaming`
+- `logic_composer`
+- `machine_learning`
+- `man_mobile_analytics`
+- `mariadb`
+- `mas_mobile_acceleration_service`
+- `maxcompute`
+- `memcache`
+- `miniappdev`
+- `mns_message_service`
+- `mobile_hotfix`
+- `mobsec`
+- `mongodb`
+- `mps-ai`
+- `mps-censor`
+- `mps-cover`
+- `mps-dna`
+- `mps-multimod`
+- `mps-produce`
+- `mps_apsaravideo_media_processing`
+- `mq_message_queue`
+- `mqc_mobile_quality_center`
+- `mse_microservices_engine`
+- `multi-cloud_finops`
+- `multi-mode_database_lindorm`
+- `multimediaai`
+- `mxgraph.alibaba_cloud`
+- `mysql`
+- `nas_network_attached_storage`
+- `nat_gateway`
+- `network_acl_access_control_list`
+- `nlb_network_load_balancer_01`
+- `nlb_network_load_balancer_02`
+- `nlp-address`
+- `nlp-automl`
+- `nlp-ie_text_information_extraction`
+- `nlp-ke_keyword_extraction`
+- `nlp-ner_named_entity_recognition`
+- `nlp-pos_part-of-speech_tagging`
+- `nlp-ra_reflexive_anaphora`
+- `nlp-sa_sentiment_analysis`
+- `nlp-tc_text_categorization`
+- `nlp-ws_word_segmentation`
+- `nlp_natural_language_processing`
+- `nls`
+- `nls-asrbag`
+- `nls-asrcustommodel`
+- `nls-filebag`
+- `nls-service`
+- `nls-shortasrbag`
+- `nls-ttsbag`
+- `nodejs_performance_platform`
+- `oceanbase`
+- `ocr_optical_character_recognition`
+- `onsmqtt_micro_message_queuing_telemetry_transport`
+- `oos_operation_orchestration_service`
+- `openanalytics`
+- `openapi_explorer`
+- `opensearch`
+- `oss_object_storage_service`
+- `ots_tablestore`
+- `outboundbot`
+- `pcdn_p2p_cdn`
+- `petadata_hybriddb_for_mysql`
+- `physical_connection`
+- `pnvs_phone_number_verification_service`
+- `polardb`
+- `porana_portrait_analysis`
+- `postgresql`
+- `ppas_pay-as-you-go_database`
+- `privatelink`
+- `prometheus`
+- `prophet`
+- `pts_performance_test_service`
+- `quickbi`
+- `ram_resource_access_management`
+- `re_recommendation_engine`
+- `realtime_compute`
+- `redis_kvstore`
+- `region`
+- `retailir`
+- `ros_resource_orchestration_service`
+- `route_table`
+- `router`
+- `rsimganalys`
+- `rtc_real-time_communication`
+- `sae_serverless_app_engine`
+- `sag_smart_access_gateway_01`
+- `sag_smart_access_gateway_02`
+- `sas_situational_awareness`
+- `sca_smart_conversation_analysis_01`
+- `sca_smart_conversation_analysis_02`
+- `scc_super_computing_cluster`
+- `scdn_secure_cdn`
+- `scu_storage_capacity_unit`
+- `sddp_sensitive_data_protection`
+- `shared_bandwidth`
+- `shared_flow_bag`
+- `shc_shield_hybrid_cloud`
+- `slb_server_load_balancer_01`
+- `slb_server_load_balancer_02`
+- `slb_server_load_balancer_03`
+- `sls_simple_log_service`
+- `smc_server_migration_center`
+- `sms_short_message_service`
+- `sos`
+- `spark_data_insights`
+- `sppc`
+- `sqlserver`
+- `swas_simple_application_server`
+- `tr_transit_router`
+- `trademark_service`
+- `uis_ultimate_internet_service`
+- `user`
+- `user_feedback_01`
+- `user_feedback_02`
+- `vbr_virtual_border_router`
+- `vcs_visual_computing_service`
+- `vms_voice_messaging_service`
+- `voicebot_intelligent_voice_navigation`
+- `vpc_virtual_private_cloud`
+- `vpn_gateway`
+- `vs_video_surveillance`
+- `vswitch`
+- `waf_web_application_firewall`
+- `webplus_web_app_service`
+- `xdragon_bare_metal_server`
+- `xtrace`
+- `yida`

docs/shape-libraries/android.md

@@ -0,0 +1,62 @@
+# android
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.android`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.android.phone2;strokeColor=#c0c0c0;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="200" height="390" as="geometry" />
+</mxCell>
+```
+
+## Shapes (47)
+
+- `action_bar`
+- `action_bar_landscape`
+- `anchor`
+- `checkbox`
+- `contact_badge_focused`
+- `contextual_action_bar`
+- `contextual_action_bar_landscape`
+- `contextual_split_action_bar`
+- `contextual_split_action_bar_landscape`
+- `contextual_split_action_bar_landscape_white`
+- `indeterminateSpinner`
+- `indeterminate_progress_bar`
+- `keyboard`
+- `navigation_bar_1`
+- `navigation_bar_1_landscape`
+- `navigation_bar_1_vertical`
+- `navigation_bar_2`
+- `navigation_bar_3`
+- `navigation_bar_3_landscape`
+- `navigation_bar_4`
+- `navigation_bar_5`
+- `navigation_bar_5_vertical`
+- `navigation_bar_6`
+- `phone2`
+- `progressBar`
+- `progressScrubberDisabled`
+- `progressScrubberFocused`
+- `progressScrubberPressed`
+- `quick_contact`
+- `quickscroll2`
+- `quickscroll3`
+- `rect`
+- `rrect`
+- `scrollbars2`
+- `spinner2`
+- `split_action_bar`
+- `split_action_bar_landscape`
+- `statusBar`
+- `switch_off`
+- `switch_on`
+- `tab2`
+- `textSelHandles`
+- `text_insertion_point`
+- `textfield`
+- `time_picker`
+- `time_picker_dark`
+- `transparent`

docs/shape-libraries/arrows2.md

@@ -0,0 +1,33 @@
+# arrows2
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.arrows2`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.arrows2.arrow;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="100" height="60" as="geometry" />
+</mxCell>
+```
+
+## Shapes (18)
+
+- `arrow`
+- `bendArrow`
+- `bendDoubleArrow`
+- `calloutArrow`
+- `calloutDouble90Arrow`
+- `calloutDoubleArrow`
+- `calloutQuadArrow`
+- `jumpInArrow`
+- `quadArrow`
+- `sharpArrow`
+- `sharpArrow2`
+- `stripedArrow`
+- `stylisedArrow`
+- `tailedArrow`
+- `tailedNotchedArrow`
+- `triadArrow`
+- `twoWayArrow`
+- `uTurnArrow`

docs/shape-libraries/atlassian.md

@@ -0,0 +1,32 @@
+# atlassian
+
+**Type:** SVG images
+**Path:** `img/lib/atlassian/`
+
+## Usage
+
+```xml
+<mxCell value="label" style="image;aspect=fixed;image=img/lib/atlassian/Jira_Logo.svg;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+## Shapes (17)
+
+- `Atlassian_Logo`
+- `Bamboo_Logo`
+- `Bitbucket_Logo`
+- `Clover_Logo`
+- `Confluence_Logo`
+- `Crowd_Logo`
+- `Crucible_Logo`
+- `Fisheye_Logo`
+- `Hipchat_Logo`
+- `Jira_Core_Logo`
+- `Jira_Logo`
+- `Jira_Service_Desk_Logo`
+- `Jira_Software_Logo`
+- `Sourcetree_Logo`
+- `Statuspage_Logo`
+- `Stride_Logo`
+- `Trello_Logo`

docs/shape-libraries/azure2.md

@@ -0,0 +1,431 @@
+# azure2
+
+**Type:** SVG images
+**Path:** `img/lib/azure2/`
+
+## Usage
+
+```xml
+<mxCell value="label" style="image;aspect=fixed;image=img/lib/azure2/compute/Virtual_Machine.svg;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+## Shapes (648)
+
+Shapes are organized by category: `azure2/{category}/{shape}.svg`
+
+### ai_machine_learning (30)
+
+- `AI_Studio`
+- `Anomaly_Detector`
+- `Azure_Applied_AI`
+- `Azure_Experimentation_Studio`
+- `Azure_Object_Understanding`
+- `Azure_OpenAI`
+- `Batch_AI`
+- `Bonsai`
+- `Bot_Services`
+- `Cognitive_Services`
+- `Cognitive_Services_Decisions`
+- `Computer_Vision`
+- `Content_Moderators`
+- `Content_Safety`
+- `Custom_Vision`
+- `Face_APIs`
+- `Form_Recognizers`
+- `Genomics`
+- `Immersive_Readers`
+- `Language_Services`
+- `Language_Understanding`
+- `Machine_Learning`
+- `Machine_Learning_Studio_Classic_Web_Services`
+- `Machine_Learning_Studio_Web_Service_Plans`
+- `Machine_Learning_Studio_Workspaces`
+- `Personalizers`
+- `QnA_Makers`
+- `Serverless_Search`
+- `Speech_Services`
+- `Translator_Text`
+
+### analytics (14)
+
+- `Analysis_Services`
+- `Azure_Databricks`
+- `Azure_Synapse_Analytics`
+- `Azure_Workbooks`
+- `Data_Lake_Analytics`
+- `Data_Lake_Store_Gen1`
+- `Endpoint_Analytics`
+- `Event_Hub_Clusters`
+- `Event_Hubs`
+- `HD_Insight_Clusters`
+- `Log_Analytics_Workspaces`
+- `Power_BI_Embedded`
+- `Power_Platform`
+- `Stream_Analytics_Jobs`
+
+### app_services (9)
+
+- `API_Management_Services`
+- `App_Service_Certificates`
+- `App_Service_Domains`
+- `App_Service_Environments`
+- `App_Service_Plans`
+- `App_Services`
+- `CDN_Profiles`
+- `Notification_Hubs`
+- `Search_Services`
+
+### compute (38)
+
+- `App_Services`
+- `Application_Group`
+- `Automanaged_VM`
+- `Availability_Sets`
+- `Azure_Compute_Galleries`
+- `Azure_Spring_Cloud`
+- `Batch_Accounts`
+- `Cloud_Services_Classic`
+- `Container_Instances`
+- `Container_Services_Deprecated`
+- `Disk_Encryption_Sets`
+- `Disks`
+- `Disks_Classic`
+- `Disks_Snapshots`
+- `Function_Apps`
+- `Host_Groups`
+- `Host_Pools`
+- `Hosts`
+- `Image_Definitions`
+- `Image_Templates`
+- `Image_Versions`
+- `Images`
+- `Kubernetes_Services`
+- `Maintenance_Configuration`
+- `Managed_Service_Fabric`
+- `Mesh_Applications`
+- `Metrics_Advisor`
+- `OS_Images_Classic`
+- `Restore_Points`
+- `Restore_Points_Collections`
+- `Service_Fabric_Clusters`
+- `Shared_Image_Galleries`
+- `VM_Images_Classic`
+- `VM_Scale_Sets`
+- `Virtual_Machine`
+- `Virtual_Machines_Classic`
+- `Workspaces`
+- `Workspaces2`
+
+### containers (7)
+
+- `App_Services`
+- `Azure_Red_Hat_OpenShift`
+- `Batch_Accounts`
+- `Container_Instances`
+- `Container_Registries`
+- `Kubernetes_Services`
+- `Service_Fabric_Clusters`
+
+### databases (27)
+
+- `Azure_Cosmos_DB`
+- `Azure_Data_Explorer_Clusters`
+- `Azure_Database_MariaDB_Server`
+- `Azure_Database_Migration_Services`
+- `Azure_Database_MySQL_Server`
+- `Azure_Database_PostgreSQL_Server`
+- `Azure_Database_PostgreSQL_Server_Group`
+- `Azure_Purview_Accounts`
+- `Azure_SQL`
+- `Azure_SQL_Edge`
+- `Azure_SQL_Server_Stretch_Databases`
+- `Azure_SQL_VM`
+- `Azure_Synapse_Analytics`
+- `Cache_Redis`
+- `Data_Factory`
+- `Elastic_Job_Agents`
+- `Instance_Pools`
+- `Managed_Database`
+- `Oracle_Database`
+- `SQL_Data_Warehouses`
+- `SQL_Database`
+- `SQL_Elastic_Pools`
+- `SQL_Managed_Instance`
+- `SQL_Server`
+- `SQL_Server_Registries`
+- `SSIS_Lift_And_Shift_IR`
+- `Virtual_Clusters`
+
+### identity (35)
+
+- `AAD_Licenses`
+- `Active_Directory_Connect_Health`
+- `Active_Directory_Connect_Health2`
+- `Administrative_Units`
+- `App_Registrations`
+- `Azure_AD_B2C`
+- `Azure_AD_B2C2`
+- `Azure_AD_Domain_Services`
+- `Azure_AD_Identity_Protection`
+- `Azure_AD_Privilege_Identity_Management`
+- `Azure_Active_Directory`
+- `Azure_Information_Protection`
+- `Custom_Azure_AD_Roles`
+- `Enterprise_Applications`
+- `Entra_Connect`
+- `Entra_Domain_Services`
+- `Entra_Global_Secure_Access`
+- `Entra_ID_Protection`
+- `Entra_Internet_Access`
+- `Entra_Managed_Identities`
+- `Entra_Private_Access`
+- `Entra_Privileged_Identity_Management`
+- `Entra_Verified_ID`
+- `External_Identities`
+- `Groups`
+- `Identity_Governance`
+- `Managed_Identities`
+- `Multi_Factor_Authentication`
+- `PIM`
+- `Security`
+- `Tenant_Properties`
+- `User_Settings`
+- `Users`
+- `Verifiable_Credentials`
+- `Verification_As_A_Service`
+
+### networking (51)
+
+- `ATM_Multistack`
+- `Application_Gateway_Containers`
+- `Application_Gateways`
+- `Azure_Communications_Gateway`
+- `Azure_Firewall_Manager`
+- `Azure_Firewall_Policy`
+- `Bastions`
+- `CDN_Profiles`
+- `Connections`
+- `DDoS_Protection_Plans`
+- `DNS_Multistack`
+- `DNS_Private_Resolver`
+- `DNS_Security_Policy`
+- `DNS_Zones`
+- `ExpressRoute_Circuits`
+- `Firewalls`
+- `Front_Doors`
+- `IP_Address_manager`
+- `IP_Groups`
+- `Load_Balancer_Hub`
+- `Load_Balancers`
+- `Local_Network_Gateways`
+- `NAT`
+- `Network_Interfaces`
+- `Network_Security_Groups`
+- `Network_Watcher`
+- `On_Premises_Data_Gateways`
+- `Private_Endpoint`
+- `Private_Link`
+- `Private_Link_Hub`
+- `Private_Link_Service`
+- `Proximity_Placement_Groups`
+- `Public_IP_Addresses`
+- `Public_IP_Addresses_Classic`
+- `Public_IP_Prefixes`
+- `Reserved_IP_Addresses_Classic`
+- `Resource_Management_Private_Link`
+- `Route_Filters`
+- `Route_Tables`
+- `Service_Endpoint_Policies`
+- `Spot_VM`
+- `Spot_VMSS`
+- `Subnet`
+- `Traffic_Manager_Profiles`
+- `Virtual_Network_Gateways`
+- `Virtual_Networks`
+- `Virtual_Networks_Classic`
+- `Virtual_Router`
+- `Virtual_WAN_Hub`
+- `Virtual_WANs`
+- `Web_Application_Firewall_Policies_WAF`
+
+### security (14)
+
+- `Application_Security_Groups`
+- `Azure_AD_Risky_Signins`
+- `Azure_AD_Risky_Users`
+- `Azure_Defender`
+- `Azure_Sentinel`
+- `Conditional_Access`
+- `Detonation`
+- `ExtendedSecurityUpdates`
+- `Identity_Secure_Score`
+- `Key_Vaults`
+- `Keys`
+- `MS_Defender_EASM`
+- `Multifactor_Authentication`
+- `Security_Center`
+
+### storage (17)
+
+- `Azure_Fileshare`
+- `Azure_HCP_Cache`
+- `Azure_NetApp_Files`
+- `Azure_Stack_Edge`
+- `Data_Box`
+- `Data_Box_Edge`
+- `Data_Lake_Storage_Gen1`
+- `Data_Share_Invitations`
+- `Data_Shares`
+- `Import_Export_Jobs`
+- `Recovery_Services_Vaults`
+- `StorSimple_Data_Managers`
+- `StorSimple_Device_Managers`
+- `Storage_Accounts`
+- `Storage_Accounts_Classic`
+- `Storage_Explorer`
+- `Storage_Sync_Services`
+
+### general (98)
+
+- `All_Resources`
+- `Backlog`
+- `Biz_Talk`
+- `Blob_Block`
+- `Blob_Page`
+- `Branch`
+- `Browser`
+- `Bug`
+- `Builds`
+- `Cache`
+- `Code`
+- `Commit`
+- `Controls`
+- `Controls_Horizontal`
+- `Cost_Alerts`
+- `Cost_Analysis`
+- `Cost_Budgets`
+- `Cost_Management`
+- `Cost_Management_and_Billing`
+- `Counter`
+- `Cubes`
+- `Dashboard`
+- `Dashboard2`
+- `Dev_Console`
+- `Download`
+- `Error`
+- `Extensions`
+- `FTP`
+- `File`
+- `Files`
+- `Folder_Blank`
+- `Folder_Website`
+- `Free_Services`
+- `Gear`
+- `Globe`
+- `Globe_Error`
+- `Globe_Success`
+- `Globe_Warning`
+- `Guide`
+- `Heart`
+- `Help_and_Support`
+- `Image`
+- `Information`
+- `Input_Output`
+- `Journey_Hub`
+- `Launch_Portal`
+- `Learn`
+- `Load_Test`
+- `Location`
+- `Log_Streaming`
+- `Management_Groups`
+- `Management_Portal`
+- `Marketplace`
+- `Media`
+- `Media_File`
+- `Mobile`
+- `Mobile_Engagement`
+- `Module`
+- `Power`
+- `Power_Up`
+- `Powershell`
+- `Preview`
+- `Preview_Features`
+- `Process_Explorer`
+- `Production_Ready_Database`
+- `Quickstart_Center`
+- `Recent`
+- `Reservations`
+- `Resource_Explorer`
+- `Resource_Group_List`
+- `Resource_Groups`
+- `Resource_Linked`
+- `SSD`
+- `Scale`
+- `Scheduler`
+- `Search`
+- `Search_Grid`
+- `Server_Farm`
+- `Service_Bus`
+- `Service_Health`
+- `Storage_Azure_Files`
+- `Storage_Container`
+- `Storage_Queue`
+- `Subscriptions`
+- `TFS_VC_Repository`
+- `Table`
+- `Tag`
+- `Tags`
+- `Templates`
+- `Toolbox`
+- `Troubleshoot`
+- `Versions`
+- `Web_Slots`
+- `Web_Test`
+- `Website_Power`
+- `Website_Staging`
+- `Workbooks`
+- `Workflow`
+
+### other (149)
+
+(See draw.io for complete list of 149 shapes in the "other" category)
+
+Selected shapes:
+- `Azure_Backup_Center`
+- `Azure_Chaos_Studio`
+- `Azure_Cloud_Shell`
+- `Azure_Communication_Services`
+- `Azure_Deployment_Environments`
+- `Azure_Load_Testing`
+- `Azure_Monitor_Dashboard`
+- `Azure_Network_Manager`
+- `Azure_Orbital`
+- `Azure_Sphere`
+- `Azure_Storage_Mover`
+- `Grafana`
+- `Kubernetes_Fleet_Manager`
+- `SSH_Keys`
+
+### Additional Categories
+
+- **azure_ecosystem** (3): Applens, Azure_Hybrid_Center, Collaborative_Service
+- **azure_stack** (8): Azure_Stack, Capacity, Infrastructure_Backup, Multi_Tenancy, Offers, Plans, Updates, User_Subscriptions
+- **azure_vmware_solution** (1): AVS
+- **blockchain** (6): ABS_Member, Azure_Blockchain_Service, Azure_Token_Service, Blockchain_Applications, Consortium, Outbound_Connection
+- **cxp** (2): Elixir, Elixir_Purple
+- **devops** (10): API_Connections, Application_Insights, Azure_DevOps, Change_Analysis, CloudTest, Code_Optimization, DevOps_Starter, DevTest_Labs, Lab_Accounts, Lab_Services
+- **hybrid_multicloud** (5): Azure_Operator_5G_Core, Azure_Operator_Insights, Azure_Operator_Nexus, Azure_Operator_Service_Manager, Azure_Programmable_Connectivity
+- **integration** (21): API_Management_Services, App_Configuration, Azure_API_for_FHIR, Azure_Data_Catalog, Event_Grid_Domains, Event_Grid_Subscriptions, Event_Grid_Topics, Integration_Accounts, Integration_Environments, Integration_Service_Environments, Logic_Apps, Logic_Apps_Custom_Connector, Partner_Namespace, Partner_Registration, Partner_Topic, Relays, SQL_Data_Warehouses, SendGrid_Accounts, Service_Bus, Software_as_a_Service, System_Topic
+- **internet_of_things** (3): Digital_Twins, Logic_Apps, Time_Series_Insights_Access_Policies
+- **intune** (17): Azure_AD_Roles_and_Administrators, Client_Apps, Device_Compliance, Device_Configuration, Device_Enrollment, Device_Security_Apple, Device_Security_Google, Device_Security_Windows, Devices, Exchange_Access, Intune, Intune_For_Education, Mindaro, Security_Baselines, Software_Updates, Tenant_Status, eBooks
+- **iot** (19): Azure_IoT_Operations, Azure_Maps_Accounts, Azure_Stack_HCI_Sizer, Device_Provisioning_Services, Digital_Twins, Event_Hubs, Function_Apps, Industrial_IoT, IoT_Central_Applications, IoT_Edge, IoT_Hub, Logic_Apps, Notification_Hubs, Stack_HCI_Premium, Stream_Analytics_Jobs, Time_Series_Data_Sets, Time_Series_Insights_Environments, Time_Series_Insights_Event_Sources, Windows10_Core_Services
+- **management_governance** (32): Activity_Log, Advisor, Alerts, Application_Insights, Arc_Machines, Automation_Accounts, Azure_Arc, Azure_Lighthouse, Blueprints, Compliance, Cost_Management_and_Billing, Customer_Lockbox_for_MS_Azure, Diagnostics_Settings, Education, Log_Analytics_Workspaces, MachinesAzureArc, Managed_Applications_Center, Managed_Desktop, Metrics, Monitor, My_Customers, Operation_Log_Classic, Policy, Recovery_Services_Vaults, Resource_Graph_Explorer, Resources_Provider, Scheduler_Job_Collections, Service_Catalog_MAD, Service_Providers, Solutions, Universal_Print, User_Privacy
+- **menu** (1): Keys
+- **migrate** (5): Azure_Migrate, Cost_Management_and_Billing, Data_Box, Data_Box_Edge, Recovery_Services_Vaults
+- **mixed_reality** (2): Remote_Rendering, Spatial_Anchor_Accounts
+- **monitor** (1): SAP_Azure_Monitor
+- **power_platform** (9): AIBuilder, CopilotStudio, Dataverse, PowerApps, PowerAutomate, PowerBI, PowerFx, PowerPages, PowerPlatform
+- **preview** (9): Azure_Cloud_Shell, Azure_Sphere, Azure_Workbooks, IoT_Edge, Private_Link_Hub, RTOS, Static_Apps, Time_Series_Data_Sets, Web_Environment
+- **web** (5): API_Center, App_Space, Azure_Media_Service, Notification_Hub_Namespaces, SignalR

docs/shape-libraries/basic.md

@@ -0,0 +1,48 @@
+# basic
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.basic`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.basic.{shape};fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+
+
+## Shapes (31)
+
+- `4_point_star`
+- `6_point_star`
+- `8_point_star`
+- `banner`
+- `cloud_callout`
+- `cloud_rect`
+- `cone`
+- `cross`
+- `document`
+- `flash`
+- `half_circle`
+- `heart`
+- `loud_callout`
+- `moon`
+- `mxgraph.basic`
+- `no_symbol`
+- `octagon`
+- `orthogonal_triangle`
+- `oval_callout`
+- `parallelepiped`
+- `pentagon`
+- `pointed_oval`
+- `rectangular_callout`
+- `rounded_rectangular_callout`
+- `smiley`
+- `star`
+- `sun`
+- `tick`
+- `trapezoid`
+- `wave`
+- `x`

docs/shape-libraries/bpmn.md

@@ -0,0 +1,60 @@
+# bpmn
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.bpmn`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.bpmn.shape;symbol=message;outline=throwing;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+## Parameters
+
+- `outline` - Event type: `start`, `end`, `catching`, `throwing`, `none`
+- `symbol` - Icon inside: `message`, `timer`, `error`, `cancel`, `compensation`, `link`, `terminate`, `general`, `multiple`, `rule`
+
+## Shapes (40)
+
+- `ad_hoc`
+- `business_rule_task`
+- `cancel_end`
+- `cancel_intermediate`
+- `compensation`
+- `compensation_end`
+- `compensation_intermediate`
+- `error_end`
+- `error_intermediate`
+- `gateway`
+- `gateway_and`
+- `gateway_complex`
+- `gateway_or`
+- `gateway_xor_(data)`
+- `gateway_xor_(event)`
+- `general_end`
+- `general_intermediate`
+- `general_start`
+- `link_end`
+- `link_intermediate`
+- `link_start`
+- `loop`
+- `loop_marker`
+- `manual_task`
+- `message_end`
+- `message_intermediate`
+- `message_start`
+- `multiple_end`
+- `multiple_instances`
+- `multiple_intermediate`
+- `multiple_start`
+- `mxgraph.bpmn`
+- `rule_intermediate`
+- `rule_start`
+- `script_task`
+- `service_task`
+- `terminate`
+- `timer_intermediate`
+- `timer_start`
+- `user_task`

docs/shape-libraries/cabinets.md

@@ -0,0 +1,71 @@
+# cabinets
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.cabinets`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.cabinets.{shape};" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+
+
+## Shapes (54)
+
+- `auxiliary_contact_contactor_1_32a`
+- `auxiliary_contact_contactor_32_125a`
+- `cb_1p`
+- `cb_1p_x10`
+- `cb_2p`
+- `cb_2p_x10`
+- `cb_3p`
+- `cb_3p_x5`
+- `cb_4p`
+- `cb_4p_x5`
+- `cb_auxiliary_contact`
+- `contactor_125_400a`
+- `contactor_1_32a`
+- `contactor_32_125a`
+- `din_rail`
+- `distribution_block_4p_125a_11_connections`
+- `distribution_block_4p_125a_11_connections_2`
+- `mccb_25_63a_3p`
+- `mccb_25_63a_4p`
+- `mccb_63_250a_3p`
+- `mccb_63_250a_4p`
+- `motor_cb_125_400a`
+- `motor_cb_1_32a`
+- `motor_cb_32_125a`
+- `motor_protection_cb`
+- `motor_starter_125_400a`
+- `motor_starter_1_32a`
+- `motor_starter_32_125a`
+- `motorized_switch_3p`
+- `motorized_switch_4p`
+- `mxgraph.cabinets`
+- `overcurrent_relay_125_400a`
+- `overcurrent_relay_1_32a`
+- `overcurrent_relay_32_125a`
+- `plugin_relay_1`
+- `plugin_relay_2`
+- `residual_current_device_2p`
+- `residual_current_device_4p`
+- `surge_protection_1p`
+- `surge_protection_2p`
+- `surge_protection_3p`
+- `surge_protection_4p`
+- `terminal_40mm2`
+- `terminal_40mm2_x10`
+- `terminal_4_6mm2`
+- `terminal_4_6mm2_x10`
+- `terminal_4mm2`
+- `terminal_4mm2_x10`
+- `terminal_50mm2`
+- `terminal_50mm2_x10`
+- `terminal_6_25mm2`
+- `terminal_6_25mm2_x10`
+- `terminal_75mm2`
+- `terminal_75mm2_x10`

docs/shape-libraries/cisco19.md

@@ -0,0 +1,250 @@
+# cisco19
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.cisco19`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.cisco19.rect;prIcon={shape};fillColor=#00bceb;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+
+
+## Shapes (233)
+
+- `3g_4g_indicator`
+- `6500_vss`
+- `6500_vss2`
+- `access_control_and_trustsec`
+- `aci`
+- `aci2`
+- `acibg`
+- `acs`
+- `ad_decoder`
+- `ad_encoder`
+- `analysis_correlation`
+- `anomaly_detection`
+- `anti_malware`
+- `anti_malware2`
+- `appnav`
+- `asa_5500`
+- `asr_1000`
+- `asr_9000`
+- `avc_application_visibility_control`
+- `avc_application_visibility_control2`
+- `bg1`
+- `bg10`
+- `bg2`
+- `bg3`
+- `bg4`
+- `bg5`
+- `bg6`
+- `bg7`
+- `bg8`
+- `bg9`
+- `blade_server`
+- `branch`
+- `branch2`
+- `camera`
+- `camera2`
+- `cell_phone`
+- `cell_phone2`
+- `cisco_15800`
+- `cisco_dna`
+- `cisco_dna_center`
+- `cisco_meetingplace_express`
+- `cisco_security_manager`
+- `cisco_unified_contact_center_enterprise_and_hosted`
+- `cisco_unified_presence_service`
+- `clock`
+- `cloud`
+- `cloud2`
+- `cognitive`
+- `collab1`
+- `collab2`
+- `collab3`
+- `collab4`
+- `communications_manager`
+- `contact_center_express`
+- `content_recording_streaming_server`
+- `content_router`
+- `csr_1000v`
+- `da_decoder`
+- `da_encoder`
+- `data_center`
+- `data_center2`
+- `database_relational`
+- `dns_server`
+- `dns_server2`
+- `dual_mode_access_point`
+- `email_security`
+- `fabric_interconnect`
+- `fibre_channel_director_mds_9000`
+- `fibre_channel_fabric_switch`
+- `firewall`
+- `flow_analytics`
+- `flow_analytics2`
+- `flow_collector`
+- `h323`
+- `handheld`
+- `handheld2`
+- `hdtv`
+- `hdtv2`
+- `home_office`
+- `home_office2`
+- `host_based_security`
+- `hypervisor`
+- `immersive_telepresence_endpoint`
+- `ip_ip_gateway`
+- `ip_phone`
+- `ip_phone2`
+- `ip_telephone_router`
+- `ips_ids`
+- `ironport`
+- `ise`
+- `joystick_keyboard`
+- `joystick_keyboard2`
+- `key`
+- `key2`
+- `l2_modular`
+- `l2_modular2`
+- `l2_switch`
+- `l2_switch_with_dual_supervisor`
+- `l3_modular`
+- `l3_modular2`
+- `l3_modular3`
+- `l3_switch`
+- `l3_switch_with_dual_supervisor`
+- `laptop`
+- `laptop2`
+- `laptop_video_client`
+- `laptop_video_client2`
+- `layer3_nexus_5k_switch`
+- `ldap`
+- `ldap2`
+- `load_balancer`
+- `lock`
+- `lock2`
+- `media_server`
+- `meeting_scheduling_and_management_server`
+- `mesh_access_point`
+- `monitor`
+- `monitoring`
+- `multipoint_meeting_server`
+- `mxgraph.cisco19`
+- `nac_appliance`
+- `nam_virtual_service_blade`
+- `net_mgmt_appliance`
+- `netflow_router`
+- `netflow_router2`
+- `netflow_router3`
+- `next_generation_intrusion_prevention_system`
+- `nexus_1010`
+- `nexus_1k`
+- `nexus_1kv_vsm`
+- `nexus_2000_10ge`
+- `nexus_2k`
+- `nexus_3k`
+- `nexus_4k`
+- `nexus_5k`
+- `nexus_5k_with_integrated_vsm`
+- `nexus_7k`
+- `nexus_9300`
+- `nexus_9500`
+- `operations_manager`
+- `phone_polycom`
+- `phone_polycom2`
+- `policy_configuration`
+- `pos`
+- `pos2`
+- `posture_assessment`
+- `primary_codec`
+- `printer`
+- `printer2`
+- `router`
+- `router_with_firewall`
+- `router_with_firewall2`
+- `router_with_voice`
+- `rps`
+- `secondary_codec`
+- `secure_catalyst_switch_color`
+- `secure_catalyst_switch_color2`
+- `secure_catalyst_switch_color3`
+- `secure_catalyst_switch_subdued`
+- `secure_catalyst_switch_subdued2`
+- `secure_endpoint_pc`
+- `secure_endpoint_pc2`
+- `secure_endpoints`
+- `secure_endpoints2`
+- `secure_router`
+- `secure_server`
+- `secure_server2`
+- `secure_switch`
+- `security_management`
+- `server`
+- `server2`
+- `service_ready_engine`
+- `set_top`
+- `set_top2`
+- `shield`
+- `ssl_terminator`
+- `stealthwatch_management_console_smc`
+- `stealthwatch_management_console_smc2`
+- `storage`
+- `surveillance_camera`
+- `surveillance_camera2`
+- `tablet`
+- `tablet2`
+- `telepresence_endpoint`
+- `telepresence_endpoint_twin_data_display`
+- `telepresence_exchange`
+- `threat_intelligence`
+- `transcoder`
+- `ucs_5108_blade_chassis`
+- `ucs_c_series_server`
+- `ucs_express`
+- `unity`
+- `upc_unified_personal_communicator`
+- `upc_unified_personal_communicator2`
+- `ups`
+- `user`
+- `user2`
+- `vbond`
+- `video_analytics`
+- `video_call_server`
+- `video_gateway`
+- `virtual_desktop_service`
+- `virtual_matrix_switch`
+- `virtual_private_network`
+- `virtual_private_network2`
+- `virtual_private_network_connector`
+- `vmanage`
+- `vpn_concentrator`
+- `vsmart`
+- `vts`
+- `vts2`
+- `web_application_firewall`
+- `web_reputation_filtering`
+- `web_reputation_filtering_2`
+- `web_security`
+- `web_security_services`
+- `web_security_services2`
+- `webex`
+- `wifi_indicator`
+- `wireless_access_point`
+- `wireless_access_point2`
+- `wireless_bridge`
+- `wireless_bridge2`
+- `wireless_connector`
+- `wireless_intrusion_prevention`
+- `wireless_lan_controller`
+- `wireless_location_appliance`
+- `wireless_router`
+- `workgroup_switch`
+- `workstation`
+- `workstation2`
+- `x509_certificate`
+- `x509_certificate2`

docs/shape-libraries/citrix.md

@@ -0,0 +1,115 @@
+# citrix
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.citrix`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.citrix.{shape};fillColor=#00A4E4;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+
+
+## Shapes (98)
+
+- `1u_2u_server`
+- `access_card`
+- `branch_repeater`
+- `browser`
+- `cache_server`
+- `calendar`
+- `cell_phone`
+- `chassis`
+- `citrix_hdx`
+- `citrix_logo`
+- `cloud`
+- `command_center`
+- `database`
+- `database_server`
+- `datacenter`
+- `desktop`
+- `desktop_web`
+- `dhcp_server`
+- `directory_server`
+- `dns_server`
+- `document`
+- `edgesight_server`
+- `file_server`
+- `firewall`
+- `ftp_server`
+- `geolocation_database`
+- `globe`
+- `goto_meeting`
+- `government`
+- `home_office`
+- `hq_enterprise`
+- `inspection`
+- `ip_phone`
+- `kiosk`
+- `laptop_1`
+- `laptop_2`
+- `license_server`
+- `merchandising_server`
+- `middleware`
+- `mxgraph.citrix`
+- `netscaler_gateway`
+- `netscaler_mpx`
+- `netscaler_sdx`
+- `netscaler_vpx`
+- `pbx_server`
+- `pda`
+- `podio`
+- `printer`
+- `process`
+- `provisioning_server`
+- `proxy_server`
+- `radius_server`
+- `remote_office`
+- `reporting`
+- `role_appcontroller`
+- `role_applications`
+- `role_cloudbridge`
+- `role_desktops`
+- `role_load_testing_controller`
+- `role_load_testing_launcher`
+- `role_receiver`
+- `role_repeater`
+- `role_secure_access`
+- `role_security`
+- `role_services`
+- `role_storefront`
+- `role_storefront_services`
+- `role_synchronizer`
+- `role_xenmobile`
+- `role_xenmobile_device_manager`
+- `router`
+- `security`
+- `sharefile`
+- `site`
+- `smtp_server`
+- `storefront_services`
+- `switch`
+- `tablet_1`
+- `tablet_2`
+- `thin_client`
+- `tower_server`
+- `user_control`
+- `users`
+- `web_server`
+- `web_service`
+- `worxenroll`
+- `worxhome`
+- `worxmail`
+- `worxweb`
+- `xenapp_server`
+- `xenapp_services`
+- `xenapp_web`
+- `xencenter`
+- `xenclient`
+- `xenclient_synchronizer`
+- `xendesktop_server`
+- `xenmobile`
+- `xenserver`

docs/shape-libraries/electrical.md

@@ -0,0 +1,50 @@
+# electrical
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.electrical`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.electrical.resistors.resistor_1;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="20" as="geometry" />
+</mxCell>
+```
+
+Shapes are organized by category: `mxgraph.electrical.{category}.{shape}`
+
+## Categories
+
+### resistors
+- `resistor_1`
+- `resistor_2`
+
+### capacitors
+- `capacitor_1`
+- `capacitor_3`
+
+### inductors
+- `inductor_3`
+- `transformer_1`
+
+### diodes
+- `diode`
+- `zener_diode_1`
+
+### transistors
+- `npn_transistor_1`
+- `pnp_transistor_1`
+
+### mosfets1
+- `n-channel_mosfet_1`
+- `p-channel_mosfet_1`
+
+### logic_gates
+- `logic_gate`
+- `dual_inline_ic`
+
+### electro-mechanical
+- `singleSwitch`
+- `pushbutton`
+
+(See draw.io Electrical shape library for complete list)

docs/shape-libraries/floorplan.md

@@ -0,0 +1,62 @@
+# floorplan
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.floorplan`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.floorplan.{shape};fillColor=#ffffff;strokeColor=#000000;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+
+
+## Shapes (45)
+
+- `bathtub`
+- `bathtub2`
+- `bed_double`
+- `bed_single`
+- `bookcase`
+- `chair`
+- `copier`
+- `couch`
+- `crt_tv`
+- `desk_corner`
+- `desk_corner_2`
+- `dresser`
+- `drying_machine`
+- `elevator`
+- `fireplace`
+- `flat_tv`
+- `floor_lamp`
+- `laptop`
+- `mxgraph.floorplan`
+- `office_chair`
+- `piano`
+- `plant`
+- `printer`
+- `range_1`
+- `range_2`
+- `refrigerator`
+- `shower`
+- `shower2`
+- `sink_1`
+- `sink_2`
+- `sink_22`
+- `sink_double`
+- `sink_double2`
+- `sofa`
+- `spiral_stairs`
+- `table`
+- `table_1`
+- `table_2`
+- `table_3`
+- `table_4`
+- `table_5`
+- `toilet`
+- `washing_machine`
+- `water_cooler`
+- `workstation`

docs/shape-libraries/flowchart.md

@@ -0,0 +1,52 @@
+# flowchart
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.flowchart`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.flowchart.{shape};fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+
+
+## Shapes (35)
+
+- `annotation_1`
+- `annotation_2`
+- `card`
+- `collate`
+- `data`
+- `database`
+- `decision`
+- `delay`
+- `direct_data`
+- `display`
+- `document`
+- `extract_or_measurement`
+- `internal_storage`
+- `loop_limit`
+- `manual_input`
+- `manual_operation`
+- `merge_or_storage`
+- `multi-document`
+- `mxgraph.flowchart`
+- `off-page_reference`
+- `on-page_reference`
+- `or`
+- `paper_tape`
+- `parallel_mode`
+- `predefined_process`
+- `preparation`
+- `process`
+- `sequential_data`
+- `sort`
+- `start_1`
+- `start_2`
+- `stored_data`
+- `summing_function`
+- `terminator`
+- `transfer`

docs/shape-libraries/fluidpower.md

@@ -0,0 +1,264 @@
+# fluidpower
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.fluid_power`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.fluid_power.{shape};fillColor=strokeColor;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+Shapes are named like x10010, x10020, etc.
+
+## Shapes (247)
+
+- `mxgraph.fluid_power`
+- `x10010`
+- `x10020`
+- `x10030`
+- `x10040`
+- `x10050`
+- `x10060`
+- `x10070`
+- `x10080`
+- `x10090`
+- `x10100`
+- `x10110`
+- `x10120`
+- `x10130`
+- `x10140`
+- `x10150`
+- `x10160`
+- `x10170`
+- `x10180`
+- `x10190`
+- `x10200`
+- `x10210`
+- `x10220`
+- `x10230`
+- `x10240`
+- `x10250`
+- `x10260`
+- `x10270`
+- `x10280`
+- `x10290`
+- `x10300`
+- `x10310`
+- `x10320`
+- `x10330`
+- `x10340`
+- `x10350`
+- `x10360`
+- `x10370`
+- `x10380`
+- `x10390`
+- `x10400`
+- `x10410`
+- `x10420`
+- `x10430`
+- `x10440`
+- `x10441`
+- `x10442`
+- `x10450`
+- `x10460`
+- `x10470`
+- `x10480`
+- `x10490`
+- `x10500`
+- `x10510`
+- `x10520`
+- `x10530`
+- `x10540`
+- `x10550`
+- `x10560`
+- `x10570`
+- `x10580`
+- `x10590`
+- `x10600`
+- `x10610`
+- `x10620`
+- `x10630`
+- `x10640`
+- `x10650`
+- `x10660`
+- `x10670`
+- `x10680`
+- `x10690`
+- `x10700`
+- `x10710`
+- `x10720`
+- `x10730`
+- `x10740`
+- `x10750`
+- `x10760`
+- `x10770`
+- `x10780`
+- `x10790`
+- `x10800`
+- `x10810`
+- `x10820`
+- `x10830`
+- `x10840`
+- `x10850`
+- `x10860`
+- `x10870`
+- `x10880`
+- `x10890`
+- `x10900`
+- `x10910`
+- `x10920`
+- `x10930`
+- `x10940`
+- `x10950`
+- `x10960`
+- `x10970`
+- `x10980`
+- `x10990`
+- `x11000`
+- `x11010`
+- `x11020`
+- `x11030`
+- `x11040`
+- `x11050`
+- `x11060`
+- `x11070`
+- `x11080`
+- `x11090`
+- `x11100`
+- `x11110`
+- `x11120`
+- `x11130`
+- `x11140`
+- `x11150`
+- `x11160`
+- `x11170`
+- `x11180`
+- `x11190`
+- `x11200`
+- `x11210`
+- `x11220`
+- `x11230`
+- `x11240`
+- `x11250`
+- `x11260`
+- `x11270`
+- `x11280`
+- `x11290`
+- `x11300`
+- `x11310`
+- `x11320`
+- `x11330`
+- `x11340`
+- `x11350`
+- `x11360`
+- `x11370`
+- `x11380`
+- `x11390`
+- `x11400`
+- `x11410`
+- `x11420`
+- `x11430`
+- `x11440`
+- `x11450`
+- `x11460`
+- `x11470`
+- `x11480`
+- `x11490`
+- `x11500`
+- `x11510`
+- `x11520`
+- `x11530`
+- `x11540`
+- `x11550`
+- `x11560`
+- `x11570`
+- `x11580`
+- `x11590`
+- `x11600`
+- `x11610`
+- `x11620`
+- `x11630`
+- `x11640`
+- `x11650`
+- `x11660`
+- `x11670`
+- `x11680`
+- `x11690`
+- `x11700`
+- `x11710`
+- `x11720`
+- `x11730`
+- `x11740`
+- `x11750`
+- `x11760`
+- `x11770`
+- `x11780`
+- `x11790`
+- `x11800`
+- `x11810`
+- `x11820`
+- `x11830`
+- `x11840`
+- `x11850`
+- `x11860`
+- `x11870`
+- `x11880`
+- `x11890`
+- `x11900`
+- `x11910`
+- `x11920`
+- `x11930`
+- `x11940`
+- `x11950`
+- `x11960`
+- `x11970`
+- `x11980`
+- `x11990`
+- `x12000`
+- `x12010`
+- `x12020`
+- `x12030`
+- `x12040`
+- `x12050`
+- `x12060`
+- `x12070`
+- `x12080`
+- `x12090`
+- `x12100`
+- `x12110`
+- `x12120`
+- `x12130`
+- `x12140`
+- `x12150`
+- `x12160_detailed`
+- `x12160_simplified`
+- `x12170`
+- `x12180`
+- `x12190`
+- `x12200`
+- `x12210`
+- `x12220`
+- `x12230`
+- `x12240`
+- `x12250`
+- `x12260`
+- `x12270`
+- `x12280`
+- `x12290`
+- `x12300`
+- `x12310`
+- `x12320`
+- `x12330`
+- `x12340`
+- `x12350`
+- `x12360`
+- `x12370`
+- `x12380`
+- `x12390`
+- `x12400`
+- `x12410`
+- `x12420`
+- `x12430`

docs/shape-libraries/gcp2.md

@@ -0,0 +1,315 @@
+# gcp2
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.gcp2`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.gcp2.{shape};fillColor=#4285F4;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+
+
+## Shapes (298)
+
+- `a7_power`
+- `admin_connected`
+- `admob`
+- `advanced_solutions_lab`
+- `ai_hub`
+- `anomaly_detection`
+- `api_analytics`
+- `api_monetization`
+- `apigee_api_platform`
+- `apigee_sense`
+- `app_engine`
+- `app_engine_icon`
+- `application`
+- `application_system`
+- `arrow_cycle`
+- `arrows_system`
+- `aspect_ratio`
+- `automl_natural_language`
+- `automl_tables`
+- `automl_translation`
+- `automl_video_intelligence`
+- `automl_vision`
+- `avere`
+- `beacon`
+- `beyondcorp`
+- `big_query`
+- `bigquery`
+- `biomedical_beaker`
+- `biomedical_test_tube`
+- `biomedical_trio`
+- `blank`
+- `blue_hexagon`
+- `bucket`
+- `bucket_scale`
+- `calculator`
+- `campaign_manager`
+- `capabilities`
+- `certified_industry_standard`
+- `check`
+- `check_2`
+- `check_available`
+- `check_scale`
+- `circuit_board`
+- `clock`
+- `cloud`
+- `cloud_apis`
+- `cloud_armor`
+- `cloud_automl`
+- `cloud_bigtable`
+- `cloud_cdn`
+- `cloud_checkmark`
+- `cloud_code`
+- `cloud_composer`
+- `cloud_computer`
+- `cloud_connected_insight`
+- `cloud_data_catalog`
+- `cloud_data_fusion`
+- `cloud_dataflow`
+- `cloud_dataflow_icon`
+- `cloud_datalab`
+- `cloud_dataprep`
+- `cloud_dataproc`
+- `cloud_dataproc_icon`
+- `cloud_datastore`
+- `cloud_deployment_manager`
+- `cloud_dns`
+- `cloud_endpoints`
+- `cloud_external_ip_addresses`
+- `cloud_filestore`
+- `cloud_firestore`
+- `cloud_firewall_rules`
+- `cloud_functions`
+- `cloud_iam`
+- `cloud_inference_api`
+- `cloud_information`
+- `cloud_iot_core`
+- `cloud_iot_edge`
+- `cloud_jobs_api`
+- `cloud_load_balancing`
+- `cloud_machine_learning`
+- `cloud_memorystore`
+- `cloud_messaging`
+- `cloud_monitoring`
+- `cloud_nat`
+- `cloud_natural_language_api`
+- `cloud_network`
+- `cloud_pubsub`
+- `cloud_router`
+- `cloud_routes`
+- `cloud_run`
+- `cloud_scheduler`
+- `cloud_security`
+- `cloud_security_command_center`
+- `cloud_security_scanner`
+- `cloud_server`
+- `cloud_service_mesh`
+- `cloud_spanner`
+- `cloud_speech_api`
+- `cloud_sql`
+- `cloud_storage`
+- `cloud_sub_pub`
+- `cloud_tasks`
+- `cloud_test_lab`
+- `cloud_text_to_speech`
+- `cloud_tools_for_powershell`
+- `cloud_tpu`
+- `cloud_translation_api`
+- `cloud_video_intelligence_api`
+- `cloud_vision_api`
+- `cloud_vpn`
+- `cluster`
+- `compute_engine`
+- `compute_engine_2`
+- `compute_engine_icon`
+- `connected`
+- `container_builder`
+- `container_engine`
+- `container_engine_icon`
+- `container_optimized_os`
+- `container_registry`
+- `cost`
+- `cost_arrows`
+- `cost_savings`
+- `data_access`
+- `data_increase`
+- `data_loss_prevention_api`
+- `data_storage_cost`
+- `data_studio`
+- `database`
+- `database_2`
+- `database_3`
+- `database_cycle`
+- `database_speed`
+- `database_uploading`
+- `debugger`
+- `dedicated_game_server`
+- `dedicated_interconnect`
+- `desktop`
+- `desktop_and_mobile`
+- `developer_portal`
+- `dialogflow_enterprise_edition`
+- `enhance_ui`
+- `enhance_ui_2`
+- `error_reporting`
+- `external_data_center`
+- `external_data_resource`
+- `external_payment_form`
+- `fastly`
+- `files`
+- `firebase`
+- `folders`
+- `forseti_lockup`
+- `forseti_logo`
+- `frontend_platform_services`
+- `game`
+- `gateway`
+- `gateway_icon`
+- `gear`
+- `gear_arrow`
+- `gear_chain`
+- `gear_load`
+- `genomics`
+- `gke_on_prem`
+- `globe_world`
+- `google_ad_manager`
+- `google_ads`
+- `google_analytics`
+- `google_analytics_360`
+- `google_cloud_platform`
+- `google_cloud_platform_lockup`
+- `google_network`
+- `google_network_edge_cache`
+- `google_play_game_service`
+- `gpu`
+- `half_cloud`
+- `https_load_balancer`
+- `identity_aware_proxy`
+- `image_services`
+- `increase_cost_arrows`
+- `internal_payment_authorization`
+- `internet_connection`
+- `istio_logo`
+- `key`
+- `key_management_service`
+- `kubernetes_logo`
+- `kubernetes_name`
+- `laptop`
+- `legacy_cloud`
+- `legacy_cloud_2`
+- `lifecycle`
+- `lightbulb`
+- `list`
+- `live`
+- `load_balancing`
+- `loading`
+- `loading_2`
+- `loading_3`
+- `lock`
+- `logging`
+- `logs_api`
+- `management_security`
+- `maps_api`
+- `mem_instances`
+- `memcache`
+- `memory_card`
+- `mobile_devices`
+- `modifiers_autoscaling`
+- `modifiers_custom_virtual_machine`
+- `modifiers_high_cpu_machine`
+- `modifiers_high_memory_machine`
+- `modifiers_preemptable_vm`
+- `modifiers_shared_core_machine_f1`
+- `modifiers_shared_core_machine_g1`
+- `modifiers_standard_machine`
+- `modifiers_storage`
+- `monitor`
+- `monitor_2`
+- `mxgraph.gcp2`
+- `nat`
+- `network`
+- `network_load_balancer`
+- `node`
+- `outline_blank_1`
+- `outline_blank_2`
+- `outline_blank_3`
+- `outline_highcomp`
+- `outline_highmem`
+- `partner_interconnect`
+- `payment`
+- `people_security_management`
+- `persistent_disk`
+- `persistent_disk_snapshot`
+- `phone`
+- `phone_android`
+- `placeholder`
+- `play_gear`
+- `play_start`
+- `prediction_api`
+- `premium_network_tier`
+- `primary`
+- `process`
+- `profiler`
+- `push_notification_service`
+- `recommendations_ai`
+- `record`
+- `replication_controller`
+- `replication_controller_2`
+- `replication_controller_3`
+- `report`
+- `repository`
+- `repository_2`
+- `repository_3`
+- `repository_primary`
+- `retail`
+- `safety`
+- `save`
+- `scale`
+- `scheduled_tasks`
+- `search`
+- `search_api`
+- `security_key_enforcement`
+- `segments`
+- `segments_2`
+- `segments_overlap`
+- `servers_stacked`
+- `service`
+- `service_discovery`
+- `social_media_time`
+- `solution`
+- `speaker`
+- `speed`
+- `squid_proxy`
+- `stackdriver`
+- `stacked_ownership`
+- `standard_network_tier`
+- `storage`
+- `stream`
+- `swap`
+- `systems_check`
+- `tape_record`
+- `task_queues`
+- `task_queues_2`
+- `tensorflow_lockup`
+- `tensorflow_logo`
+- `thumbs_up`
+- `time_clock`
+- `trace`
+- `traffic_director`
+- `transfer_appliance`
+- `users`
+- `view_list`
+- `virtual_file_system`
+- `virtual_private_cloud`
+- `visibility`
+- `vpn`
+- `vpn_gateway`
+- `webcam`
+- `website`

docs/shape-libraries/infographic.md

@@ -0,0 +1,24 @@
+# infographic
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.infographic`
+
+## Usage
+
+```xml
+<mxCell value="label" style="html=1;shape=mxgraph.infographic.shadedCube;isoAngle=15;fillColor=#10739E;strokeColor=none;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+## Shapes
+
+- `shadedCube` (needs `isoAngle=15;`)
+- `ribbonSimple` (needs `notch1=20;notch2=20;`)
+- `ribbonRolled`
+- `ribbonDoubleFolded`
+- `shadedTriangle`
+- `shadedPyramid`
+- `cylinder`
+- `banner`
+- `flag`

docs/shape-libraries/kubernetes.md

@@ -0,0 +1,58 @@
+# kubernetes
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.kubernetes`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.kubernetes.icon;prIcon={shape};fillColor=#326CE5;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+
+
+## Shapes (41)
+
+- `api`
+- `c_c_m`
+- `c_m`
+- `c_role`
+- `cm`
+- `crb`
+- `crd`
+- `cronjob`
+- `deploy`
+- `ds`
+- `ep`
+- `etcd`
+- `frame`
+- `group`
+- `hpa`
+- `ing`
+- `job`
+- `k_proxy`
+- `kubelet`
+- `limits`
+- `master`
+- `mxgraph.kubernetes`
+- `netpol`
+- `node`
+- `ns`
+- `pod`
+- `psp`
+- `pv`
+- `pvc`
+- `quota`
+- `rb`
+- `role`
+- `rs`
+- `sa`
+- `sc`
+- `sched`
+- `secret`
+- `sts`
+- `svc`
+- `user`
+- `vol`

docs/shape-libraries/lean_mapping.md

@@ -0,0 +1,31 @@
+# lean_mapping
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.lean_mapping`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.lean_mapping.{shape};strokeWidth=2;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+
+
+## Shapes (14)
+
+- `airplane_7`
+- `electronic_info_flow`
+- `finished_goods_to_customer`
+- `go_see_production_scheduling`
+- `kaizen_lightening_burst`
+- `kanban_post`
+- `load_leveling`
+- `manual_info_flow`
+- `move_by_forklift`
+- `mrp_erp`
+- `mxgraph.lean_mapping`
+- `operator`
+- `quality_problem`
+- `verbal`

docs/shape-libraries/mscae.md

@@ -0,0 +1,22 @@
+# mscae
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.mscae`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.mscae.cloud.azure;fillColor=#0078D4;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+## Categories
+
+Shapes are organized by category: `mscae.cloud`, `mscae.intune`, `mscae.oms`, `mscae.system_center`
+
+- `conditional_access_exchange`
+- `conditional_access_sharepoint`
+- `primary_site`
+
+(See draw.io for complete shape list within each category)

docs/shape-libraries/network.md

@@ -0,0 +1,72 @@
+# network
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.networks`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.networks.server;fillColor=#29AAE1;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+## Shapes (57)
+
+- `biometric_reader`
+- `bus`
+- `business_center`
+- `cloud`
+- `comm_link`
+- `comm_link_edge`
+- `community`
+- `copier`
+- `desktop_pc`
+- `external_storage`
+- `firewall`
+- `gamepad`
+- `hub`
+- `laptop`
+- `load_balancer`
+- `mail_server`
+- `mainframe`
+- `mobile`
+- `modem`
+- `monitor`
+- `nas_filer`
+- `patch_panel`
+- `phone_1`
+- `phone_2`
+- `printer`
+- `proxy_server`
+- `rack`
+- `radio_tower`
+- `router`
+- `satellite`
+- `satellite_dish`
+- `scanner`
+- `secured`
+- `security_camera`
+- `server`
+- `server_storage`
+- `storage`
+- `supercomputer`
+- `switch`
+- `tablet`
+- `tape_storage`
+- `terminal`
+- `unsecure`
+- `ups_enterprise`
+- `ups_small`
+- `usb_stick`
+- `user_female`
+- `user_male`
+- `users`
+- `video_projector`
+- `video_projector_screen`
+- `virtual_pc`
+- `virtual_server`
+- `virus`
+- `web_server`
+- `wireless_hub`
+- `wireless_modem`

docs/shape-libraries/openstack.md

@@ -0,0 +1,36 @@
+# openstack
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.openstack`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.openstack.{shape};fillColor=#3F51B5;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+
+
+## Shapes (19)
+
+- `cinder_volume`
+- `cinder_volumeattachment`
+- `designate_recordset`
+- `designate_zone`
+- `heat_autoscalinggroup`
+- `heat_resourcegroup`
+- `heat_scalingpolicy`
+- `mxgraph.openstack`
+- `neutron_floatingip`
+- `neutron_floatingipassociation`
+- `neutron_net`
+- `neutron_port`
+- `neutron_router`
+- `neutron_routerinterface`
+- `neutron_securitygroup`
+- `neutron_subnet`
+- `nova_keypair`
+- `nova_server`
+- `swift_container`

docs/shape-libraries/pid.md

@@ -0,0 +1,22 @@
+# pid
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.pid2valves`, `mxgraph.pid2inst`, `mxgraph.pid2misc`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.pid2valves.valve;valveType=gate;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+## Valve Types
+
+For `mxgraph.pid2valves.valve`, use `valveType=` with:
+- `gate`, `globe`, `needle`, `ball`, `butterfly`, `diaphragm`, `plug`, `check`
+
+## Other Prefixes
+
+- `mxgraph.pid2inst` - Instruments (discInst, sharedCont, compFunc)
+- `mxgraph.pid2misc` - Miscellaneous

docs/shape-libraries/rack.md

@@ -0,0 +1,57 @@
+# rack
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.rack`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.rack.f5.arx_500;strokeColor=#666666;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="200" height="30" as="geometry" />
+</mxCell>
+```
+
+Shapes are organized by vendor: `mxgraph.rack.{vendor}.{model}`
+
+## Vendors
+
+### F5
+
+- `arx_500`
+- `big_ip_1600`
+- `big_ip_2000`
+- `big_ip_4000`
+
+### Dell
+
+- `dell_poweredge_1u`
+- `poweredge_630`
+- `poweredge_730`
+
+### HPE Aruba
+
+HPE Aruba shapes have subcategories: `mxgraph.rack.hpe_aruba.{category}.{model}`
+
+**gateways_controllers:**
+- `aruba_7010_mobility_controller_front`
+- `aruba_7010_mobility_controller_rear`
+- `aruba_7024_mobility_controller_front`
+- `aruba_7205_mobility_controller_front`
+
+**security:**
+- `aruba_clearpass_c1000_front`
+- `aruba_clearpass_c2000_front`
+- `aruba_clearpass_c3000_front`
+
+**switches:**
+- `j9772a_2530_48g_poeplus_switch`
+- `j9773a_2530_24g_poeplus_switch`
+- `jl253a_aruba_2930f_24g_4sfpplus_switch`
+
+### General (rackGeneral)
+
+Use `mxgraph.rackGeneral.{shape}` for generic rack items:
+- `rackCabinet3`
+- `plate`
+
+(See draw.io Rack shape library for complete list)

docs/shape-libraries/salesforce.md

@@ -0,0 +1,116 @@
+# salesforce
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.salesforce`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.salesforce.analytics;fillColor=#7f8de1;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+Replace `analytics` with any shape from the list below.
+
+
+
+## Shapes (97)
+
+- `analytics`
+- `analytics2`
+- `apps`
+- `apps2`
+- `automation`
+- `automation2`
+- `automotive`
+- `automotive2`
+- `bots`
+- `bots2`
+- `builders`
+- `builders2`
+- `channels`
+- `channels2`
+- `commerce`
+- `commerce2`
+- `communications`
+- `communications2`
+- `consumer_goods`
+- `consumer_goods2`
+- `customer_360`
+- `customer_3602`
+- `data`
+- `data2`
+- `education`
+- `education2`
+- `employees`
+- `employees2`
+- `energy`
+- `energy2`
+- `field_service`
+- `field_service2`
+- `financial_services`
+- `financial_services2`
+- `government`
+- `government2`
+- `health`
+- `health2`
+- `heroku`
+- `heroku2`
+- `inbox`
+- `inbox2`
+- `industries`
+- `industries2`
+- `integration`
+- `integration2`
+- `iot`
+- `iot2`
+- `learning`
+- `learning2`
+- `loyalty`
+- `loyalty2`
+- `manufacturing`
+- `manufacturing2`
+- `marketing`
+- `marketing2`
+- `media`
+- `media2`
+- `mxgraph.salesforce`
+- `non_profit`
+- `non_profit2`
+- `partners`
+- `partners2`
+- `personalization`
+- `personalization2`
+- `philantrophy`
+- `philantrophy2`
+- `platform`
+- `platform2`
+- `privacy`
+- `privacy2`
+- `retail`
+- `retail2`
+- `sales`
+- `sales2`
+- `segments`
+- `segments2`
+- `service`
+- `service2`
+- `smb`
+- `smb2`
+- `social_studio`
+- `social_studio2`
+- `stream`
+- `stream2`
+- `success`
+- `success2`
+- `sustainability`
+- `sustainability2`
+- `transportation_and_technology`
+- `transportation_and_technology2`
+- `web`
+- `web2`
+- `work_com`
+- `work_com2`
+- `workflow`
+- `workflow2`

docs/shape-libraries/sap.md

@@ -0,0 +1,179 @@
+# sap
+
+**Type:** SVG images
+**Path:** `img/lib/sap/`
+
+## Usage
+
+```xml
+<mxCell value="label" style="image;aspect=fixed;image=img/lib/sap/SAP_Logo.svg;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+## Shapes (164)
+
+- `1`
+- `2`
+- `3`
+- `4`
+- `5`
+- `6`
+- `7`
+- `8`
+- `9`
+- `10`
+- `11`
+- `12`
+- `13`
+- `Adapter`
+- `Admin`
+- `Alert`
+- `API`
+- `API_Business_Hub_Enterprise`
+- `App`
+- `Application_Autoscaler`
+- `Application_Frontend_Service`
+- `Application_Vulnerability_Report`
+- `Building`
+- `Business_Application_Studio`
+- `Business_Entity_Recognition`
+- `Business_Process_Model_Connector_for_SAP_Signavio_Solutions`
+- `Cloud`
+- `Cloud_Connector`
+- `Cloud_Connector2`
+- `Cloud_Integration_Automation`
+- `Cloud_Integration_Automation2`
+- `Cloud_Transport_Management`
+- `Data_Attribute_Recommendation`
+- `Deploy`
+- `Desktop`
+- `Devices`
+- `Document`
+- `Document_Information_Extraction`
+- `Documents`
+- `Edge_Integration_Cell`
+- `Event`
+- `Extensibility_Service`
+- `Factory`
+- `Feature`
+- `HTML5_App_Repository`
+- `Identity_Authentication`
+- `Identity_Authentication2`
+- `Identity_Directory`
+- `Identity_Directory2`
+- `Identity_Provisioning`
+- `Identity_Provisioning2`
+- `Info`
+- `Intelligent_Situation_Automation`
+- `Invoice_Object_Recommendation`
+- `Invoice_Object_Recommendation2`
+- `Key`
+- `Landscape_Portal_for_SAP_S4HANA_Cloud_ABAP_Environment`
+- `Link`
+- `Locked`
+- `Machine`
+- `Message`
+- `Mobile`
+- `OAuth_20`
+- `Object_Store_on_SAP_BTP`
+- `On-Premise`
+- `Personalized_Recommendation`
+- `SAP_AI_Core`
+- `SAP_AI_Launchpad`
+- `SAP_Alert_Notification_service_for_SAP_BTP`
+- `SAP_Analytics_Cloud`
+- `SAP_Analytics_Cloud_Embedded_Edition`
+- `SAP_Application_Logging_service_for_SAP_BTP`
+- `SAP_Asset_Performance_Management`
+- `SAP_Audit_Log_Service`
+- `SAP_Authorization_Management_Service`
+- `SAP_Authorization_and_Trust_Management_service`
+- `SAP_Automation_Pilot`
+- `SAP_BTP,_ABAP_environment`
+- `SAP_BTP,_Cloud_Foundry_runtime`
+- `SAP_BTP,_Kyma_runtime`
+- `SAP_Build`
+- `SAP_Build_Apps`
+- `SAP_Build_Apps_-_Copy`
+- `SAP_Build_Code`
+- `SAP_Build_Process_Automation`
+- `SAP_Build_Process_Automation_-_Copy`
+- `SAP_Build_Work_Zone_-_Advanced_Edition`
+- `SAP_Build_Work_Zone_-_Standard_Edition`
+- `SAP_Business_Accelerator_Hub`
+- `SAP_Business_Data_Cloud`
+- `SAP_Cloud_ALM`
+- `SAP_Cloud_Application_Programming_Model`
+- `SAP_Cloud_Identity,_SAP_Malware_Scanning_Service`
+- `SAP_Cloud_Identity_Service`
+- `SAP_Cloud_Logging`
+- `SAP_Cloud_Management_Service`
+- `SAP_Cloud_Transport_Management`
+- `SAP_Collaborative_Demand_and_Capacity_Management`
+- `SAP_Connectivity_Service`
+- `SAP_Content_Agent_Service`
+- `SAP_Continuous_Integration_and_Delivery`
+- `SAP_Credential_Store`
+- `SAP_Custom_Domain_service`
+- `SAP_Data_Privacy_Integration`
+- `SAP_Data_Retention_Manager`
+- `SAP_Datasphere`
+- `SAP_Destination_service`
+- `SAP_Digital_Assistant`
+- `SAP_Digital_Assistant_Service`
+- `SAP_Digital_Manufacturing`
+- `SAP_Document_Grounding`
+- `SAP_Document_Management_Service`
+- `SAP_Event_Broker_for_SAP_Cloud_Applications`
+- `SAP_Green_Token`
+- `SAP_HANA_Cloud`
+- `SAP_HANA_Spatial_Services`
+- `SAP_Health_Data_Services_for_FHIR`
+- `SAP_Integration_Suite`
+- `SAP_Integration_Suite_-_API_Managment`
+- `SAP_Integration_Suite_-_Advanced_Event_Mesh`
+- `SAP_Integration_Suite_-_Cloud_Integration`
+- `SAP_Integration_Suite_-_Data_Space_Integration`
+- `SAP_Integration_Suite_-_Event_Mesh`
+- `SAP_Integration_Suite_-_Integration_Advisor`
+- `SAP_Integration_Suite_-_Integration_Assessment`
+- `SAP_Integration_Suite_-_Migration_Assessment`
+- `SAP_Integration_Suite_-_Open_Connectors`
+- `SAP_Integration_Suite_-_SAP_Graph`
+- `SAP_Integration_Suite_-_Trading_Partner_Management`
+- `SAP_Job_Scheduling_service`
+- `SAP_Keystore_Service`
+- `SAP_Landscape_Management_Cloud`
+- `SAP_Logo`
+- `SAP_Master_Data_Governance`
+- `SAP_Master_Data_Integration`
+- `SAP_Mobile_Services`
+- `SAP_Monitoring_service_for_SAP_BTP`
+- `SAP_Omnichannel_Promotion_Pricing`
+- `SAP_PKI_Certificate_Service`
+- `SAP_Persistence_Service_ASE`
+- `SAP_Personal_Data_Manager`
+- `SAP_Private_Link_service`
+- `SAP_Project_and_Resource_Management`
+- `SAP_Responsibility_Management_Service`
+- `SAP_S4HANA_Cloud_for_Intelligent_Intercompany_Reconciliation`
+- `SAP_S4HANA_for_MS_Teams`
+- `SAP_Secure_Login_Service_for_SAP_GUI`
+- `SAP_Service_Manager`
+- `SAP_Software_as_a_Service_Provisioning_Service`
+- `SAP_Solution_Lifecycle_Management_Service`
+- `SAP_Sustainability_Data_Exchange`
+- `SAP_Task_Center`
+- `SAP_Translation_Hub`
+- `SAP_Variant_Configuration_and_Pricing`
+- `SAP_Watch_List_Screening`
+- `Service_Ticket_Intelligence`
+- `Service_Ticket_Intelligence2`
+- `Settings`
+- `Success`
+- `Third_Party`
+- `UI5_flexibility_for_key_users`
+- `UI_Theme_Designer`
+- `User`
+- `Web`

docs/shape-libraries/sitemap.md

@@ -0,0 +1,68 @@
+# sitemap
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.sitemap`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.sitemap.{shape};fillColor=#7ea6e0;strokeColor=#6c8ebf;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+
+
+## Shapes (51)
+
+- `about_us`
+- `audio`
+- `biography`
+- `blog`
+- `calendar`
+- `chart`
+- `chat`
+- `cloud`
+- `contact`
+- `contact_us`
+- `document`
+- `download`
+- `error`
+- `faq`
+- `form`
+- `gallery`
+- `game`
+- `home`
+- `info`
+- `jobs`
+- `log`
+- `login`
+- `mail`
+- `map`
+- `mxgraph.sitemap`
+- `news`
+- `page`
+- `payment`
+- `photo`
+- `portfolio`
+- `post`
+- `pricing`
+- `print`
+- `products`
+- `profile`
+- `references`
+- `script`
+- `search`
+- `security`
+- `services`
+- `settings`
+- `shopping`
+- `sitemap`
+- `slideshow`
+- `sports`
+- `success`
+- `text`
+- `upload`
+- `user`
+- `video`
+- `warning`

docs/shape-libraries/vvd.md

@@ -0,0 +1,112 @@
+# vvd
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.vvd`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.vvd.{shape};fillColor=#00AEEF;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+
+
+## Shapes (95)
+
+- `administrator`
+- `app`
+- `app_volumes_manager`
+- `appstack_volume`
+- `array_manager`
+- `blueprint`
+- `business_continuity_data_protection`
+- `cd`
+- `cloud_computing`
+- `collective_nsx_esg`
+- `consumption_plane`
+- `cpu`
+- `datacenter`
+- `datastore`
+- `disk`
+- `document`
+- `edge_gateway`
+- `endpoint`
+- `ethernet_port`
+- `external_networks`
+- `flash_drive`
+- `folder`
+- `guest_agent_customization`
+- `horizon`
+- `infrastructure`
+- `key`
+- `keyboard`
+- `laptop`
+- `log_files`
+- `logical_distribution`
+- `logical_firewall`
+- `machine`
+- `memory`
+- `monitor`
+- `mouse`
+- `mxgraph.vvd`
+- `networking`
+- `networks`
+- `nfvo`
+- `nsx`
+- `nsx_controller`
+- `nsx_dashboard`
+- `nsx_edge_and_load_balancer`
+- `nsx_esg`
+- `nsx_manager`
+- `nsx_public_cloud_gateway`
+- `on_demand_self_service`
+- `ovdc_networks`
+- `pair_sites`
+- `phone`
+- `physical_network_adapter`
+- `physical_storage`
+- `physical_upstream_router`
+- `platform_services_controller`
+- `protection_group`
+- `protection_group_config`
+- `recovery_plan`
+- `resource_pool`
+- `scsi_controller`
+- `security`
+- `server`
+- `service_provider_cloud_environment`
+- `site`
+- `site_container`
+- `site_recovery`
+- `site_recovery_functional_icon`
+- `ssd`
+- `storage`
+- `switch`
+- `telco_network`
+- `template`
+- `tenant_key`
+- `user_group`
+- `vapp_network`
+- `vcenter_server`
+- `vcloud_director`
+- `virtual_appliance`
+- `virtual_machine`
+- `virtual_switch`
+- `vm_group`
+- `vnf_m`
+- `volumes_agent`
+- `vpn`
+- `vrealize_automation`
+- `vrealize_log_insight`
+- `vrealize_operations`
+- `vrealize_orchestrator`
+- `vrops`
+- `vsan`
+- `vshield`
+- `vxlan`
+- `wavefront`
+- `web_browser`
+- `wi_fi`
+- `writable_volume`

docs/shape-libraries/webicons.md

@@ -0,0 +1,194 @@
+# webicons
+
+**Type:** mxgraph shapes
+**Prefix:** `mxgraph.webicons`
+
+## Usage
+
+```xml
+<mxCell value="label" style="shape=mxgraph.webicons.{shape};fillColor=#3b5998;strokeColor=none;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
+  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
+</mxCell>
+```
+
+
+
+## Shapes (177)
+
+- `adfty`
+- `adobe_pdf`
+- `aim`
+- `allvoices`
+- `amazon`
+- `amazon_2`
+- `android`
+- `apache`
+- `apple`
+- `apple_classic`
+- `arduino`
+- `ask`
+- `atlassian`
+- `audioboo`
+- `aws`
+- `aws_s3`
+- `baidu`
+- `bebo`
+- `behance`
+- `bing`
+- `bitbucket`
+- `blinklist`
+- `blogger`
+- `blogmarks`
+- `bookmarks.fr`
+- `box`
+- `buddymarks`
+- `buffer`
+- `buzzfeed`
+- `chrome`
+- `citeulike`
+- `confluence`
+- `connotea`
+- `dealsplus`
+- `delicious`
+- `designfloat`
+- `deviantart`
+- `digg`
+- `diigo`
+- `dopplr`
+- `drawio1`
+- `drawio2`
+- `dribbble`
+- `dropbox`
+- `dropbox2`
+- `drupal`
+- `dzone`
+- `ebay`
+- `edmodo`
+- `evernote`
+- `facebook`
+- `fancy`
+- `fark`
+- `fashiolista`
+- `feed`
+- `feedburner`
+- `flickr`
+- `folkd`
+- `forrst`
+- `fotolog`
+- `freshbump`
+- `fresqui`
+- `friendfeed`
+- `funp`
+- `fwisp`
+- `gabbr`
+- `gamespot`
+- `github`
+- `gmail`
+- `google`
+- `google_drive`
+- `google_hangout`
+- `google_photos`
+- `google_play`
+- `google_play_light`
+- `google_plus`
+- `grooveshark`
+- `hatena`
+- `html5`
+- `identi.ca`
+- `instagram`
+- `instapaper`
+- `ios`
+- `jamespot`
+- `java`
+- `joomla`
+- `jquery`
+- `json`
+- `json_2`
+- `last.fm`
+- `linkagogo`
+- `linkedin`
+- `livejournal`
+- `mail.ru`
+- `meetup`
+- `meneame`
+- `messenger`
+- `messenger_2`
+- `messenger_3`
+- `mind_body_green`
+- `mongodb`
+- `mxgraph.webicons`
+- `myspace`
+- `n4g`
+- `netlog`
+- `netvibes`
+- `netvouz`
+- `networkedblogs`
+- `newsvine`
+- `odnoklassniki`
+- `oknotizie`
+- `onedrive`
+- `oracle`
+- `paypal`
+- `phone`
+- `phonefavs`
+- `pinterest`
+- `plaxo`
+- `playfire`
+- `plurk`
+- `pocket`
+- `protopage`
+- `readernaut`
+- `reddit`
+- `rss`
+- `scoopit`
+- `scribd`
+- `segnalo`
+- `sina`
+- `sitejot`
+- `skype`
+- `skyrock`
+- `slashdot`
+- `sms`
+- `socialvibe`
+- `society6`
+- `sonico`
+- `soundcloud`
+- `sourceforge`
+- `sourceforge_2`
+- `spring.me`
+- `stackexchange`
+- `stackoverflow`
+- `startaid`
+- `startlap`
+- `steam`
+- `stumbleupon`
+- `stumpedia`
+- `technorati`
+- `translate`
+- `tumblr`
+- `tunein`
+- `twitter`
+- `two`
+- `typepad`
+- `viadeo`
+- `viber`
+- `viddler`
+- `vimeo`
+- `virb`
+- `vkontakte`
+- `wakoopa`
+- `weheartit`
+- `whatsapp`
+- `wix`
+- `wordpress`
+- `wordpress_2`
+- `xanga`
+- `xerpi`
+- `xing`
+- `yahoo`
+- `yahoo_2`
+- `yammer`
+- `yandex`
+- `yelp`
+- `yoolink`
+- `youmob`

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

@@ -0,0 +1,270 @@
+/**
+ * EdgeOne Pages Edge Function for OpenAI-compatible Chat Completions API
+ *
+ * This endpoint provides an OpenAI-compatible API that can be used with
+ * AI SDK's createOpenAI({ baseURL: '/api/edgeai' })
+ *
+ * Uses EdgeOne Edge AI's AI.chatCompletions() which now supports native tool calling.
+ */
+
+import { z } from "zod"
+
+// EdgeOne Pages global AI object
+declare const AI: {
+    chatCompletions(options: {
+        model: string
+        messages: Array<{ role: string; content: string | null }>
+        stream?: boolean
+        max_tokens?: number
+        temperature?: number
+        tools?: any
+        tool_choice?: any
+    }): Promise<ReadableStream<Uint8Array> | any>
+}
+
+const messageItemSchema = z
+    .object({
+        role: z.enum(["user", "assistant", "system", "tool", "function"]),
+        content: z.string().nullable().optional(),
+    })
+    .passthrough()
+
+const messageSchema = z
+    .object({
+        messages: z.array(messageItemSchema),
+        model: z.string().optional(),
+        stream: z.boolean().optional(),
+        tools: z.any().optional(),
+        tool_choice: z.any().optional(),
+        functions: z.any().optional(),
+        function_call: z.any().optional(),
+        temperature: z.number().optional(),
+        top_p: z.number().optional(),
+        max_tokens: z.number().optional(),
+        presence_penalty: z.number().optional(),
+        frequency_penalty: z.number().optional(),
+        stop: z.union([z.string(), z.array(z.string())]).optional(),
+        response_format: z.any().optional(),
+        seed: z.number().optional(),
+        user: z.string().optional(),
+        n: z.number().int().optional(),
+        logit_bias: z.record(z.string(), z.number()).optional(),
+        parallel_tool_calls: z.boolean().optional(),
+        stream_options: z.any().optional(),
+    })
+    .passthrough()
+
+// Model configuration
+const ALLOWED_MODELS = [
+    "@tx/deepseek-ai/deepseek-v32",
+    "@tx/deepseek-ai/deepseek-r1-0528",
+    "@tx/deepseek-ai/deepseek-v3-0324",
+]
+
+const MODEL_ALIASES: Record<string, string> = {
+    "deepseek-v3.2": "@tx/deepseek-ai/deepseek-v32",
+    "deepseek-r1-0528": "@tx/deepseek-ai/deepseek-r1-0528",
+    "deepseek-v3-0324": "@tx/deepseek-ai/deepseek-v3-0324",
+}
+
+const CORS_HEADERS = {
+    "Access-Control-Allow-Origin": "*",
+    "Access-Control-Allow-Methods": "POST, OPTIONS",
+    "Access-Control-Allow-Headers": "Content-Type, Authorization",
+}
+
+/**
+ * Create standardized response with CORS headers
+ */
+function createResponse(body: any, status = 200, extraHeaders = {}): Response {
+    return new Response(JSON.stringify(body), {
+        status,
+        headers: {
+            "Content-Type": "application/json",
+            ...CORS_HEADERS,
+            ...extraHeaders,
+        },
+    })
+}
+
+/**
+ * Handle OPTIONS request for CORS preflight
+ */
+function handleOptionsRequest(): Response {
+    return new Response(null, {
+        headers: {
+            ...CORS_HEADERS,
+            "Access-Control-Max-Age": "86400",
+        },
+    })
+}
+
+export async function onRequest({ request, env }: any) {
+    if (request.method === "OPTIONS") {
+        return handleOptionsRequest()
+    }
+
+    request.headers.delete("accept-encoding")
+
+    try {
+        const json = await request.clone().json()
+        const parseResult = messageSchema.safeParse(json)
+
+        if (!parseResult.success) {
+            return createResponse(
+                {
+                    error: {
+                        message: parseResult.error.message,
+                        type: "invalid_request_error",
+                    },
+                },
+                400,
+            )
+        }
+
+        const { messages, model, stream, tools, tool_choice, ...extraParams } =
+            parseResult.data
+
+        // Validate messages
+        const userMessages = messages.filter(
+            (message) => message.role === "user",
+        )
+        if (!userMessages.length) {
+            return createResponse(
+                {
+                    error: {
+                        message: "No user message found",
+                        type: "invalid_request_error",
+                    },
+                },
+                400,
+            )
+        }
+
+        // Resolve model
+        const requestedModel = model || ALLOWED_MODELS[0]
+        const selectedModel = MODEL_ALIASES[requestedModel] || requestedModel
+
+        if (!ALLOWED_MODELS.includes(selectedModel)) {
+            return createResponse(
+                {
+                    error: {
+                        message: `Invalid model: ${requestedModel}.`,
+                        type: "invalid_request_error",
+                    },
+                },
+                429,
+            )
+        }
+
+        console.log(
+            `[EdgeOne] Model: ${selectedModel}, Tools: ${tools?.length || 0}, Stream: ${stream ?? true}`,
+        )
+
+        try {
+            const isStream = !!stream
+
+            // Non-streaming: return mock response for validation
+            // AI.chatCompletions doesn't support non-streaming mode
+            if (!isStream) {
+                const mockResponse = {
+                    id: `chatcmpl-${Date.now()}`,
+                    object: "chat.completion",
+                    created: Math.floor(Date.now() / 1000),
+                    model: selectedModel,
+                    choices: [
+                        {
+                            index: 0,
+                            message: {
+                                role: "assistant",
+                                content: "OK",
+                            },
+                            finish_reason: "stop",
+                        },
+                    ],
+                    usage: {
+                        prompt_tokens: 10,
+                        completion_tokens: 1,
+                        total_tokens: 11,
+                    },
+                }
+                return createResponse(mockResponse)
+            }
+
+            // Build AI.chatCompletions options for streaming
+            const aiOptions: any = {
+                ...extraParams,
+                model: selectedModel,
+                messages,
+                stream: true,
+            }
+
+            // Add tools if provided
+            if (tools && tools.length > 0) {
+                aiOptions.tools = tools
+            }
+            if (tool_choice !== undefined) {
+                aiOptions.tool_choice = tool_choice
+            }
+
+            const aiResponse = await AI.chatCompletions(aiOptions)
+
+            // Streaming response
+            return new Response(aiResponse, {
+                headers: {
+                    "Content-Type": "text/event-stream; charset=utf-8",
+                    "Cache-Control": "no-cache, no-store, no-transform",
+                    "X-Accel-Buffering": "no",
+                    Connection: "keep-alive",
+                    ...CORS_HEADERS,
+                },
+            })
+        } catch (error: any) {
+            // Handle EdgeOne specific errors
+            try {
+                const message = JSON.parse(error.message)
+                if (message.code === 14020) {
+                    return createResponse(
+                        {
+                            error: {
+                                message:
+                                    "The daily public quota has been exhausted. After deployment, you can enjoy a personal daily exclusive quota.",
+                                type: "rate_limit_error",
+                            },
+                        },
+                        429,
+                    )
+                }
+                return createResponse(
+                    { error: { message: error.message, type: "api_error" } },
+                    500,
+                )
+            } catch {
+                // Not a JSON error message
+            }
+
+            console.error("[EdgeOne] AI error:", error.message)
+            return createResponse(
+                {
+                    error: {
+                        message: error.message || "AI service error",
+                        type: "api_error",
+                    },
+                },
+                500,
+            )
+        }
+    } catch (error: any) {
+        console.error("[EdgeOne] Request error:", error.message)
+        return createResponse(
+            {
+                error: {
+                    message: "Request processing failed",
+                    type: "server_error",
+                    details: error.message,
+                },
+            },
+            500,
+        )
+    }
+}

edgeone.json

@@ -0,0 +1,5 @@
+{
+    "nodeFunctionsConfig": {
+        "maxDuration": 120
+    }
+}

electron/electron-builder.yml

@@ -0,0 +1,96 @@
+appId: com.nextaidrawio.app
+productName: Next AI Draw.io
+copyright: Copyright © 2024 Next AI Draw.io
+electronVersion: 39.2.7
+
+directories:
+  output: release
+  buildResources: resources
+
+afterPack: ./scripts/afterPack.cjs
+
+files:
+  - dist-electron/**/*
+  - "!node_modules"
+
+asarUnpack:
+  - "**/*.node"
+
+extraResources:
+  # Copy prepared standalone directory (includes node_modules)
+  - from: electron-standalone/
+    to: standalone/
+  # Copy icon for runtime use (Windows/Linux)
+  - from: resources/icon.png
+    to: icon.png
+
+# macOS configuration
+mac:
+  category: public.app-category.productivity
+  icon: resources/icon.png
+  target:
+    - target: dmg
+      arch:
+        - x64
+        - arm64
+    - target: zip
+      arch:
+        - x64
+        - arm64
+  hardenedRuntime: true
+  gatekeeperAssess: false
+  entitlements: resources/entitlements.mac.plist
+  entitlementsInherit: resources/entitlements.mac.plist
+
+dmg:
+  contents:
+    - x: 130
+      y: 220
+    - x: 410
+      y: 220
+      type: link
+      path: /Applications
+  window:
+    width: 540
+    height: 380
+
+# Windows configuration
+win:
+  icon: resources/icon.png
+  target:
+    - target: nsis
+      arch:
+        - x64
+        - arm64
+    - target: portable
+      arch:
+        - x64
+        - arm64
+
+nsis:
+  oneClick: false
+  perMachine: false
+  allowToChangeInstallationDirectory: true
+  deleteAppDataOnUninstall: false
+  createDesktopShortcut: true
+  createStartMenuShortcut: true
+
+# Linux configuration
+linux:
+  icon: resources/icon.png
+  category: Office
+  maintainer: Next AI Draw.io <nextaidrawio@users.noreply.github.com>
+  target:
+    - target: AppImage
+      arch:
+        - x64
+        - arm64
+    - target: deb
+      arch:
+        - x64
+        - arm64
+
+# Publish configuration (optional)
+publish:
+  provider: github
+  releaseType: release

electron/electron.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Type declarations for Electron API exposed via preload script
+ */
+
+/** Configuration preset interface */
+interface ConfigPreset {
+    id: string
+    name: string
+    createdAt: number
+    updatedAt: number
+    config: {
+        AI_PROVIDER?: string
+        AI_MODEL?: string
+        AI_API_KEY?: string
+        AI_BASE_URL?: string
+        TEMPERATURE?: string
+        [key: string]: string | undefined
+    }
+}
+
+/** Result of applying a preset */
+interface ApplyPresetResult {
+    success: boolean
+    error?: string
+    env?: Record<string, string>
+}
+
+declare global {
+    interface Window {
+        /** Main window Electron API */
+        electronAPI?: {
+            /** Current platform (darwin, win32, linux) */
+            platform: NodeJS.Platform
+            /** Whether running in Electron environment */
+            isElectron: boolean
+            /** Get application version */
+            getVersion: () => Promise<string>
+            /** Minimize the window */
+            minimize: () => void
+            /** Maximize/restore the window */
+            maximize: () => void
+            /** Close the window */
+            close: () => void
+            /** Open file dialog and return file path */
+            openFile: () => Promise<string | null>
+            /** Save data to file via save dialog */
+            saveFile: (data: string) => Promise<boolean>
+        }
+
+        /** Settings window Electron API */
+        settingsAPI?: {
+            /** Get all configuration presets */
+            getPresets: () => Promise<ConfigPreset[]>
+            /** Get current preset ID */
+            getCurrentPresetId: () => Promise<string | null>
+            /** Get current preset */
+            getCurrentPreset: () => Promise<ConfigPreset | null>
+            /** Save (create or update) a preset */
+            savePreset: (preset: {
+                id?: string
+                name: string
+                config: Record<string, string | undefined>
+            }) => Promise<ConfigPreset>
+            /** Delete a preset */
+            deletePreset: (id: string) => Promise<boolean>
+            /** Apply a preset (sets environment variables and restarts server) */
+            applyPreset: (id: string) => Promise<ApplyPresetResult>
+            /** Close settings window */
+            close: () => void
+        }
+    }
+}
+
+export { ConfigPreset, ApplyPresetResult }

electron/main/app-menu.ts

@@ -0,0 +1,241 @@
+import {
+    app,
+    BrowserWindow,
+    dialog,
+    Menu,
+    type MenuItemConstructorOptions,
+    shell,
+} from "electron"
+import {
+    applyPresetToEnv,
+    getAllPresets,
+    getCurrentPresetId,
+    setCurrentPreset,
+} from "./config-manager"
+import { restartNextServer } from "./next-server"
+import { showSettingsWindow } from "./settings-window"
+
+/**
+ * Build and set the application menu
+ */
+export function buildAppMenu(): void {
+    const template = getMenuTemplate()
+    const menu = Menu.buildFromTemplate(template)
+    Menu.setApplicationMenu(menu)
+}
+
+/**
+ * Rebuild the menu (call this when presets change)
+ */
+export function rebuildAppMenu(): void {
+    buildAppMenu()
+}
+
+/**
+ * Get the menu template
+ */
+function getMenuTemplate(): MenuItemConstructorOptions[] {
+    const isMac = process.platform === "darwin"
+
+    const template: MenuItemConstructorOptions[] = []
+
+    // macOS app menu
+    if (isMac) {
+        template.push({
+            label: app.name,
+            submenu: [
+                { role: "about" },
+                { type: "separator" },
+                {
+                    label: "Settings...",
+                    accelerator: "CmdOrCtrl+,",
+                    click: () => {
+                        const win = BrowserWindow.getFocusedWindow()
+                        showSettingsWindow(win || undefined)
+                    },
+                },
+                { type: "separator" },
+                { role: "services" },
+                { type: "separator" },
+                { role: "hide" },
+                { role: "hideOthers" },
+                { role: "unhide" },
+                { type: "separator" },
+                { role: "quit" },
+            ],
+        })
+    }
+
+    // File menu
+    template.push({
+        label: "File",
+        submenu: [
+            ...(isMac
+                ? []
+                : [
+                      {
+                          label: "Settings",
+                          accelerator: "CmdOrCtrl+,",
+                          click: () => {
+                              const win = BrowserWindow.getFocusedWindow()
+                              showSettingsWindow(win || undefined)
+                          },
+                      },
+                      { type: "separator" } as MenuItemConstructorOptions,
+                  ]),
+            isMac ? { role: "close" } : { role: "quit" },
+        ],
+    })
+
+    // Edit menu
+    template.push({
+        label: "Edit",
+        submenu: [
+            { role: "undo" },
+            { role: "redo" },
+            { type: "separator" },
+            { role: "cut" },
+            { role: "copy" },
+            { role: "paste" },
+            ...(isMac
+                ? [
+                      {
+                          role: "pasteAndMatchStyle",
+                      } as MenuItemConstructorOptions,
+                      { role: "delete" } as MenuItemConstructorOptions,
+                      { role: "selectAll" } as MenuItemConstructorOptions,
+                  ]
+                : [
+                      { role: "delete" } as MenuItemConstructorOptions,
+                      { type: "separator" } as MenuItemConstructorOptions,
+                      { role: "selectAll" } as MenuItemConstructorOptions,
+                  ]),
+        ],
+    })
+
+    // View menu
+    template.push({
+        label: "View",
+        submenu: [
+            { role: "reload" },
+            { role: "forceReload" },
+            { role: "toggleDevTools" },
+            { type: "separator" },
+            { role: "resetZoom" },
+            { role: "zoomIn" },
+            { role: "zoomOut" },
+            { type: "separator" },
+            { role: "togglefullscreen" },
+        ],
+    })
+
+    // Configuration menu with presets
+    template.push(buildConfigMenu())
+
+    // Window menu
+    template.push({
+        label: "Window",
+        submenu: [
+            { role: "minimize" },
+            { role: "zoom" },
+            ...(isMac
+                ? [
+                      { type: "separator" } as MenuItemConstructorOptions,
+                      { role: "front" } as MenuItemConstructorOptions,
+                  ]
+                : [{ role: "close" } as MenuItemConstructorOptions]),
+        ],
+    })
+
+    // Help menu
+    template.push({
+        label: "Help",
+        submenu: [
+            {
+                label: "Documentation",
+                click: async () => {
+                    await shell.openExternal(
+                        "https://github.com/dayuanjiang/next-ai-draw-io",
+                    )
+                },
+            },
+            {
+                label: "Report Issue",
+                click: async () => {
+                    await shell.openExternal(
+                        "https://github.com/dayuanjiang/next-ai-draw-io/issues",
+                    )
+                },
+            },
+        ],
+    })
+
+    return template
+}
+
+/**
+ * Build the Configuration menu with presets
+ */
+function buildConfigMenu(): MenuItemConstructorOptions {
+    const presets = getAllPresets()
+    const currentPresetId = getCurrentPresetId()
+
+    const presetItems: MenuItemConstructorOptions[] = presets.map((preset) => ({
+        label: preset.name,
+        type: "radio",
+        checked: preset.id === currentPresetId,
+        click: async () => {
+            const previousPresetId = getCurrentPresetId()
+            const env = applyPresetToEnv(preset.id)
+
+            if (env) {
+                try {
+                    await restartNextServer()
+                    rebuildAppMenu() // Rebuild menu to update checkmarks
+                } catch (error) {
+                    console.error("Failed to restart server:", error)
+
+                    // Revert to previous preset on failure
+                    if (previousPresetId) {
+                        applyPresetToEnv(previousPresetId)
+                    } else {
+                        setCurrentPreset(null)
+                    }
+
+                    // Rebuild menu to restore previous checkmark state
+                    rebuildAppMenu()
+
+                    // Show error dialog to notify user
+                    dialog.showErrorBox(
+                        "Configuration Error",
+                        `Failed to apply preset "${preset.name}". The server could not be restarted.\n\nThe previous configuration has been restored.\n\nError: ${error instanceof Error ? error.message : String(error)}`,
+                    )
+                }
+            }
+        },
+    }))
+
+    return {
+        label: "Configuration",
+        submenu: [
+            ...(presetItems.length > 0
+                ? [
+                      { label: "Switch Preset", enabled: false },
+                      { type: "separator" } as MenuItemConstructorOptions,
+                      ...presetItems,
+                      { type: "separator" } as MenuItemConstructorOptions,
+                  ]
+                : []),
+            {
+                label:
+                    presetItems.length > 0
+                        ? "Manage Presets..."
+                        : "Add Configuration Preset...",
+                click: () => {
+                    const win = BrowserWindow.getFocusedWindow()
+                    showSettingsWindow(win || undefined)
+                },
+            },
+        ],
+    }
+}

electron/main/config-manager.ts

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

electron/main/env-loader.ts

@@ -0,0 +1,67 @@
+import fs from "node:fs"
+import path from "node:path"
+import { app } from "electron"
+
+/**
+ * Load environment variables from .env file
+ * Searches multiple locations in priority order
+ */
+export function loadEnvFile(): void {
+    const possiblePaths = [
+        // Next to the executable (for portable installations)
+        path.join(path.dirname(app.getPath("exe")), ".env"),
+        // User data directory (persists across updates)
+        path.join(app.getPath("userData"), ".env"),
+        // Development: project root
+        path.join(app.getAppPath(), ".env.local"),
+        path.join(app.getAppPath(), ".env"),
+    ]
+
+    for (const envPath of possiblePaths) {
+        if (fs.existsSync(envPath)) {
+            console.log(`Loading environment from: ${envPath}`)
+            loadEnvFromFile(envPath)
+            return
+        }
+    }
+
+    console.log("No .env file found, using system environment variables")
+}
+
+/**
+ * Parse and load environment variables from a file
+ */
+function loadEnvFromFile(filePath: string): void {
+    try {
+        const content = fs.readFileSync(filePath, "utf-8")
+        const lines = content.split("\n")
+
+        for (const line of lines) {
+            const trimmed = line.trim()
+
+            // Skip comments and empty lines
+            if (!trimmed || trimmed.startsWith("#")) continue
+
+            const equalIndex = trimmed.indexOf("=")
+            if (equalIndex === -1) continue
+
+            const key = trimmed.slice(0, equalIndex).trim()
+            let value = trimmed.slice(equalIndex + 1).trim()
+
+            // Remove surrounding quotes
+            if (
+                (value.startsWith('"') && value.endsWith('"')) ||
+                (value.startsWith("'") && value.endsWith("'"))
+            ) {
+                value = value.slice(1, -1)
+            }
+
+            // Don't override existing environment variables
+            if (!(key in process.env)) {
+                process.env[key] = value
+            }
+        }
+    } catch (error) {
+        console.error(`Failed to load env file ${filePath}:`, error)
+    }
+}

electron/main/index.ts

@@ -0,0 +1,105 @@
+import { app, BrowserWindow, dialog, shell } from "electron"
+import { buildAppMenu } from "./app-menu"
+import { getCurrentPresetEnv } from "./config-manager"
+import { loadEnvFile } from "./env-loader"
+import { registerIpcHandlers } from "./ipc-handlers"
+import { startNextServer, stopNextServer } from "./next-server"
+import { registerSettingsWindowHandlers } from "./settings-window"
+import { createWindow, getMainWindow } from "./window-manager"
+
+// Single instance lock
+const gotTheLock = app.requestSingleInstanceLock()
+
+if (!gotTheLock) {
+    app.quit()
+} else {
+    app.on("second-instance", () => {
+        const mainWindow = getMainWindow()
+        if (mainWindow) {
+            if (mainWindow.isMinimized()) mainWindow.restore()
+            mainWindow.focus()
+        }
+    })
+
+    // Load environment variables from .env files
+    loadEnvFile()
+
+    // Apply saved preset environment variables (overrides .env)
+    const presetEnv = getCurrentPresetEnv()
+    for (const [key, value] of Object.entries(presetEnv)) {
+        process.env[key] = value
+    }
+
+    const isDev = process.env.NODE_ENV === "development"
+    let serverUrl: string | null = null
+
+    app.whenReady().then(async () => {
+        // Register IPC handlers
+        registerIpcHandlers()
+        registerSettingsWindowHandlers()
+
+        // Build application menu
+        buildAppMenu()
+
+        try {
+            if (isDev) {
+                // Development: use the dev server URL
+                serverUrl =
+                    process.env.ELECTRON_DEV_URL || "http://localhost:6002"
+                console.log(`Development mode: connecting to ${serverUrl}`)
+            } else {
+                // Production: start Next.js standalone server
+                serverUrl = await startNextServer()
+            }
+
+            // Create main window
+            createWindow(serverUrl)
+        } catch (error) {
+            console.error("Failed to start application:", error)
+            dialog.showErrorBox(
+                "Startup Error",
+                `Failed to start the application: ${error instanceof Error ? error.message : "Unknown error"}`,
+            )
+            app.quit()
+        }
+
+        app.on("activate", () => {
+            if (BrowserWindow.getAllWindows().length === 0) {
+                if (serverUrl) {
+                    createWindow(serverUrl)
+                }
+            }
+        })
+    })
+
+    app.on("window-all-closed", () => {
+        if (process.platform !== "darwin") {
+            stopNextServer()
+            app.quit()
+        }
+    })
+
+    app.on("before-quit", () => {
+        stopNextServer()
+    })
+
+    // Open external links in default browser
+    app.on("web-contents-created", (_, contents) => {
+        contents.setWindowOpenHandler(({ url }) => {
+            // Allow diagrams.net iframe
+            if (
+                url.includes("diagrams.net") ||
+                url.includes("draw.io") ||
+                url.startsWith("http://localhost")
+            ) {
+                return { action: "allow" }
+            }
+            // Open other links in external browser
+            if (url.startsWith("http://") || url.startsWith("https://")) {
+                shell.openExternal(url)
+                return { action: "deny" }
+            }
+            return { action: "allow" }
+        })
+    })
+}

electron/main/ipc-handlers.ts

@@ -0,0 +1,212 @@
+import { app, BrowserWindow, dialog, ipcMain } from "electron"
+import {
+    applyPresetToEnv,
+    type ConfigPreset,
+    createPreset,
+    deletePreset,
+    getAllPresets,
+    getCurrentPreset,
+    getCurrentPresetId,
+    setCurrentPreset,
+    updatePreset,
+} from "./config-manager"
+import { restartNextServer } from "./next-server"
+
+/**
+ * Allowed configuration keys for presets
+ * This whitelist prevents arbitrary environment variable injection
+ */
+const ALLOWED_CONFIG_KEYS = new Set([
+    "AI_PROVIDER",
+    "AI_MODEL",
+    "AI_API_KEY",
+    "AI_BASE_URL",
+    "TEMPERATURE",
+])
+
+/**
+ * Sanitize preset config to only include allowed keys
+ */
+function sanitizePresetConfig(
+    config: Record<string, string | undefined>,
+): Record<string, string | undefined> {
+    const sanitized: Record<string, string | undefined> = {}
+    for (const key of ALLOWED_CONFIG_KEYS) {
+        if (key in config && typeof config[key] === "string") {
+            sanitized[key] = config[key]
+        }
+    }
+    return sanitized
+}
+
+/**
+ * Register all IPC handlers
+ */
+export function registerIpcHandlers(): void {
+    // ==================== App Info ====================
+
+    ipcMain.handle("get-version", () => {
+        return app.getVersion()
+    })
+
+    // ==================== Window Controls ====================
+
+    ipcMain.on("window-minimize", (event) => {
+        const win = BrowserWindow.fromWebContents(event.sender)
+        win?.minimize()
+    })
+
+    ipcMain.on("window-maximize", (event) => {
+        const win = BrowserWindow.fromWebContents(event.sender)
+        if (win?.isMaximized()) {
+            win.unmaximize()
+        } else {
+            win?.maximize()
+        }
+    })
+
+    ipcMain.on("window-close", (event) => {
+        const win = BrowserWindow.fromWebContents(event.sender)
+        win?.close()
+    })
+
+    // ==================== File Dialogs ====================
+
+    ipcMain.handle("dialog-open-file", async (event) => {
+        const win = BrowserWindow.fromWebContents(event.sender)
+        if (!win) return null
+
+        const result = await dialog.showOpenDialog(win, {
+            properties: ["openFile"],
+            filters: [
+                { name: "Draw.io Files", extensions: ["drawio", "xml"] },
+                { name: "All Files", extensions: ["*"] },
+            ],
+        })
+
+        if (result.canceled || result.filePaths.length === 0) {
+            return null
+        }
+
+        // Read the file content
+        const fs = await import("node:fs/promises")
+        try {
+            const content = await fs.readFile(result.filePaths[0], "utf-8")
+            return content
+        } catch (error) {
+            console.error("Failed to read file:", error)
+            return null
+        }
+    })
+
+    ipcMain.handle("dialog-save-file", async (event, data: string) => {
+        const win = BrowserWindow.fromWebContents(event.sender)
+        if (!win) return false
+
+        const result = await dialog.showSaveDialog(win, {
+            filters: [
+                { name: "Draw.io Files", extensions: ["drawio"] },
+                { name: "XML Files", extensions: ["xml"] },
+            ],
+        })
+
+        if (result.canceled || !result.filePath) {
+            return false
+        }
+
+        const fs = await import("node:fs/promises")
+        try {
+            await fs.writeFile(result.filePath, data, "utf-8")
+            return true
+        } catch (error) {
+            console.error("Failed to save file:", error)
+            return false
+        }
+    })
+
+    // ==================== Config Presets ====================
+
+    ipcMain.handle("config-presets:get-all", () => {
+        return getAllPresets()
+    })
+
+    ipcMain.handle("config-presets:get-current", () => {
+        return getCurrentPreset()
+    })
+
+    ipcMain.handle("config-presets:get-current-id", () => {
+        return getCurrentPresetId()
+    })
+
+    ipcMain.handle(
+        "config-presets:save",
+        (
+            _event,
+            preset: Omit<ConfigPreset, "id" | "createdAt" | "updatedAt"> & {
+                id?: string
+            },
+        ) => {
+            // Validate preset name
+            if (typeof preset.name !== "string" || !preset.name.trim()) {
+                throw new Error("Invalid preset name")
+            }
+
+            // Sanitize config to only allow whitelisted keys
+            const sanitizedConfig = sanitizePresetConfig(preset.config ?? {})
+
+            if (preset.id) {
+                // Update existing preset
+                return updatePreset(preset.id, {
+                    name: preset.name.trim(),
+                    config: sanitizedConfig,
+                })
+            }
+            // Create new preset
+            return createPreset({
+                name: preset.name.trim(),
+                config: sanitizedConfig,
+            })
+        },
+    )
+
+    ipcMain.handle("config-presets:delete", (_event, id: string) => {
+        return deletePreset(id)
+    })
+
+    ipcMain.handle("config-presets:apply", async (_event, id: string) => {
+        const env = applyPresetToEnv(id)
+        if (!env) {
+            return { success: false, error: "Preset not found" }
+        }
+
+        const isDev = process.env.NODE_ENV === "development"
+
+        if (isDev) {
+            // In development mode, the config file change will trigger
+            // the file watcher in electron-dev.mjs to restart Next.js
+            // We just need to save the preset (already done in applyPresetToEnv)
+            return { success: true, env, devMode: true }
+        }
+
+        // Production mode: restart the Next.js server to apply new environment variables
+        try {
+            await restartNextServer()
+            return { success: true, env }
+        } catch (error) {
+            return {
+                success: false,
+                error:
+                    error instanceof Error
+                        ? error.message
+                        : "Failed to restart server",
+            }
+        }
+    })
+
+    ipcMain.handle(
+        "config-presets:set-current",
+        (_event, id: string | null) => {
+            return setCurrentPreset(id)
+        },
+    )
+}

electron/main/next-server.ts

@@ -0,0 +1,161 @@
+import { existsSync } from "node:fs"
+import path from "node:path"
+import { app, type UtilityProcess, utilityProcess } from "electron"
+import {
+    findAvailablePort,
+    getAllocatedPort,
+    getServerUrl,
+    isPortAvailable,
+} from "./port-manager"
+
+let serverProcess: UtilityProcess | null = null
+
+/**
+ * Get the path to the standalone server resources
+ * In packaged app: resources/standalone
+ * In development: .next/standalone
+ */
+function getResourcePath(): string {
+    if (app.isPackaged) {
+        return path.join(process.resourcesPath, "standalone")
+    }
+    return path.join(app.getAppPath(), ".next", "standalone")
+}
+
+/**
+ * Wait for the server to be ready by polling the health endpoint
+ */
+async function waitForServer(url: string, timeout = 30000): Promise<void> {
+    const start = Date.now()
+    while (Date.now() - start < timeout) {
+        try {
+            const response = await fetch(url)
+            if (response.ok || response.status < 500) {
+                return
+            }
+        } catch {
+            // Server not ready yet
+        }
+        await new Promise((resolve) => setTimeout(resolve, 100))
+    }
+    throw new Error(`Server startup timeout after ${timeout}ms`)
+}
+
+/**
+ * Start the Next.js standalone server using Electron's utilityProcess
+ * This API is designed for running Node.js code in the background
+ */
+export async function startNextServer(): Promise<string> {
+    const resourcePath = getResourcePath()
+    const serverPath = path.join(resourcePath, "server.js")
+
+    console.log(`Starting Next.js server from: ${resourcePath}`)
+    console.log(`Server script path: ${serverPath}`)
+
+    // Verify server script exists before attempting to start
+    if (!existsSync(serverPath)) {
+        throw new Error(
+            `Server script not found at ${serverPath}. ` +
+                "Please ensure the app was built correctly with 'npm run build'.",
+        )
+    }
+
+    // Find an available port (random in production, fixed in development)
+    const port = await findAvailablePort()
+    console.log(`Using port: ${port}`)
+
+    // Set up environment variables
+    const env: Record<string, string> = {
+        NODE_ENV: "production",
+        PORT: String(port),
+        HOSTNAME: "localhost",
+    }
+
+    // Set cache directory to a writable location (user's app data folder)
+    // This is necessary because the packaged app might be on a read-only volume
+    if (app.isPackaged) {
+        const cacheDir = path.join(app.getPath("userData"), "cache")
+        env.NEXT_CACHE_DIR = cacheDir
+    }
+
+    // Copy existing environment variables
+    for (const [key, value] of Object.entries(process.env)) {
+        if (value !== undefined && !env[key]) {
+            env[key] = value
+        }
+    }
+
+    // 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, [], {
+        cwd: resourcePath,
+        env,
+        stdio: "pipe",
+    })
+
+    serverProcess.stdout?.on("data", (data) => {
+        console.log(`[Next.js] ${data.toString().trim()}`)
+    })
+
+    serverProcess.stderr?.on("data", (data) => {
+        console.error(`[Next.js Error] ${data.toString().trim()}`)
+    })
+
+    serverProcess.on("exit", (code) => {
+        console.log(`Next.js server exited with code ${code}`)
+        serverProcess = null
+    })
+
+    const url = getServerUrl()
+    await waitForServer(url)
+    console.log(`Next.js server started at ${url}`)
+
+    return url
+}
+
+/**
+ * Stop the Next.js server process
+ */
+export function stopNextServer(): void {
+    if (serverProcess) {
+        console.log("Stopping Next.js server...")
+        serverProcess.kill()
+        serverProcess = null
+    }
+}
+
+/**
+ * Wait for the server to fully stop
+ */
+async function waitForServerStop(timeout = 5000): Promise<void> {
+    const port = getAllocatedPort()
+    if (port === null) {
+        return
+    }
+
+    const start = Date.now()
+    while (Date.now() - start < timeout) {
+        const available = await isPortAvailable(port)
+        if (available) {
+            return
+        }
+        await new Promise((resolve) => setTimeout(resolve, 100))
+    }
+    console.warn("Server stop timeout, port may still be in use")
+}
+
+/**
+ * Restart the Next.js server with new environment variables
+ */
+export async function restartNextServer(): Promise<string> {
+    console.log("Restarting Next.js server...")
+
+    // Stop the current server
+    stopNextServer()
+
+    // Wait for the port to be released
+    await waitForServerStop()
+
+    // Start the server again
+    return startNextServer()
+}

electron/main/port-manager.ts

@@ -0,0 +1,117 @@
+import net from "node:net"
+import { app } from "electron"
+
+/**
+ * Port configuration
+ * Using fixed ports to preserve localStorage across restarts
+ * (localStorage is origin-specific, so changing ports loses all saved data)
+ */
+const PORT_CONFIG = {
+    // Development mode uses fixed port for hot reload compatibility
+    development: 6002,
+    // Production mode uses fixed port (61337) to preserve localStorage
+    // Falls back to sequential ports if unavailable
+    production: 61337,
+    // Maximum attempts to find an available port (fallback)
+    maxAttempts: 100,
+}
+
+/**
+ * Currently allocated port (cached after first allocation)
+ */
+let allocatedPort: number | null = null
+
+/**
+ * Check if a specific port is available
+ */
+export function isPortAvailable(port: number): Promise<boolean> {
+    return new Promise((resolve) => {
+        const server = net.createServer()
+        server.once("error", () => resolve(false))
+        server.once("listening", () => {
+            server.close()
+            resolve(true)
+        })
+        server.listen(port, "127.0.0.1")
+    })
+}
+
+/**
+ * Find an available port
+ * - In development: uses fixed port (6002)
+ * - In production: uses fixed port (61337) to preserve localStorage
+ * - Falls back to sequential ports if preferred port is unavailable
+ *
+ * @param reuseExisting If true, try to reuse the previously allocated port
+ * @returns Promise<number> The available port
+ * @throws Error if no available port found after max attempts
+ */
+export async function findAvailablePort(reuseExisting = true): Promise<number> {
+    const isDev = !app.isPackaged
+    const preferredPort = isDev
+        ? PORT_CONFIG.development
+        : PORT_CONFIG.production
+
+    // Try to reuse cached port if requested and available
+    if (reuseExisting && allocatedPort !== null) {
+        const available = await isPortAvailable(allocatedPort)
+        if (available) {
+            return allocatedPort
+        }
+        console.warn(
+            `Previously allocated port ${allocatedPort} is no longer available`,
+        )
+        allocatedPort = null
+    }
+
+    // Try preferred port first
+    if (await isPortAvailable(preferredPort)) {
+        allocatedPort = preferredPort
+        return preferredPort
+    }
+
+    console.warn(
+        `Preferred port ${preferredPort} is in use, finding alternative...`,
+    )
+
+    // Fallback: try sequential ports starting from preferred + 1
+    for (let attempt = 1; attempt <= PORT_CONFIG.maxAttempts; attempt++) {
+        const port = preferredPort + attempt
+        if (await isPortAvailable(port)) {
+            allocatedPort = port
+            console.log(`Allocated fallback port: ${port}`)
+            return port
+        }
+    }
+
+    throw new Error(
+        `Failed to find available port after ${PORT_CONFIG.maxAttempts} attempts`,
+    )
+}
+
+/**
+ * Get the currently allocated port
+ * Returns null if no port has been allocated yet
+ */
+export function getAllocatedPort(): number | null {
+    return allocatedPort
+}
+
+/**
+ * Reset the allocated port (useful for testing or restart scenarios)
+ */
+export function resetAllocatedPort(): void {
+    allocatedPort = null
+}
+
+/**
+ * Get the server URL with the allocated port
+ */
+export function getServerUrl(): string {
+    if (allocatedPort === null) {
+        throw new Error(
+            "No port allocated yet. Call findAvailablePort() first.",
+        )
+    }
+    return `http://localhost:${allocatedPort}`
+}

electron/main/settings-window.ts

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

electron/main/window-manager.ts

@@ -0,0 +1,84 @@
+import path from "node:path"
+import { app, BrowserWindow, screen } from "electron"
+
+let mainWindow: BrowserWindow | null = null
+
+/**
+ * Get the icon path based on platform
+ * Note: electron-builder converts icon.png during packaging,
+ * but at runtime we use PNG directly - Electron handles it
+ */
+function getIconPath(): string | undefined {
+    // macOS doesn't need explicit icon - it's embedded in the app bundle
+    if (process.platform === "darwin" && app.isPackaged) {
+        return undefined
+    }
+
+    const iconName = "icon.png"
+
+    if (app.isPackaged) {
+        return path.join(process.resourcesPath, iconName)
+    }
+
+    // Development: use icon.png from resources
+    return path.join(__dirname, "../../resources/icon.png")
+}
+
+/**
+ * Create the main application window
+ */
+export function createWindow(serverUrl: string): BrowserWindow {
+    const { width, height } = screen.getPrimaryDisplay().workAreaSize
+
+    mainWindow = new BrowserWindow({
+        width: Math.min(1400, Math.floor(width * 0.9)),
+        height: Math.min(900, Math.floor(height * 0.9)),
+        minWidth: 800,
+        minHeight: 600,
+        title: "Next AI Draw.io",
+        icon: getIconPath(),
+        show: false, // Don't show until ready
+        webPreferences: {
+            preload: path.join(__dirname, "../preload/index.js"),
+            contextIsolation: true,
+            nodeIntegration: false,
+            sandbox: true,
+            webSecurity: true,
+        },
+    })
+
+    // Load the Next.js application
+    mainWindow.loadURL(serverUrl)
+
+    // Show window when ready to prevent flashing
+    mainWindow.once("ready-to-show", () => {
+        mainWindow?.show()
+    })
+
+    // Open DevTools in development
+    if (process.env.NODE_ENV === "development") {
+        mainWindow.webContents.openDevTools()
+    }
+
+    mainWindow.on("closed", () => {
+        mainWindow = null
+    })
+
+    // Handle page title updates
+    mainWindow.webContents.on("page-title-updated", (event, title) => {
+        if (title && !title.includes("localhost")) {
+            mainWindow?.setTitle(title)
+        } else {
+            event.preventDefault()
+        }
+    })
+
+    return mainWindow
+}
+
+/**
+ * Get the main window instance
+ */
+export function getMainWindow(): BrowserWindow | null {
+    return mainWindow
+}