fix: use proxy.ts instead of middleware.ts for Next.js 16

fix: restore locale redirection using Next.js middleware
fix(edit_diagram): implement cascade delete for children and edges (#451 )
2026-01-03 06:42:27 +08:00 · 2025-12-30 20:39:15 +09:00 · 2025-12-30 16:42:19 +05:30 · 2025-12-30 00:03:30 +09:00 · 2025-12-29 15:15:13 +09:00 · 2025-12-29 14:30:25 +09:00
91 changed files with 10704 additions and 6210 deletions
--- a/.github/ISSUE_TEMPLATE/enhancement.md
+++ b/.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.
--- a/.github/renovate.json
+++ b/.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
+    }
+}
--- a/.github/workflows/auto-format.yml
+++ b/.github/workflows/auto-format.yml
@@ -12,21 +12,18 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6
        with:
-          ref: ${{ github.head_ref }}
+          ref: ${{ github.event.pull_request.head.sha }}
          token: ${{ secrets.GITHUB_TOKEN }}

      - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
        with:
-          node-version: '20'
-
-      - name: Install Biome
-        run: npm install --save-dev @biomejs/biome
+          node-version: '24'

      - name: Run Biome format
-        run: npx @biomejs/biome check --write --no-errors-on-unmatched .
+        run: npx @biomejs/biome@latest check --write --no-errors-on-unmatched .

      - name: Check for changes
        id: changes
@@ -37,11 +34,21 @@ jobs:
            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'
+        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
+          git push origin HEAD:${{ github.head_ref }}
--- a/.github/workflows/ci.yml
+++ b/.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
--- a/.github/workflows/docker-build.yml
+++ b/.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,11 +63,13 @@ 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@v4
+        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 }}
--- a/.github/workflows/electron-release.yml
+++ b/.github/workflows/electron-release.yml
@@ -29,12 +29,12 @@ jobs:

    steps:
      - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v6

      - name: Setup Node.js
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
        with:
-          node-version: 20
+          node-version: 24
          cache: "npm"

      - name: Install dependencies
--- a/12
+++ b/12
@@ -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
--- a/README.md
+++ b/README.md
@@ -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,17 +27,20 @@ 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)
    - [Desktop Application](#desktop-application)
    - [Run with Docker (Recommended)](#run-with-docker-recommended)
    - [Installation](#installation)
  - [Deployment](#deployment)
+    - [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)
@@ -132,7 +136,7 @@ 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.

@@ -213,7 +217,7 @@ cp env.example .env.local

 Edit `.env.local` and configure your chosen provider:

-   Set `AI_PROVIDER` to your chosen provider (bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow)
+-   Set `AI_PROVIDER` to your chosen provider (doubao,bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow)
 -   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).
@@ -233,18 +237,23 @@ npm run dev

 ## 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 on Vercel (Recommended)

-Check out the [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
-
-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/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
@@ -255,6 +264,7 @@ Be sure to **set the environment variables** in the Vercel dashboard as you did
 -   DeepSeek
 -   SiliconFlow

+
 All providers except AWS Bedrock and OpenRouter support custom endpoints.

 📖 **[Detailed Provider Configuration Guide](./docs/ai-providers.md)** - See setup instructions for each provider.
@@ -295,6 +305,8 @@ 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:
--- a/app/[lang]/about/cn/page.tsx
+++ b/app/[lang]/about/cn/page.tsx
@@ -96,72 +96,68 @@ export default function AboutCN() {
                        </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="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-rose-400 opacity-20" />
+                    <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-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 接口的频率限制
-                                    (TPS/TPM)。一旦超限，系统就会暂停，导致请求失败。
-                                </p>
-                                <p>
-                                    由于使用量过高，我已将模型从 Claude 更换为{" "}
+                                    好消息！感谢{" "}
+                                    <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="font-semibold text-blue-600 hover:underline"
+                                    >
+                                        字节跳动豆包
+                                    </a>
+                                    的慷慨赞助，演示站点现已接入强大的{" "}
                                    <span className="font-semibold text-amber-700">
-                                        minimax-m2
-                                    </span>
-                                    ，以降低成本。
-                                </p>
-                                <p>
-                                    作为一个
+                                        K2-thinking
+                                    </span>{" "}
+                                    模型，图表生成效果更佳！点击链接注册即可领取{" "}
                                    <span className="font-semibold text-amber-700">
-                                        独立开发者
+                                        50万免费Token
                                    </span>
-                                    ，目前的 API
-                                    费用全是我自己在掏腰包（纯属为爱发电）。为了保证服务能细水长流，同时也为了避免我个人陷入财务危机，我还设置了以下临时用量限制：
+                                    ，适用于所有模型！
                                </p>
                            </div>

-                            {/* Limits Cards */}
-                            <div className="grid grid-cols-2 gap-3 mb-5">
-                                <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">
-                                        Token 用量
-                                    </div>
-                                    <div className="text-lg font-bold text-gray-900">
-                                        {formatNumber(tpmLimit)}
-                                        <span className="text-sm font-normal text-gray-600">
-                                            /分钟
-                                        </span>
-                                    </div>
-                                    <div className="text-lg font-bold text-gray-900">
-                                        {formatNumber(dailyTokenLimit)}
-                                        <span className="text-sm font-normal text-gray-600">
-                                            /天
-                                        </span>
-                                    </div>
+                            {/* Usage Limits */}
+                            <p className="text-sm text-gray-600 mb-3">
+                                当前使用限制：
+                            </p>
+                            <div className="grid grid-cols-3 gap-3 mb-5">
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
+                                    <p className="text-lg font-bold text-amber-600">
+                                        {formatNumber(dailyRequestLimit)}
+                                    </p>
+                                    <p className="text-xs text-gray-500">
+                                        请求/天
+                                    </p>
                                </div>
-                                <div className="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">
-                                        每日请求数
-                                    </div>
-                                    <div className="text-2xl font-bold text-gray-900">
-                                        {dailyRequestLimit}
-                                    </div>
-                                    <div className="text-sm text-gray-600">
-                                        次
-                                    </div>
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
+                                    <p className="text-lg font-bold text-amber-600">
+                                        {formatNumber(dailyTokenLimit)}
+                                    </p>
+                                    <p className="text-xs text-gray-500">
+                                        Token/天
+                                    </p>
+                                </div>
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
+                                    <p className="text-lg font-bold text-amber-600">
+                                        {formatNumber(tpmLimit)}
+                                    </p>
+                                    <p className="text-xs text-gray-500">
+                                        Token/分钟
+                                    </p>
                                </div>
                            </div>

@@ -171,48 +167,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
-                                    来绕过这些限制。点击聊天面板中的设置图标即可配置您的
-                                    Provider 和 API Key。
+                                    您也可以使用自己的 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 +344,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 +365,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 +373,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">
-                            支持与联系
-                        </h2>
-                        <iframe
-                            src="https://github.com/sponsors/DayuanJiang/button"
-                            title="Sponsor DayuanJiang"
-                            height="32"
-                            width="114"
-                            style={{ border: 0, borderRadius: 6 }}
-                        />
-                    </div>
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
+                        支持与联系
+                    </h2>
+                    <p className="text-gray-700 mb-4 font-semibold">
+                        特别感谢{" "}
+                        <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>{" "}
+                        为本站提供 API Token 支持！
+                    </p>
                    <p className="text-gray-700">
                        如果您觉得这个项目有用，请考虑{" "}
                        <a
--- a/app/[lang]/about/ja/page.tsx
+++ b/app/[lang]/about/ja/page.tsx
@@ -104,73 +104,68 @@ export default function AboutJA() {
                        </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="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-rose-400 opacity-20" />
+                    <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-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>
+                                    ByteDance Doubao提供
                                </h3>
                            </div>

                            {/* Story */}
                            <div className="space-y-3 text-sm text-gray-700 leading-relaxed mb-5">
                                <p>
-                                    予想以上の反響をいただき、ありがとうございます！皆様にダイアグラム作成を楽しんでいただいているのは嬉しい限りですが、その熱量により
-                                    AI API のレート制限 (TPS/TPM)
-                                    に頻繁に引っかかってしまっています。制限に達するとシステムが一時停止し、エラーが発生してしまいます。
-                                </p>
-                                <p>
-                                    利用量の増加に伴い、コスト削減のためモデルを
-                                    Claude から{" "}
+                                    朗報です！
+                                    <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="font-semibold text-blue-600 hover:underline"
+                                    >
+                                        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 */}
-                            <div className="grid grid-cols-2 gap-3 mb-5">
-                                <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">
-                                        トークン使用量
-                                    </div>
-                                    <div className="text-lg font-bold text-gray-900">
-                                        {formatNumber(tpmLimit)}
-                                        <span className="text-sm font-normal text-gray-600">
-                                            /分
-                                        </span>
-                                    </div>
-                                    <div className="text-lg font-bold text-gray-900">
-                                        {formatNumber(dailyTokenLimit)}
-                                        <span className="text-sm font-normal text-gray-600">
-                                            /日
-                                        </span>
-                                    </div>
+                            {/* Usage Limits */}
+                            <p className="text-sm text-gray-600 mb-3">
+                                現在の使用制限：
+                            </p>
+                            <div className="grid grid-cols-3 gap-3 mb-5">
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
+                                    <p className="text-lg font-bold text-amber-600">
+                                        {formatNumber(dailyRequestLimit)}
+                                    </p>
+                                    <p className="text-xs text-gray-500">
+                                        リクエスト/日
+                                    </p>
                                </div>
-                                <div className="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">
-                                        1日のリクエスト数
-                                    </div>
-                                    <div className="text-2xl font-bold text-gray-900">
-                                        {dailyRequestLimit}
-                                    </div>
-                                    <div className="text-sm text-gray-600">
-                                        回
-                                    </div>
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
+                                    <p className="text-lg font-bold text-amber-600">
+                                        {formatNumber(dailyTokenLimit)}
+                                    </p>
+                                    <p className="text-xs text-gray-500">
+                                        トークン/日
+                                    </p>
+                                </div>
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
+                                    <p className="text-lg font-bold text-amber-600">
+                                        {formatNumber(tpmLimit)}
+                                    </p>
+                                    <p className="text-xs text-gray-500">
+                                        トークン/分
+                                    </p>
                                </div>
                            </div>

@@ -180,44 +175,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 +359,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 +380,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 +388,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">
-                            サポート＆お問い合わせ
-                        </h2>
-                        <iframe
-                            src="https://github.com/sponsors/DayuanJiang/button"
-                            title="Sponsor DayuanJiang"
-                            height="32"
-                            width="114"
-                            style={{ border: 0, borderRadius: 6 }}
-                        />
-                    </div>
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
+                        サポート＆お問い合わせ
+                    </h2>
+                    <p className="text-gray-700 mb-4 font-semibold">
+                        デモサイトのAPIトークン使用を支援してくださった{" "}
+                        <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>{" "}
+                        様に、心より感謝申し上げます。
+                    </p>
                    <p className="text-gray-700">
                        このプロジェクトが役に立ったら、ライブデモサイトのホスティングを支援するために{" "}
                        <a
--- a/app/[lang]/about/page.tsx
+++ b/app/[lang]/about/page.tsx
@@ -104,79 +104,70 @@ export default function About() {
                        </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="absolute inset-0 rounded-2xl bg-gradient-to-br from-amber-400 via-orange-400 to-rose-400 opacity-20" />
+                    <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-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{" "}
-                                    <span className="text-sm text-amber-600 font-medium italic font-normal">
-                                        (Or: Why My Wallet is Crying)
-                                    </span>
+                                    Sponsored by ByteDance Doubao
                                </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
-                                    incredible—you all love making diagrams!
-                                    However, this enthusiasm means we are
-                                    frequently hitting the AI API rate limits
-                                    (TPS/TPM). When this happens, the system
-                                    pauses, leading to failed requests.
-                                </p>
-                                <p>
-                                    Due to the high usage, I have changed the
-                                    model from Claude to{" "}
+                                    Great news! Thanks to the generous
+                                    sponsorship from{" "}
+                                    <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="font-semibold text-blue-600 hover:underline"
+                                    >
+                                        ByteDance Doubao
+                                    </a>
+                                    , the demo site now uses the powerful{" "}
                                    <span className="font-semibold text-amber-700">
-                                        minimax-m2
-                                    </span>
-                                    , which is more cost-effective.
-                                </p>
-                                <p>
-                                    As an{" "}
+                                        K2-thinking
+                                    </span>{" "}
+                                    model for better diagram generation! Sign up
+                                    via the link to get{" "}
                                    <span className="font-semibold text-amber-700">
-                                        indie developer
-                                    </span>
-                                    , I am currently footing the entire API
-                                    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:
+                                        500K free tokens
+                                    </span>{" "}
+                                    for all models!
                                </p>
                            </div>

-                            {/* Limits Cards */}
-                            <div className="grid grid-cols-2 gap-3 mb-5">
-                                <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">
-                                        Token Usage
-                                    </div>
-                                    <div className="text-lg font-bold text-gray-900">
-                                        {formatNumber(tpmLimit)}
-                                        <span className="text-sm font-normal text-gray-600">
-                                            /min
-                                        </span>
-                                    </div>
-                                    <div className="text-lg font-bold text-gray-900">
-                                        {formatNumber(dailyTokenLimit)}
-                                        <span className="text-sm font-normal text-gray-600">
-                                            /day
-                                        </span>
-                                    </div>
+                            {/* Usage Limits */}
+                            <p className="text-sm text-gray-600 mb-3">
+                                Please note the current usage limits:
+                            </p>
+                            <div className="grid grid-cols-3 gap-3 mb-5">
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
+                                    <p className="text-lg font-bold text-amber-600">
+                                        {formatNumber(dailyRequestLimit)}
+                                    </p>
+                                    <p className="text-xs text-gray-500">
+                                        requests/day
+                                    </p>
                                </div>
-                                <div className="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">
-                                        Daily Requests
-                                    </div>
-                                    <div className="text-2xl font-bold text-gray-900">
-                                        {dailyRequestLimit}
-                                    </div>
-                                    <div className="text-sm text-gray-600">
-                                        requests
-                                    </div>
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
+                                    <p className="text-lg font-bold text-amber-600">
+                                        {formatNumber(dailyTokenLimit)}
+                                    </p>
+                                    <p className="text-xs text-gray-500">
+                                        tokens/day
+                                    </p>
+                                </div>
+                                <div className="text-center p-3 bg-white/60 rounded-lg">
+                                    <p className="text-lg font-bold text-amber-600">
+                                        {formatNumber(tpmLimit)}
+                                    </p>
+                                    <p className="text-xs text-gray-500">
+                                        tokens/min
+                                    </p>
                                </div>
                            </div>

@@ -186,51 +177,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
-                                    limits. Click the Settings icon in the chat
-                                    panel to configure your provider and API
-                                    key.
+                                    You can also use your own API key with any
+                                    supported provider. Click the Settings icon
+                                    in the chat panel to configure your provider
+                                    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 +378,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 +399,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 +409,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">
-                            Support &amp; Contact
-                        </h2>
-                        <iframe
-                            src="https://github.com/sponsors/DayuanJiang/button"
-                            title="Sponsor DayuanJiang"
-                            height="32"
-                            width="114"
-                            style={{ border: 0, borderRadius: 6 }}
-                        />
-                    </div>
+                    <h2 className="text-2xl font-semibold text-gray-900 mt-10 mb-4">
+                        Support &amp; Contact
+                    </h2>
+                    <p className="text-gray-700 mb-4 font-semibold">
+                        Special thanks to{" "}
+                        <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>{" "}
+                        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
--- a/app/[lang]/page.tsx
+++ b/app/[lang]/page.tsx
@@ -1,4 +1,5 @@
 "use client"
+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"
@@ -10,6 +11,7 @@ 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"
@@ -24,6 +26,8 @@ export default function Home() {
        showSaveDialog,
        setShowSaveDialog,
    } = useDiagram()
+    const router = useRouter()
+    const pathname = usePathname()
    const [isMobile, setIsMobile] = useState(false)
    const [isChatVisible, setIsChatVisible] = useState(true)
    const [drawioUi, setDrawioUi] = useState<"min" | "sketch">("min")
@@ -58,6 +62,18 @@ export default function Home() {

    // 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)
@@ -84,7 +100,7 @@ export default function Home() {
        }

        setIsLoaded(true)
-    }, [])
+    }, [pathname, router])

    const handleDarkModeChange = async () => {
        await saveDiagramToStorage()
--- a/app/api/chat/route.ts
+++ b/app/api/chat/route.ts
@@ -14,6 +14,11 @@ import path from "path"
 import { z } from "zod"
 import { getAIModel, supportsPromptCaching } from "@/lib/ai-providers"
 import { findCachedResponse } from "@/lib/cached-responses"
+import {
+    checkAndIncrementRequest,
+    isQuotaEnabled,
+    recordTokenUsage,
+} from "@/lib/dynamo-quota-manager"
 import {
    getTelemetryConfig,
    setTraceInput,
@@ -21,6 +26,7 @@ import {
    wrapWithObserve,
 } from "@/lib/langfuse"
 import { getSystemPrompt } from "@/lib/system-prompts"
+import { getUserIdFromRequest } from "@/lib/user-id"

 export const maxDuration = 120

@@ -162,9 +168,8 @@ async function handleChatRequest(req: Request): Promise<Response> {

    const { messages, xml, previousXml, sessionId } = await req.json()

-    // Get user IP for Langfuse tracking
-    const forwardedFor = req.headers.get("x-forwarded-for")
-    const userId = forwardedFor?.split(",")[0]?.trim() || "anonymous"
+    // Get user ID for Langfuse tracking and quota
+    const userId = getUserIdFromRequest(req)

    // Validate sessionId for Langfuse (must be string, max 200 chars)
    const validSessionId =
@@ -173,9 +178,12 @@ async function handleChatRequest(req: Request): Promise<Response> {
            : undefined

    // Extract user input text for Langfuse trace
-    const lastMessage = 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 =
-        lastMessage?.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({
@@ -184,6 +192,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) {
@@ -237,9 +272,10 @@ 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, minimalStyle)

-    // Extract file parts (images) from the last message
+    // Extract file parts (images) from the last user message
    const fileParts =
-        lastMessage.parts?.filter((part: any) => part.type === "file") || []
+        lastUserMessage?.parts?.filter((part: any) => part.type === "file") ||
+        []

    // User input only - XML is now in a separate cached system message
    const formattedUserInput = `User input:
@@ -248,7 +284,7 @@ ${userInputText}
 """`

    // Convert UIMessages to ModelMessages and add system message
-    const modelMessages = convertToModelMessages(messages)
+    const modelMessages = await convertToModelMessages(messages)

    // DEBUG: Log incoming messages structure
    console.log("[route.ts] Incoming messages count:", messages.length)
@@ -502,12 +538,26 @@ ${userInputText}
                userId,
            }),
        }),
-        onFinish: ({ text, usage }) => {
-            // Pass usage to Langfuse (Bedrock streaming doesn't auto-report tokens to telemetry)
-            setTraceOutput(text, {
-                promptTokens: usage?.inputTokens,
-                completionTokens: usage?.outputTokens,
-            })
+        onFinish: ({ text, totalUsage }) => {
+            // AI SDK 6 telemetry auto-reports token usage on its spans
+            setTraceOutput(text)
+
+            // Record token usage for server-side quota tracking (if enabled)
+            // Use totalUsage (cumulative across all steps) instead of usage (final step only)
+            // Include all 4 token types: input, output, cache read, cache write
+            if (
+                isQuotaEnabled() &&
+                !hasOwnApiKey &&
+                userId !== "anonymous" &&
+                totalUsage
+            ) {
+                const totalTokens =
+                    (totalUsage.inputTokens || 0) +
+                    (totalUsage.outputTokens || 0) +
+                    (totalUsage.cachedInputTokens || 0) +
+                    (totalUsage.inputTokenDetails?.cacheWriteTokens || 0)
+                recordTokenUsage(userId, totalTokens)
+            }
        },
        tools: {
            // Client-side tool that will be executed on the client
@@ -555,18 +605,26 @@ Notes:
 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 by its id. Only cell_id is needed.
+- 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\\"`,
+⚠️ 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({
                    operations: z
                        .array(
                            z.object({
-                                type: z
+                                operation: z
                                    .enum(["update", "add", "delete"])
-                                    .describe("Operation type"),
+                                    .describe(
+                                        "Operation to perform: add, update, or delete",
+                                    ),
                                cell_id: z
                                    .string()
                                    .describe(
@@ -677,19 +735,9 @@ Call this tool to get shape names and usage syntax for a specific library.`,
        messageMetadata: ({ part }) => {
            if (part.type === "finish") {
                const usage = (part as any).totalUsage
-                if (!usage) {
-                    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)
+                // AI SDK 6 provides totalTokens directly
                return {
-                    inputTokens: totalInputTokens,
-                    outputTokens: usage.outputTokens ?? 0,
+                    totalTokens: usage?.totalTokens ?? 0,
                    finishReason: (part as any).finishReason,
                }
            }
--- a/app/api/log-feedback/route.ts
+++ b/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
-    const forwardedFor = req.headers.get("x-forwarded-for")
-    const userId = forwardedFor?.split(",")[0]?.trim() || "anonymous"
+    // Skip logging if no sessionId - prevents attaching to wrong user's trace
+    if (!sessionId) {
+        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
--- a/app/api/log-save/route.ts
+++ b/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()

--- a/app/api/validate-model/route.ts
+++ b/app/api/validate-model/route.ts
@@ -11,6 +11,66 @@ 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
@@ -42,6 +102,14 @@ export async function POST(req: Request) {
            )
        }

+        // 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) {
@@ -157,6 +225,27 @@ export async function POST(req: Request) {
                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}` },
--- a/app/globals.css
+++ b/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;
+    }
+}
--- a/app/manifest.ts
+++ b/app/manifest.ts
@@ -1,24 +1,24 @@
 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: "/",
+        start_url: getAssetUrl("/"),
        display: "standalone",
        background_color: "#f9fafb",
        theme_color: "#171d26",
        icons: [
            {
-                src: "/favicon-192x192.png",
+                src: getAssetUrl("/favicon-192x192.png"),
                sizes: "192x192",
                type: "image/png",
                purpose: "any",
            },
            {
-                src: "/favicon-512x512.png",
+                src: getAssetUrl("/favicon-512x512.png"),
                sizes: "512x512",
                type: "image/png",
                purpose: "any",
--- a/components/ai-elements/model-selector.tsx
+++ b/components/ai-elements/model-selector.tsx
@@ -66,8 +66,22 @@ export const ModelSelectorInput = ({

 export type ModelSelectorListProps = ComponentProps<typeof CommandList>

-export const ModelSelectorList = (props: ModelSelectorListProps) => (
-    <CommandList {...props} />
+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>
--- a/components/chat-example-panel.tsx
+++ b/components/chat-example-panel.tsx
@@ -9,6 +9,7 @@ import {
    Zap,
 } from "lucide-react"
 import { useDictionary } from "@/hooks/use-dictionary"
+import { getAssetUrl } from "@/lib/base-path"

 interface ExampleCardProps {
    icon: React.ReactNode
@@ -79,7 +80,7 @@ export default function ExamplePanel({
        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])
@@ -92,7 +93,7 @@ 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",
@@ -107,7 +108,7 @@ 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",
--- a/components/chat-input.tsx
+++ b/components/chat-input.tsx
@@ -17,14 +17,9 @@ 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 { Switch } from "@/components/ui/switch"
 import { Textarea } from "@/components/ui/textarea"
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipTrigger,
-} from "@/components/ui/tooltip"
 import { useDiagram } from "@/contexts/diagram-context"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { formatMessage } from "@/lib/i18n/utils"
@@ -152,16 +147,14 @@ interface ChatInputProps {
        File,
        { text: string; charCount: number; isExtracting: boolean }
    >
-    showHistory?: boolean
-    onToggleHistory?: (show: boolean) => void
+
    sessionId?: string
    error?: Error | null
-    minimalStyle?: boolean
-    onMinimalStyleChange?: (value: boolean) => void
    // Model selector props
    models?: FlattenedModel[]
    selectedModelId?: string
    onModelSelect?: (modelId: string | undefined) => void
+    showUnvalidatedModels?: boolean
    onConfigureModels?: () => void
 }

@@ -174,28 +167,23 @@ export function ChatInput({
    files = [],
    onFileChange = () => {},
    pdfData = new Map(),
-    showHistory = false,
-    onToggleHistory = () => {},
    sessionId,
    error = null,
-    minimalStyle = false,
-    onMinimalStyleChange = () => {},
    models = [],
    selectedModelId,
    onModelSelect = () => {},
+    showUnvalidatedModels = false,
    onConfigureModels = () => {},
 }: ChatInputProps) {
    const dict = useDictionary()
-    const {
-        diagramHistory,
-        saveDiagramToFile,
-        showSaveDialog,
-        setShowSaveDialog,
-    } = useDiagram()
+    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
@@ -383,109 +371,67 @@ export function ChatInput({
                            onOpenChange={setShowClearDialog}
                            onClear={handleClear}
                        />
-
-                        <HistoryDialog
-                            showHistory={showHistory}
-                            onToggleHistory={onToggleHistory}
-                        />
-
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <div className="flex items-center gap-1.5">
-                                    <Switch
-                                        id="minimal-style"
-                                        checked={minimalStyle}
-                                        onCheckedChange={onMinimalStyleChange}
-                                        className="scale-75"
-                                    />
-                                    <label
-                                        htmlFor="minimal-style"
-                                        className={`text-xs cursor-pointer select-none ${
-                                            minimalStyle
-                                                ? "text-primary font-medium"
-                                                : "text-muted-foreground"
-                                        }`}
-                                    >
-                                        {minimalStyle
-                                            ? dict.chat.minimalStyle
-                                            : dict.chat.styledMode}
-                                    </label>
-                                </div>
-                            </TooltipTrigger>
-                            <TooltipContent side="top">
-                                {dict.chat.minimalTooltip}
-                            </TooltipContent>
-                        </Tooltip>
                    </div>

                    <div className="flex items-center gap-1 overflow-hidden justify-end">
-                        <ButtonWithTooltip
-                            type="button"
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => onToggleHistory(true)}
-                            disabled={isDisabled || diagramHistory.length === 0}
-                            tooltipContent={dict.chat.diagramHistory}
-                            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                        >
-                            <History className="h-4 w-4" />
-                        </ButtonWithTooltip>
+                        <div className="flex items-center gap-1 overflow-x-hidden">
+                            <ButtonWithTooltip
+                                type="button"
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => setShowHistory(true)}
+                                disabled={
+                                    isDisabled || diagramHistory.length === 0
+                                }
+                                tooltipContent={dict.chat.diagramHistory}
+                                className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
+                            >
+                                <History className="h-4 w-4" />
+                            </ButtonWithTooltip>

-                        <ButtonWithTooltip
-                            type="button"
-                            variant="ghost"
-                            size="sm"
-                            onClick={() => setShowSaveDialog(true)}
-                            disabled={isDisabled}
-                            tooltipContent={dict.chat.saveDiagram}
-                            className="h-8 w-8 p-0 text-muted-foreground hover:text-foreground"
-                        >
-                            <Download className="h-4 w-4" />
-                        </ButtonWithTooltip>
+                            <ButtonWithTooltip
+                                type="button"
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => 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>

-                        <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={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}
-                        />
+                            <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}
+                            showUnvalidatedModels={showUnvalidatedModels}
                        />
-
                        <div className="w-px h-5 bg-border mx-1" />
-
                        <Button
                            type="submit"
                            disabled={isDisabled || !input.trim()}
@@ -507,6 +453,20 @@ export function ChatInput({
                    </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>
    )
 }
--- a/components/chat-message-display.tsx
+++ b/components/chat-message-display.tsx
@@ -27,9 +27,11 @@ import {
    ReasoningTrigger,
 } from "@/components/ai-elements/reasoning"
 import { ScrollArea } from "@/components/ui/scroll-area"
+import { getApiEndpoint } from "@/lib/base-path"
 import {
    applyDiagramOperations,
    convertToLegalXml,
+    extractCompleteMxCells,
    isMxCellXmlComplete,
    replaceNodes,
    validateAndFixXml,
@@ -38,7 +40,7 @@ import ExamplePanel from "./chat-example-panel"
 import { CodeBlock } from "./code-block"

 interface DiagramOperation {
-    type: "update" | "add" | "delete"
+    operation: "update" | "add" | "delete"
    cell_id: string
    new_xml?: string
 }
@@ -51,12 +53,12 @@ function getCompleteOperations(
    return operations.filter(
        (op) =>
            op &&
-            typeof op.type === "string" &&
-            ["update", "add", "delete"].includes(op.type) &&
+            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.type === "delete" || typeof op.new_xml === "string"),
+            (op.operation === "delete" || typeof op.new_xml === "string"),
    )
 }

@@ -77,20 +79,20 @@ function OperationsDisplay({ operations }: { operations: DiagramOperation[] }) {
        <div className="space-y-3">
            {operations.map((op, index) => (
                <div
-                    key={`${op.type}-${op.cell_id}-${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-[10px] font-medium uppercase tracking-wide ${
-                                op.type === "delete"
+                                op.operation === "delete"
                                    ? "text-red-600"
-                                    : op.type === "add"
+                                    : op.operation === "add"
                                      ? "text-green-600"
                                      : "text-blue-600"
                            }`}
                        >
-                            {op.type}
+                            {op.operation}
                        </span>
                        <span className="text-xs text-muted-foreground">
                            cell_id: {op.cell_id}
@@ -291,7 +293,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({
@@ -314,12 +316,28 @@ export function ChatMessageDisplay({

    const handleDisplayChart = useCallback(
        (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) {
                // Parse and validate XML BEFORE calling replaceNodes
                const parser = new DOMParser()
-                const testDoc = parser.parseFromString(convertedXml, "text/xml")
+                // Wrap in root element for parsing multiple mxCell elements
+                const testDoc = parser.parseFromString(
+                    `<root>${convertedXml}</root>`,
+                    "text/xml",
+                )
                const parseError = testDoc.querySelector("parsererror")

                if (parseError) {
@@ -346,7 +364,22 @@ export function ChatMessageDisplay({
                        `<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)

-                    // Validate and auto-fix the XML
+                    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
@@ -359,18 +392,19 @@ export function ChatMessageDisplay({
                            )
                        }
                        // 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,
                        )
-                        // Only show toast if this is the final XML (not during streaming)
-                        if (showToast) {
-                            toast.error(
-                                "Diagram validation failed. Please try regenerating.",
-                            )
-                        }
+                        toast.error(
+                            "Diagram validation failed. Please try regenerating.",
+                        )
                    }
                } catch (error) {
                    console.error(
@@ -602,17 +636,10 @@ export function ChatMessageDisplay({
            }
        })

-        // Cleanup: clear any pending debounce timeout on unmount
-        return () => {
-            if (debounceTimeoutRef.current) {
-                clearTimeout(debounceTimeoutRef.current)
-                debounceTimeoutRef.current = null
-            }
-            if (editDebounceTimeoutRef.current) {
-                clearTimeout(editDebounceTimeoutRef.current)
-                editDebounceTimeoutRef.current = null
-            }
-        }
+        // 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) => {
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -14,7 +14,6 @@ import Link from "next/link"
 import type React from "react"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { flushSync } from "react-dom"
-import { FaGithub } from "react-icons/fa"
 import { Toaster, toast } from "sonner"
 import { ButtonWithTooltip } from "@/components/button-with-tooltip"
 import { ChatInput } from "@/components/chat-input"
@@ -22,15 +21,17 @@ import { ModelConfigDialog } from "@/components/model-config-dialog"
 import { ResetWarningModal } from "@/components/reset-warning-modal"
 import { SettingsDialog } from "@/components/settings-dialog"
 import { useDiagram } from "@/contexts/diagram-context"
+import { useDiagramToolHandlers } from "@/hooks/use-diagram-tool-handlers"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { getSelectedAIConfig, useModelConfig } from "@/hooks/use-model-config"
+import { getApiEndpoint } from "@/lib/base-path"
 import { findCachedResponse } from "@/lib/cached-responses"
 import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
 import { type FileData, useFileProcessor } from "@/lib/use-file-processor"
 import { useQuotaManager } from "@/lib/use-quota-manager"
-import { formatXML, isMxCellXmlComplete, wrapWithMxFile } from "@/lib/utils"
+import { formatXML } from "@/lib/utils"
 import { ChatMessageDisplay } from "./chat-message-display"
-import LanguageToggle from "./language-toggle"
+import { DevXmlSimulator } from "./dev-xml-simulator"

 // localStorage keys for persistence
 const STORAGE_MESSAGES_KEY = "next-ai-draw-io-messages"
@@ -72,6 +73,8 @@ const TOOL_ERROR_STATE = "output-error" as const
 const DEBUG = process.env.NODE_ENV === "development"
 const MAX_AUTO_RETRY_COUNT = 1

+const MAX_CONTINUATION_RETRY_COUNT = 2 // Limit for truncation continuation retries
+
 /**
 * Check if auto-resubmit should happen based on tool errors.
 * Only checks the LAST tool part (most recent tool call), not all tool parts.
@@ -145,7 +148,6 @@ export default function ChatPanel({
    // File processing using extracted hook
    const { files, pdfData, handleFileChange, setFiles } = useFileProcessor()

-    const [showHistory, setShowHistory] = useState(false)
    const [showSettingsDialog, setShowSettingsDialog] = useState(false)
    const [showModelConfigDialog, setShowModelConfigDialog] = useState(false)

@@ -168,7 +170,7 @@ export default function ChatPanel({

    // Check config on mount
    useEffect(() => {
-        fetch("/api/config")
+        fetch(getApiEndpoint("/api/config"))
            .then((res) => res.json())
            .then((data) => {
                setDailyRequestLimit(data.dailyRequestLimit || 0)
@@ -183,6 +185,7 @@ export default function ChatPanel({
        dailyRequestLimit,
        dailyTokenLimit,
        tpmLimit,
+        onConfigModel: () => setShowModelConfigDialog(true),
    })

    // Generate a unique session ID for Langfuse tracing (restore from localStorage if available)
@@ -206,11 +209,10 @@ export default function ChatPanel({
        chartXMLRef.current = chartXML
    }, [chartXML])

-    // Ref to hold stop function for use in onToolCall (avoids stale closure)
-    const stopRef = useRef<(() => void) | null>(null)
-
    // Ref to track consecutive auto-retry count (reset on user action)
    const autoRetryCountRef = useRef(0)
+    // Ref to track continuation retry count (for truncation handling)
+    const continuationRetryCountRef = useRef(0)

    // Ref to accumulate partial XML when output is truncated due to maxOutputTokens
    // When partialXmlRef.current.length > 0, we're in continuation mode
@@ -229,474 +231,188 @@ export default function ChatPanel({
    > | null>(null)
    const LOCAL_STORAGE_DEBOUNCE_MS = 1000 // Save at most once per second

-    const {
-        messages,
-        sendMessage,
-        addToolOutput,
-        stop,
-        status,
-        error,
-        setMessages,
-    } = useChat({
-        transport: new DefaultChatTransport({
-            api: "/api/chat",
-        }),
-        async onToolCall({ toolCall }) {
-            if (DEBUG) {
-                console.log(
-                    `[onToolCall] Tool: ${toolCall.toolName}, CallId: ${toolCall.toolCallId}`,
-                )
-            }
+    // Diagram tool handlers (display_diagram, edit_diagram, append_diagram)
+    const { handleToolCall } = useDiagramToolHandlers({
+        partialXmlRef,
+        editDiagramOriginalXmlRef,
+        chartXMLRef,
+        onDisplayChart,
+        onFetchChart,
+        onExport,
+    })

-            if (toolCall.toolName === "display_diagram") {
-                const { xml } = toolCall.input as { xml: string }
-
-                // DEBUG: Log raw input to diagnose false truncation detection
-                console.log(
-                    "[display_diagram] XML ending (last 100 chars):",
-                    xml.slice(-100),
-                )
-                console.log("[display_diagram] XML length:", xml.length)
-
-                // Check if XML is truncated (incomplete mxCell indicates truncated output)
-                const isTruncated = !isMxCellXmlComplete(xml)
-                console.log("[display_diagram] isTruncated:", isTruncated)
-
-                if (isTruncated) {
-                    // Store the partial XML for continuation via append_diagram
-                    partialXmlRef.current = xml
-
-                    // Tell LLM to use append_diagram to continue
-                    const partialEnding = partialXmlRef.current.slice(-500)
-                    addToolOutput({
-                        tool: "display_diagram",
-                        toolCallId: toolCall.toolCallId,
-                        state: "output-error",
-                        errorText: `Output was truncated due to length limits. Use the append_diagram tool to continue.
-
-Your output ended with:
-\`\`\`
-${partialEnding}
-\`\`\`
-
-NEXT STEP: Call append_diagram with the continuation XML.
- Do NOT include wrapper tags or root cells (id="0", id="1")
- Start from EXACTLY where you stopped
- Complete all remaining mxCell elements`,
-                    })
-                    return
-                }
-
-                // Complete XML received - use it directly
-                // (continuation is now handled via append_diagram tool)
-                const finalXml = xml
-                partialXmlRef.current = "" // Reset any partial from previous truncation
-
-                // Wrap raw XML with full mxfile structure for draw.io
-                const fullXml = wrapWithMxFile(finalXml)
-
-                // loadDiagram validates and returns error if invalid
-                const validationError = onDisplayChart(fullXml)
-
-                if (validationError) {
-                    console.warn(
-                        "[display_diagram] Validation error:",
-                        validationError,
-                    )
-                    // Return error to model - sendAutomaticallyWhen will trigger retry
-                    if (DEBUG) {
-                        console.log(
-                            "[display_diagram] Adding tool output with state: output-error",
-                        )
-                    }
-                    addToolOutput({
-                        tool: "display_diagram",
-                        toolCallId: toolCall.toolCallId,
-                        state: "output-error",
-                        errorText: `${validationError}
-
-Please fix the XML issues and call display_diagram again with corrected XML.
-
-Your failed XML:
-\`\`\`xml
-${finalXml}
-\`\`\``,
-                    })
-                } else {
-                    // Success - diagram will be rendered by chat-message-display
-                    if (DEBUG) {
-                        console.log(
-                            "[display_diagram] Success! Adding tool output with state: output-available",
-                        )
-                    }
-                    addToolOutput({
-                        tool: "display_diagram",
-                        toolCallId: toolCall.toolCallId,
-                        output: "Successfully displayed the diagram.",
-                    })
-                    if (DEBUG) {
-                        console.log(
-                            "[display_diagram] Tool output added. Diagram should be visible now.",
-                        )
-                    }
-                }
-            } else if (toolCall.toolName === "edit_diagram") {
-                const { operations } = toolCall.input as {
-                    operations: Array<{
-                        type: "update" | "add" | "delete"
-                        cell_id: string
-                        new_xml?: string
-                    }>
-                }
-
-                let currentXml = ""
+    const { messages, sendMessage, addToolOutput, status, error, setMessages } =
+        useChat({
+            transport: new DefaultChatTransport({
+                api: getApiEndpoint("/api/chat"),
+            }),
+            onToolCall: async ({ toolCall }) => {
+                await handleToolCall({ toolCall }, addToolOutput)
+            },
+            onError: (error) => {
+                // Handle server-side quota limit (429 response)
+                // AI SDK puts the full response body in error.message for non-OK responses
                try {
-                    // Use the original XML captured during streaming (shared with chat-message-display)
-                    // This ensures we apply operations to the same base XML that streaming used
-                    const originalXml = editDiagramOriginalXmlRef.current.get(
-                        toolCall.toolCallId,
-                    )
-                    if (originalXml) {
-                        currentXml = originalXml
-                    } else {
-                        // Fallback: use chartXML from ref if streaming didn't capture original
-                        const cachedXML = chartXMLRef.current
-                        if (cachedXML) {
-                            currentXml = cachedXML
-                        } else {
-                            // Last resort: export from iframe
-                            currentXml = await onFetchChart(false)
-                        }
-                    }
-
-                    const { applyDiagramOperations } = await import(
-                        "@/lib/utils"
-                    )
-                    const { result: editedXml, errors } =
-                        applyDiagramOperations(currentXml, operations)
-
-                    // Check for operation errors
-                    if (errors.length > 0) {
-                        const errorMessages = errors
-                            .map(
-                                (e) =>
-                                    `- ${e.type} on cell_id="${e.cellId}": ${e.message}`,
-                            )
-                            .join("\n")
-
-                        addToolOutput({
-                            tool: "edit_diagram",
-                            toolCallId: toolCall.toolCallId,
-                            state: "output-error",
-                            errorText: `Some operations failed:\n${errorMessages}
-
-Current diagram XML:
-\`\`\`xml
-${currentXml}
-\`\`\`
-
-Please check the cell IDs and retry.`,
-                        })
-                        // Clean up the shared original XML ref
-                        editDiagramOriginalXmlRef.current.delete(
-                            toolCall.toolCallId,
-                        )
+                    const data = JSON.parse(error.message)
+                    if (data.type === "request") {
+                        quotaManager.showQuotaLimitToast(data.used, data.limit)
                        return
                    }
-
-                    // loadDiagram validates and returns error if invalid
-                    const validationError = onDisplayChart(editedXml)
-                    if (validationError) {
-                        console.warn(
-                            "[edit_diagram] Validation error:",
-                            validationError,
-                        )
-                        addToolOutput({
-                            tool: "edit_diagram",
-                            toolCallId: toolCall.toolCallId,
-                            state: "output-error",
-                            errorText: `Edit produced invalid XML: ${validationError}
-
-Current diagram XML:
-\`\`\`xml
-${currentXml}
-\`\`\`
-
-Please fix the operations to avoid structural issues.`,
-                        })
-                        // Clean up the shared original XML ref
-                        editDiagramOriginalXmlRef.current.delete(
-                            toolCall.toolCallId,
-                        )
+                    if (data.type === "token") {
+                        quotaManager.showTokenLimitToast(data.used, data.limit)
                        return
                    }
-                    onExport()
-                    addToolOutput({
-                        tool: "edit_diagram",
-                        toolCallId: toolCall.toolCallId,
-                        output: `Successfully applied ${operations.length} operation(s) to the diagram.`,
-                    })
-                    // Clean up the shared original XML ref
-                    editDiagramOriginalXmlRef.current.delete(
-                        toolCall.toolCallId,
-                    )
-                } catch (error) {
-                    console.error("[edit_diagram] Failed:", error)
-
-                    const errorMessage =
-                        error instanceof Error ? error.message : String(error)
-
-                    addToolOutput({
-                        tool: "edit_diagram",
-                        toolCallId: toolCall.toolCallId,
-                        state: "output-error",
-                        errorText: `Edit failed: ${errorMessage}
-
-Current diagram XML:
-\`\`\`xml
-${currentXml || "No XML available"}
-\`\`\`
-
-Please check cell IDs and retry, or use display_diagram to regenerate.`,
-                    })
-                    // Clean up the shared original XML ref even on error
-                    editDiagramOriginalXmlRef.current.delete(
-                        toolCall.toolCallId,
-                    )
+                    if (data.type === "tpm") {
+                        quotaManager.showTPMLimitToast(data.limit)
+                        return
+                    }
+                } catch {
+                    // Not JSON, fall through to string matching for backwards compatibility
                }
-            } else if (toolCall.toolName === "append_diagram") {
-                const { xml } = toolCall.input as { xml: string }

-                // Detect if LLM incorrectly started fresh instead of continuing
-                // LLM should only output bare mxCells now, so wrapper tags indicate error
-                const trimmed = xml.trim()
-                const isFreshStart =
-                    trimmed.startsWith("<mxGraphModel") ||
-                    trimmed.startsWith("<root") ||
-                    trimmed.startsWith("<mxfile") ||
-                    trimmed.startsWith('<mxCell id="0"') ||
-                    trimmed.startsWith('<mxCell id="1"')
-
-                if (isFreshStart) {
-                    addToolOutput({
-                        tool: "append_diagram",
-                        toolCallId: toolCall.toolCallId,
-                        state: "output-error",
-                        errorText: `ERROR: You started fresh with wrapper tags. Do NOT include wrapper tags or root cells (id="0", id="1").
-
-Continue from EXACTLY where the partial ended:
-\`\`\`
-${partialXmlRef.current.slice(-500)}
-\`\`\`
-
-Start your continuation with the NEXT character after where it stopped.`,
-                    })
+                // Fallback to string matching
+                if (error.message.includes("Daily request limit")) {
+                    quotaManager.showQuotaLimitToast()
+                    return
+                }
+                if (error.message.includes("Daily token limit")) {
+                    quotaManager.showTokenLimitToast()
+                    return
+                }
+                if (
+                    error.message.includes("Rate limit exceeded") ||
+                    error.message.includes("tokens per minute")
+                ) {
+                    quotaManager.showTPMLimitToast()
                    return
                }

-                // Append to accumulated XML
-                partialXmlRef.current += xml
-
-                // Check if XML is now complete (last mxCell is complete)
-                const isComplete = isMxCellXmlComplete(partialXmlRef.current)
-
-                if (isComplete) {
-                    // Wrap and display the complete diagram
-                    const finalXml = partialXmlRef.current
-                    partialXmlRef.current = "" // Reset
-
-                    const fullXml = wrapWithMxFile(finalXml)
-                    const validationError = onDisplayChart(fullXml)
-
-                    if (validationError) {
-                        addToolOutput({
-                            tool: "append_diagram",
-                            toolCallId: toolCall.toolCallId,
-                            state: "output-error",
-                            errorText: `Validation error after assembly: ${validationError}
-
-Assembled XML:
-\`\`\`xml
-${finalXml.substring(0, 2000)}...
-\`\`\`
-
-Please use display_diagram with corrected XML.`,
+                // Silence access code error in console since it's handled by UI
+                if (!error.message.includes("Invalid or missing access code")) {
+                    console.error("Chat error:", error)
+                    // Debug: Log messages structure when error occurs
+                    console.log("[onError] messages count:", messages.length)
+                    messages.forEach((msg, idx) => {
+                        console.log(`[onError] Message ${idx}:`, {
+                            role: msg.role,
+                            partsCount: msg.parts?.length,
                        })
-                    } else {
-                        addToolOutput({
-                            tool: "append_diagram",
-                            toolCallId: toolCall.toolCallId,
-                            output: "Diagram assembly complete and displayed successfully.",
-                        })
-                    }
-                } else {
-                    // Still incomplete - signal to continue
-                    addToolOutput({
-                        tool: "append_diagram",
-                        toolCallId: toolCall.toolCallId,
-                        state: "output-error",
-                        errorText: `XML still incomplete (mxCell not closed). Call append_diagram again to continue.
-
-Current ending:
-\`\`\`
-${partialXmlRef.current.slice(-500)}
-\`\`\`
-
-Continue from EXACTLY where you stopped.`,
+                        if (msg.parts) {
+                            msg.parts.forEach((part: any, partIdx: number) => {
+                                console.log(
+                                    `[onError]   Part ${partIdx}:`,
+                                    JSON.stringify({
+                                        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,
+                                    }),
+                                )
+                            })
+                        }
                    })
                }
-            }
-        },
-        onError: (error) => {
-            // Silence access code error in console since it's handled by UI
-            if (!error.message.includes("Invalid or missing access code")) {
-                console.error("Chat error:", error)
-                // Debug: Log messages structure when error occurs
-                console.log("[onError] messages count:", messages.length)
-                messages.forEach((msg, idx) => {
-                    console.log(`[onError] Message ${idx}:`, {
-                        role: msg.role,
-                        partsCount: msg.parts?.length,
-                    })
-                    if (msg.parts) {
-                        msg.parts.forEach((part: any, partIdx: number) => {
-                            console.log(
-                                `[onError]   Part ${partIdx}:`,
-                                JSON.stringify({
-                                    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,
-                                }),
-                            )
-                        })
+
+                // Translate technical errors into user-friendly messages
+                // The server now handles detailed error messages, so we can display them directly.
+                // But we still handle connection/network errors that happen before reaching the server.
+                let friendlyMessage = error.message
+
+                // Simple check for network errors if message is generic
+                if (friendlyMessage === "Failed to fetch") {
+                    friendlyMessage =
+                        "Network error. Please check your connection."
+                }
+
+                // Truncated tool input error (model output limit too low)
+                if (friendlyMessage.includes("toolUse.input is invalid")) {
+                    friendlyMessage =
+                        "Output was truncated before the diagram could be generated. Try a simpler request or increase the maxOutputLength."
+                }
+
+                // Translate image not supported error
+                if (friendlyMessage.includes("image content block")) {
+                    friendlyMessage = "This model doesn't support image input."
+                }
+
+                // Add system message for error so it can be cleared
+                setMessages((currentMessages) => {
+                    const errorMessage = {
+                        id: `error-${Date.now()}`,
+                        role: "system" as const,
+                        content: friendlyMessage,
+                        parts: [
+                            { type: "text" as const, text: friendlyMessage },
+                        ],
                    }
+                    return [...currentMessages, errorMessage]
                })
-            }

-            // Translate technical errors into user-friendly messages
-            // The server now handles detailed error messages, so we can display them directly.
-            // But we still handle connection/network errors that happen before reaching the server.
-            let friendlyMessage = error.message
-
-            // Simple check for network errors if message is generic
-            if (friendlyMessage === "Failed to fetch") {
-                friendlyMessage = "Network error. Please check your connection."
-            }
-
-            // Truncated tool input error (model output limit too low)
-            if (friendlyMessage.includes("toolUse.input is invalid")) {
-                friendlyMessage =
-                    "Output was truncated before the diagram could be generated. Try a simpler request or increase the maxOutputLength."
-            }
-
-            // Translate image not supported error
-            if (friendlyMessage.includes("image content block")) {
-                friendlyMessage = "This model doesn't support image input."
-            }
-
-            // Add system message for error so it can be cleared
-            setMessages((currentMessages) => {
-                const errorMessage = {
-                    id: `error-${Date.now()}`,
-                    role: "system" as const,
-                    content: friendlyMessage,
-                    parts: [{ type: "text" as const, text: friendlyMessage }],
+                if (error.message.includes("Invalid or missing access code")) {
+                    // Show settings dialog to help user fix it
+                    setShowSettingsDialog(true)
                }
-                return [...currentMessages, errorMessage]
-            })
+            },
+            onFinish: ({ message }) => {
+                // Track actual token usage from server metadata
+                const metadata = message?.metadata as
+                    | Record<string, unknown>
+                    | undefined

-            if (error.message.includes("Invalid or missing access code")) {
-                // Show settings dialog to help user fix it
-                setShowSettingsDialog(true)
-            }
-        },
-        onFinish: ({ message }) => {
-            // Track actual token usage from server metadata
-            const metadata = message?.metadata as
-                | Record<string, unknown>
-                | undefined
+                // DEBUG: Log finish reason to diagnose truncation
+                console.log("[onFinish] finishReason:", metadata?.finishReason)
+            },
+            sendAutomaticallyWhen: ({ messages }) => {
+                const isInContinuationMode = partialXmlRef.current.length > 0

-            // DEBUG: Log finish reason to diagnose truncation
-            console.log("[onFinish] finishReason:", metadata?.finishReason)
-            console.log("[onFinish] metadata:", metadata)
+                const shouldRetry = hasToolErrors(
+                    messages as unknown as ChatMessage[],
+                )

-            if (metadata) {
-                // Use Number.isFinite to guard against NaN (typeof NaN === 'number' is true)
-                const inputTokens = Number.isFinite(metadata.inputTokens)
-                    ? (metadata.inputTokens as number)
-                    : 0
-                const outputTokens = Number.isFinite(metadata.outputTokens)
-                    ? (metadata.outputTokens as number)
-                    : 0
-                const actualTokens = inputTokens + outputTokens
-                if (actualTokens > 0) {
-                    quotaManager.incrementTokenCount(actualTokens)
-                    quotaManager.incrementTPMCount(actualTokens)
-                }
-            }
-        },
-        sendAutomaticallyWhen: ({ messages }) => {
-            const isInContinuationMode = partialXmlRef.current.length > 0
-
-            const shouldRetry = hasToolErrors(
-                messages as unknown as ChatMessage[],
-            )
-
-            if (!shouldRetry) {
-                // No error, reset retry count and clear state
-                autoRetryCountRef.current = 0
-                partialXmlRef.current = ""
-                return false
-            }
-
-            // Continuation mode: unlimited retries (truncation continuation, not real errors)
-            // Server limits to 5 steps via stepCountIs(5)
-            if (isInContinuationMode) {
-                // Don't count against retry limit for continuation
-                // Quota checks still apply below
-            } else {
-                // Regular error: check retry count limit
-                if (autoRetryCountRef.current >= MAX_AUTO_RETRY_COUNT) {
-                    toast.error(
-                        `Auto-retry limit reached (${MAX_AUTO_RETRY_COUNT}). Please try again manually.`,
-                    )
+                if (!shouldRetry) {
+                    // No error, reset retry count and clear state
                    autoRetryCountRef.current = 0
+                    continuationRetryCountRef.current = 0
                    partialXmlRef.current = ""
                    return false
                }
-                // Increment retry count for actual errors
-                autoRetryCountRef.current++
-            }

-            // Check quota limits before auto-retry
-            const tokenLimitCheck = quotaManager.checkTokenLimit()
-            if (!tokenLimitCheck.allowed) {
-                quotaManager.showTokenLimitToast(tokenLimitCheck.used)
-                autoRetryCountRef.current = 0
-                partialXmlRef.current = ""
-                return false
-            }
+                // Continuation mode: limited retries for truncation handling
+                if (isInContinuationMode) {
+                    if (
+                        continuationRetryCountRef.current >=
+                        MAX_CONTINUATION_RETRY_COUNT
+                    ) {
+                        toast.error(
+                            `Continuation retry limit reached (${MAX_CONTINUATION_RETRY_COUNT}). The diagram may be too complex.`,
+                        )
+                        continuationRetryCountRef.current = 0
+                        partialXmlRef.current = ""
+                        return false
+                    }
+                    continuationRetryCountRef.current++
+                } else {
+                    // Regular error: check retry count limit
+                    if (autoRetryCountRef.current >= MAX_AUTO_RETRY_COUNT) {
+                        toast.error(
+                            `Auto-retry limit reached (${MAX_AUTO_RETRY_COUNT}). Please try again manually.`,
+                        )
+                        autoRetryCountRef.current = 0
+                        partialXmlRef.current = ""
+                        return false
+                    }
+                    // Increment retry count for actual errors
+                    autoRetryCountRef.current++
+                }

-            const tpmCheck = quotaManager.checkTPMLimit()
-            if (!tpmCheck.allowed) {
-                quotaManager.showTPMLimitToast()
-                autoRetryCountRef.current = 0
-                partialXmlRef.current = ""
-                return false
-            }
-
-            return true
-        },
-    })
-
-    // Update stopRef so onToolCall can access it
-    stopRef.current = stop
+                return true
+            },
+        })

    // Ref to track latest messages for unload persistence
    const messagesRef = useRef(messages)
@@ -907,9 +623,6 @@ Continue from EXACTLY where you stopped.`,
                xmlSnapshotsRef.current.set(messageIndex, chartXml)
                saveXmlSnapshots()

-                // Check all quota limits
-                if (!checkAllQuotaLimits()) return
-
                sendChatMessage(parts, chartXml, previousXml, sessionId)

                // Token count is tracked in onFinish with actual server usage
@@ -987,30 +700,7 @@ Continue from EXACTLY where you stopped.`,
        saveXmlSnapshots()
    }

-    // Check all quota limits (daily requests, tokens, TPM)
-    const checkAllQuotaLimits = (): boolean => {
-        const limitCheck = quotaManager.checkDailyLimit()
-        if (!limitCheck.allowed) {
-            quotaManager.showQuotaLimitToast()
-            return false
-        }
-
-        const tokenLimitCheck = quotaManager.checkTokenLimit()
-        if (!tokenLimitCheck.allowed) {
-            quotaManager.showTokenLimitToast(tokenLimitCheck.used)
-            return false
-        }
-
-        const tpmCheck = quotaManager.checkTPMLimit()
-        if (!tpmCheck.allowed) {
-            quotaManager.showTPMLimitToast()
-            return false
-        }
-
-        return true
-    }
-
-    // Send chat message with headers and increment quota
+    // Send chat message with headers
    const sendChatMessage = (
        parts: any,
        xml: string,
@@ -1019,6 +709,7 @@ Continue from EXACTLY where you stopped.`,
    ) => {
        // Reset all retry/continuation state on user-initiated message
        autoRetryCountRef.current = 0
+        continuationRetryCountRef.current = 0
        partialXmlRef.current = ""

        const config = getSelectedAIConfig()
@@ -1059,7 +750,6 @@ Continue from EXACTLY where you stopped.`,
                },
            },
        )
-        quotaManager.incrementRequestCount()
    }

    // Process files and append content to user text (handles PDF, text, and optionally images)
@@ -1147,13 +837,8 @@ Continue from EXACTLY where you stopped.`,
            setMessages(newMessages)
        })

-        // Check all quota limits
-        if (!checkAllQuotaLimits()) return
-
        // Now send the message after state is guaranteed to be updated
        sendChatMessage(userParts, savedXml, previousXml, sessionId)
-
-        // Token count is tracked in onFinish with actual server usage
    }

    const handleEditMessage = async (messageIndex: number, newText: string) => {
@@ -1195,12 +880,8 @@ Continue from EXACTLY where you stopped.`,
            setMessages(newMessages)
        })

-        // Check all quota limits
-        if (!checkAllQuotaLimits()) return
-
        // Now send the edited message after state is guaranteed to be updated
        sendChatMessage(newParts, savedXml, previousXml, sessionId)
-        // Token count is tracked in onFinish with actual server usage
    }

    // Collapsed view (desktop only)
@@ -1252,7 +933,11 @@ Continue from EXACTLY where you stopped.`,
                    <div className="flex items-center gap-2 overflow-x-hidden">
                        <div className="flex items-center gap-2">
                            <Image
-                                src="/favicon.ico"
+                                src={
+                                    darkMode
+                                        ? "/favicon-white.svg"
+                                        : "/favicon.ico"
+                                }
                                alt="Next AI Drawio"
                                width={isMobile ? 24 : 28}
                                height={isMobile ? 24 : 28}
@@ -1281,7 +966,7 @@ Continue from EXACTLY where you stopped.`,
                                rel="noopener noreferrer"
                            >
                                <ButtonWithTooltip
-                                    tooltipContent="Due to high usage, I have changed the model to minimax-m2 and added some usage limits. See About page for details."
+                                    tooltipContent="Sponsored by ByteDance Doubao K2-thinking. See About page for details."
                                    variant="ghost"
                                    size="icon"
                                    className="h-6 w-6 text-amber-500 hover:text-amber-600"
@@ -1303,17 +988,7 @@ Continue from EXACTLY where you stopped.`,
                                className={`${isMobile ? "h-4 w-4" : "h-5 w-5"} text-muted-foreground`}
                            />
                        </ButtonWithTooltip>
-                        <div className="w-px h-5 bg-border mx-1" />
-                        <a
-                            href="https://github.com/DayuanJiang/next-ai-draw-io"
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="p-2 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
-                        >
-                            <FaGithub
-                                className={`${isMobile ? "w-4 h-4" : "w-5 h-5"}`}
-                            />
-                        </a>
+
                        <ButtonWithTooltip
                            tooltipContent={dict.nav.settings}
                            variant="ghost"
@@ -1326,7 +1001,6 @@ Continue from EXACTLY where you stopped.`,
                            />
                        </ButtonWithTooltip>
                        <div className="hidden sm:flex items-center gap-2">
-                            <LanguageToggle />
                            {!isMobile && (
                                <ButtonWithTooltip
                                    tooltipContent={dict.nav.hidePanel}
@@ -1358,6 +1032,17 @@ Continue from EXACTLY where you stopped.`,
                />
            </main>

+            {/* Dev XML Streaming Simulator - only in development */}
+            {DEBUG && (
+                <DevXmlSimulator
+                    setMessages={setMessages}
+                    onDisplayChart={onDisplayChart}
+                    onShowQuotaToast={() =>
+                        quotaManager.showQuotaLimitToast(50, 50)
+                    }
+                />
+            )}
+
            {/* Input */}
            <footer
                className={`${isMobile ? "p-2" : "p-4"} border-t border-border/50 bg-card/50`}
@@ -1371,15 +1056,12 @@ Continue from EXACTLY where you stopped.`,
                    files={files}
                    onFileChange={handleFileChange}
                    pdfData={pdfData}
-                    showHistory={showHistory}
-                    onToggleHistory={setShowHistory}
                    sessionId={sessionId}
                    error={error}
-                    minimalStyle={minimalStyle}
-                    onMinimalStyleChange={setMinimalStyle}
                    models={modelConfig.models}
                    selectedModelId={modelConfig.selectedModelId}
                    onModelSelect={modelConfig.setSelectedModelId}
+                    showUnvalidatedModels={modelConfig.showUnvalidatedModels}
                    onConfigureModels={() => setShowModelConfigDialog(true)}
                />
            </footer>
@@ -1392,6 +1074,8 @@ Continue from EXACTLY where you stopped.`,
                onToggleDrawioUi={onToggleDrawioUi}
                darkMode={darkMode}
                onToggleDarkMode={onToggleDarkMode}
+                minimalStyle={minimalStyle}
+                onMinimalStyleChange={setMinimalStyle}
            />

            <ModelConfigDialog
--- a/components/dev-xml-simulator.tsx
+++ b/components/dev-xml-simulator.tsx
@@ -0,0 +1,361 @@
+"use client"
+
+import { useEffect, useRef, useState } from "react"
+import { wrapWithMxFile } from "@/lib/utils"
+
+// Dev XML presets for streaming simulator
+const DEV_XML_PRESETS: Record<string, string> = {
+    "Simple Box": `<mxCell id="2" value="Hello World" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+  <mxGeometry x="120" y="100" width="120" height="60" as="geometry"/>
+</mxCell>`,
+    "Two Boxes with Arrow": `<mxCell id="2" value="Start" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+  <mxGeometry x="100" y="100" width="100" height="50" as="geometry"/>
+</mxCell>
+<mxCell id="3" value="End" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+  <mxGeometry x="300" y="100" width="100" height="50" as="geometry"/>
+</mxCell>
+<mxCell id="4" value="" style="endArrow=classic;html=1;" edge="1" parent="1" source="2" target="3">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>`,
+    Flowchart: `<mxCell id="2" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+  <mxGeometry x="160" y="40" width="80" height="40" as="geometry"/>
+</mxCell>
+<mxCell id="3" value="Process A" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+  <mxGeometry x="140" y="120" width="120" height="60" as="geometry"/>
+</mxCell>
+<mxCell id="4" value="Decision" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+  <mxGeometry x="150" y="220" width="100" height="80" as="geometry"/>
+</mxCell>
+<mxCell id="5" value="Process B" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+  <mxGeometry x="300" y="230" width="120" height="60" as="geometry"/>
+</mxCell>
+<mxCell id="6" value="End" style="ellipse;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+  <mxGeometry x="160" y="340" width="80" height="40" as="geometry"/>
+</mxCell>
+<mxCell id="7" style="endArrow=classic;html=1;" edge="1" parent="1" source="2" target="3">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="8" style="endArrow=classic;html=1;" edge="1" parent="1" source="3" target="4">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="9" value="Yes" style="endArrow=classic;html=1;" edge="1" parent="1" source="4" target="6">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="10" value="No" style="endArrow=classic;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;" edge="1" parent="1" source="4" target="5">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>`,
+    "Truncated (Error Test)": `<mxCell id="2" value="This cell is truncated" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+  <mxGeometry x="120" y="100" width="120" height="60" as="geometry"/>
+</mxCell>
+<mxCell id="3" value="Incomplete" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor`,
+    "HTML Escape + Cell Truncate": `<mxCell id="2" value="<b>Chain-of-Thought Prompting</b><br/><font size='12'>Eliciting Reasoning in Large Language Models</font>" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=16;fontStyle=1;" vertex="1" parent="1">
+  <mxGeometry x="40" y="40" width="720" height="60" as="geometry"/>
+</mxCell>
+<mxCell id="3" value="<b>Problem: LLM Reasoning Limitations</b><br/>• Scaling parameters alone insufficient for logical tasks<br/>• Arithmetic, commonsense, symbolic reasoning challenges<br/>• Standard prompting fails on multi-step problems" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
+  <mxGeometry x="40" y="120" width="340" height="120" as="geometry"/>
+</mxCell>
+<mxCell id="4" value="<b>Traditional Approaches</b><br/>1. <b>Finetuning:</b> Expensive, task-specific<br/>2. <b>Standard Few-Shot:</b> Input→Output pairs<br/>   (No explanation of reasoning)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+  <mxGeometry x="420" y="120" width="340" height="120" as="geometry"/>
+</mxCell>
+<mxCell id="5" value="<b>CoT Methodology</b><br/>• Add reasoning steps to few-shot examples<br/>• Natural language intermediate steps<br/>• No parameter updates needed<br/>• Model learns to generate own thought process" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+  <mxGeometry x="40" y="260" width="340" height="100" as="geometry"/>
+</mxCell>
+<mxCell id="6" value="<b>Example Comparison</b><br/><b>Standard:</b><br/>Q: Roger has 5 balls. He buys 2 cans of 3 balls. How many?<br/>A: 11.<br/><br/><b>CoT:</b><br/>Q: Roger has 5 balls. He buys 2 cans of 3 balls. How many?<br/>A: Roger started with 5 balls. 2 cans of 3 tennis balls each is 6 tennis balls. 5 + 6 = 11. The answer is 11." style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" vertex="1" parent="1">
+  <mxGeometry x="420" y="260" width="340" height="140" as="geometry"/>
+</mxCell>
+<mxCell id="7" value="<b>Experimental Models</b><br/>• GPT-3 (175B)<br/>• LaMDA (137B)<br/>• PaLM (540B)<br/>• UL2 (20B)<br/>• Codex" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+  <mxGeometry x="40" y="380" width="340" height="100" as="geometry"/>
+</mxCell>
+<mxCell id="8" value="<b>Reasoning Domains Tested</b><br/>1. <b>Arithmetic:</b> GSM8K, SVAMP, ASDiv, AQuA, MAWPS<br/>2. <b>Commonsense:</b> CSQA, StrategyQA, Date Understanding, Sports Understanding<br/>3. <b>Symbolic:</b> Last Letter Concatenation, Coin Flip" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#666666;" vertex="1" parent="1">
+  <mxGeometry x="420" y="420" width="340" height="100" as="geometry"/>
+</mxCell>
+<mxCell id="9" value="<b>Key Results: Arithmetic</b><br/>• PaLM 540B + CoT: <b>56.9%</b> on GSM8K<br/>   (vs 17.9% standard)<br/>• Surpassed finetuned GPT-3 (55%)<br/>• With calculator: <b>58.6%</b>" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+  <mxGeometry x="40" y="500" width="220" height="100" as="geometry"/>
+</mxCell>
+<mxCell id="10" value="<b>Key Results: Commonsense</b><br/>• StrategyQA: <b>75.6%</b><br/>   (vs 69.4% SOTA)<br/>• Sports Understanding: <b>95.4%</b><br/>   (vs 84% human)" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+  <mxGeometry x="280" y="500" width="220" height="100" as="geometry"/>
+</mxCell>
+<mxCell id="11" value="<b>Key Results: Symbolic</b><br/>• OOD Generalization<br/>• Coin Flip: Trained on 2 flips<br/>   Works on 3-4 flips with CoT<br/>• Standard prompting fails" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+  <mxGeometry x="540" y="500" width="220" height="100" as="geometry"/>
+</mxCell>
+<mxCell id="12" value="<b>Emergent Ability of Scale</b><br/>• Small models (&lt;10B): No benefit, often harmful<br/>• Large models (100B+): Reasoning emerges<br/>• CoT gains increase dramatically with scale" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1">
+  <mxGeometry x="40" y="620" width="340" height="80" as="geometry"/>
+</mxCell>
+<mxCell id="13" value="<b>Ablation Studies</b><br/>1. Equation only: Worse than CoT<br/>2. Variable compute (...): No improvement<br/>3. Answer first, then reasoning: Same as baseline<br/>→ Content matters, not just extra tokens" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
+  <mxGeometry x="420" y="620" width="340" height="80" as="geometry"/>
+</mxCell>
+<mxCell id="14" value="<b>Error Analysis</b><br/>• Semantic understanding errors<br/>• One-step missing errors<br/>• Calculation errors<br/>• Larger models reduce semantic/missing-step errors" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+  <mxGeometry x="40" y="720" width="340" height="80" as="geometry"/>
+</mxCell>
+<mxCell id="15" value="<b>Conclusion</b><br/>• CoT unlocks reasoning potential<br/>• Simple paradigm: &quot;show your work&quot;<br/>• Emergent capability of large models<br/>• No specialized architecture needed" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
+  <mxGeometry x="420" y="720" width="340" height="80" as="geometry"/>
+</mxCell>
+<mxCell id="16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="3" target="5">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="4" target="6">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="18" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="5" target="7">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="19" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="6" target="8">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.25;entryY=0;" edge="1" parent="1" source="7" target="9">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="21" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="7" target="10">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="22" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.75;entryY=0;" edge="1" parent="1" source="7" target="11">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="9" target="12">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="24" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="10" target="13">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="25" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="11" target="14">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="26" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="12" target="15">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="27" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="13" target="15">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>
+<mxCell id="28" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;entryX=0.5;entryY=0;" edge="1" parent="1" source="14" target="15">
+  <mxGeometry relative="1" as="geometry"/>
+</mxCell>`,
+}
+
+interface DevXmlSimulatorProps {
+    setMessages: React.Dispatch<React.SetStateAction<any[]>>
+    onDisplayChart: (xml: string) => void
+    onShowQuotaToast?: () => void
+}
+
+export function DevXmlSimulator({
+    setMessages,
+    onDisplayChart,
+    onShowQuotaToast,
+}: DevXmlSimulatorProps) {
+    const [devXml, setDevXml] = useState("")
+    const [isSimulating, setIsSimulating] = useState(false)
+    const [devIntervalMs, setDevIntervalMs] = useState(1)
+    const [devChunkSize, setDevChunkSize] = useState(10)
+    const devStopRef = useRef(false)
+    const devXmlInitializedRef = useRef(false)
+
+    // Restore dev XML from localStorage on mount (after hydration)
+    useEffect(() => {
+        const saved = localStorage.getItem("dev-xml-simulator")
+        if (saved) setDevXml(saved)
+        devXmlInitializedRef.current = true
+    }, [])
+
+    // Save dev XML to localStorage (only after initial load)
+    useEffect(() => {
+        if (devXmlInitializedRef.current) {
+            localStorage.setItem("dev-xml-simulator", devXml)
+        }
+    }, [devXml])
+
+    const handleDevSimulate = async () => {
+        if (!devXml.trim() || isSimulating) return
+
+        setIsSimulating(true)
+        devStopRef.current = false
+        const toolCallId = `dev-sim-${Date.now()}`
+        const xml = devXml.trim()
+
+        // Add user message and initial assistant message with empty XML
+        const userMsg = {
+            id: `user-${Date.now()}`,
+            role: "user" as const,
+            parts: [
+                {
+                    type: "text" as const,
+                    text: "[Dev] Simulating XML streaming",
+                },
+            ],
+        }
+        const assistantMsg = {
+            id: `assistant-${Date.now()}`,
+            role: "assistant" as const,
+            parts: [
+                {
+                    type: "tool-display_diagram" as const,
+                    toolCallId,
+                    state: "input-streaming" as const,
+                    input: { xml: "" },
+                },
+            ],
+        }
+        setMessages((prev) => [...prev, userMsg, assistantMsg] as any)
+
+        // Stream characters progressively
+        for (let i = 0; i < xml.length; i += devChunkSize) {
+            if (devStopRef.current) {
+                setIsSimulating(false)
+                return
+            }
+
+            const chunk = xml.slice(0, i + devChunkSize)
+
+            setMessages((prev) => {
+                const updated = [...prev]
+                const lastMsg = updated[updated.length - 1] as any
+                if (lastMsg?.role === "assistant" && lastMsg.parts?.[0]) {
+                    lastMsg.parts[0].input = { xml: chunk }
+                }
+                return updated
+            })
+
+            await new Promise((r) => setTimeout(r, devIntervalMs))
+        }
+
+        if (devStopRef.current) {
+            setIsSimulating(false)
+            return
+        }
+
+        // Finalize: set state to output-available
+        setMessages((prev) => {
+            const updated = [...prev]
+            const lastMsg = updated[updated.length - 1] as any
+            if (lastMsg?.role === "assistant" && lastMsg.parts?.[0]) {
+                lastMsg.parts[0].state = "output-available"
+                lastMsg.parts[0].output = "Successfully displayed the diagram."
+                lastMsg.parts[0].input = { xml }
+            }
+            return updated
+        })
+
+        // Display the final diagram
+        const fullXml = wrapWithMxFile(xml)
+        onDisplayChart(fullXml)
+
+        setIsSimulating(false)
+    }
+
+    return (
+        <div className="border-t border-dashed border-orange-500/50 px-4 py-2 bg-orange-50/50 dark:bg-orange-950/30">
+            <details>
+                <summary className="text-xs text-orange-600 dark:text-orange-400 cursor-pointer font-medium">
+                    Dev: XML Streaming Simulator
+                </summary>
+                <div className="mt-2 space-y-2">
+                    <div className="flex items-center gap-2">
+                        <label className="text-xs text-muted-foreground whitespace-nowrap">
+                            Preset:
+                        </label>
+                        <select
+                            onChange={(e) => {
+                                if (e.target.value) {
+                                    setDevXml(DEV_XML_PRESETS[e.target.value])
+                                }
+                            }}
+                            className="flex-1 text-xs p-1 border rounded bg-background"
+                            defaultValue=""
+                        >
+                            <option value="" disabled>
+                                Select a preset...
+                            </option>
+                            {Object.keys(DEV_XML_PRESETS).map((name) => (
+                                <option key={name} value={name}>
+                                    {name}
+                                </option>
+                            ))}
+                        </select>
+                        <button
+                            type="button"
+                            onClick={() => setDevXml("")}
+                            className="px-2 py-1 text-xs text-muted-foreground hover:text-foreground border rounded"
+                        >
+                            Clear
+                        </button>
+                    </div>
+                    <textarea
+                        value={devXml}
+                        onChange={(e) => setDevXml(e.target.value)}
+                        placeholder="Paste mxCell XML here or select a preset..."
+                        className="w-full h-24 text-xs font-mono p-2 border rounded bg-background"
+                    />
+                    <div className="flex items-center gap-4">
+                        <div className="flex items-center gap-2 flex-1">
+                            <label className="text-xs text-muted-foreground whitespace-nowrap">
+                                Interval:
+                            </label>
+                            <input
+                                type="range"
+                                min="1"
+                                max="200"
+                                step="1"
+                                value={devIntervalMs}
+                                onChange={(e) =>
+                                    setDevIntervalMs(Number(e.target.value))
+                                }
+                                className="flex-1 h-1 accent-orange-500"
+                            />
+                            <span className="text-xs text-muted-foreground w-12">
+                                {devIntervalMs}ms
+                            </span>
+                        </div>
+                        <div className="flex items-center gap-2">
+                            <label className="text-xs text-muted-foreground whitespace-nowrap">
+                                Chars:
+                            </label>
+                            <input
+                                type="number"
+                                min="1"
+                                max="100"
+                                value={devChunkSize}
+                                onChange={(e) =>
+                                    setDevChunkSize(
+                                        Math.max(1, Number(e.target.value)),
+                                    )
+                                }
+                                className="w-14 text-xs p-1 border rounded bg-background"
+                            />
+                        </div>
+                    </div>
+                    <div className="flex gap-2">
+                        <button
+                            type="button"
+                            onClick={handleDevSimulate}
+                            disabled={isSimulating || !devXml.trim()}
+                            className="px-3 py-1 text-xs bg-orange-500 text-white rounded hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                            {isSimulating
+                                ? "Streaming..."
+                                : `Simulate (${devChunkSize} chars/${devIntervalMs}ms)`}
+                        </button>
+                        {isSimulating && (
+                            <button
+                                type="button"
+                                onClick={() => {
+                                    devStopRef.current = true
+                                }}
+                                className="px-3 py-1 text-xs bg-red-500 text-white rounded hover:bg-red-600"
+                            >
+                                Stop
+                            </button>
+                        )}
+                        {onShowQuotaToast && (
+                            <button
+                                type="button"
+                                onClick={onShowQuotaToast}
+                                className="px-3 py-1 text-xs bg-purple-500 text-white rounded hover:bg-purple-600"
+                            >
+                                Test Quota Toast
+                            </button>
+                        )}
+                    </div>
+                </div>
+            </details>
+        </div>
+    )
+}
--- a/components/language-toggle.tsx
+++ b/components/language-toggle.tsx
@@ -1,108 +0,0 @@
-"use client"
-
-import { Globe } from "lucide-react"
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
-import { Suspense, useEffect, useRef, useState } from "react"
-import { i18n, type Locale } from "@/lib/i18n/config"
-
-const LABELS: Record<string, string> = {
-    en: "EN",
-    zh: "中文",
-    ja: "日本語",
-}
-
-function LanguageToggleInner({ className = "" }: { className?: string }) {
-    const router = useRouter()
-    const pathname = usePathname() || "/"
-    const search = useSearchParams()
-    const [open, setOpen] = useState(false)
-    const [value, setValue] = useState<Locale>(i18n.defaultLocale)
-    const ref = useRef<HTMLDivElement | null>(null)
-
-    useEffect(() => {
-        const seg = pathname.split("/").filter(Boolean)
-        const first = seg[0]
-        if (first && i18n.locales.includes(first as Locale))
-            setValue(first as Locale)
-        else setValue(i18n.defaultLocale)
-    }, [pathname])
-
-    useEffect(() => {
-        function onDoc(e: MouseEvent) {
-            if (!ref.current) return
-            if (!ref.current.contains(e.target as Node)) setOpen(false)
-        }
-        if (open) document.addEventListener("mousedown", onDoc)
-        return () => document.removeEventListener("mousedown", onDoc)
-    }, [open])
-
-    const changeLocale = (lang: string) => {
-        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()}` : ""
-        setOpen(false)
-        router.push(newPath + searchStr)
-    }
-
-    return (
-        <div className={`relative inline-flex ${className}`} ref={ref}>
-            <button
-                aria-haspopup="menu"
-                aria-expanded={open}
-                onClick={() => setOpen((s) => !s)}
-                className="p-2 rounded-full hover:bg-accent/20 transition-colors text-muted-foreground"
-                aria-label="Change language"
-            >
-                <Globe className="w-5 h-5" />
-            </button>
-            {open && (
-                <div className="absolute right-0 top-full mt-2 w-40 bg-popover dark:bg-popover text-popover-foreground rounded-xl shadow-md border border-border/30 overflow-hidden z-50">
-                    <div className="grid gap-0 divide-y divide-border/30">
-                        {i18n.locales.map((loc) => (
-                            <button
-                                key={loc}
-                                onClick={() => changeLocale(loc)}
-                                className={`flex items-center gap-2 px-4 py-2 text-sm w-full text-left hover:bg-accent/10 transition-colors ${value === loc ? "bg-accent/10 font-semibold" : ""}`}
-                            >
-                                <span className="flex-1">
-                                    {LABELS[loc] ?? loc}
-                                </span>
-                                {value === loc && (
-                                    <span className="text-xs opacity-70">
-                                        ✓
-                                    </span>
-                                )}
-                            </button>
-                        ))}
-                    </div>
-                </div>
-            )}
-        </div>
-    )
-}
-
-export default function LanguageToggle({
-    className = "",
-}: {
-    className?: string
-}) {
-    return (
-        <Suspense
-            fallback={
-                <button
-                    className="p-2 rounded-full text-muted-foreground opacity-50"
-                    disabled
-                >
-                    <Globe className="w-5 h-5" />
-                </button>
-            }
-        >
-            <LanguageToggleInner className={className} />
-        </Suspense>
-    )
-}
--- a/components/model-config-dialog.tsx
+++ b/components/model-config-dialog.tsx
@@ -50,8 +50,10 @@ import {
    SelectTrigger,
    SelectValue,
 } from "@/components/ui/select"
+import { Switch } from "@/components/ui/switch"
 import { useDictionary } from "@/hooks/use-dictionary"
 import type { UseModelConfigReturn } from "@/hooks/use-model-config"
+import { formatMessage } from "@/lib/i18n/utils"
 import type { ProviderConfig, ProviderName } from "@/lib/types/model-config"
 import { PROVIDER_INFO, SUGGESTED_MODELS } from "@/lib/types/model-config"
 import { cn } from "@/lib/utils"
@@ -74,7 +76,9 @@ const PROVIDER_LOGO_MAP: Record<string, string> = {
    openrouter: "openrouter",
    deepseek: "deepseek",
    siliconflow: "siliconflow",
+    sglang: "openai", // SGLang is OpenAI-compatible
    gateway: "vercel",
+    doubao: "bytedance",
 }

 // Provider logo component
@@ -85,10 +89,16 @@ function ProviderLogo({
    provider: ProviderName
    className?: string
 }) {
-    // Use Lucide icon for bedrock since models.dev doesn't have a good AWS icon
+    // Use Lucide icons for providers without models.dev logos
    if (provider === "bedrock") {
        return <Cloud className={cn("size-4", className)} />
    }
+    if (provider === "sglang") {
+        return <Server className={cn("size-4", className)} />
+    }
+    if (provider === "doubao") {
+        return <Sparkles className={cn("size-4", className)} />
+    }

    const logoName = PROVIDER_LOGO_MAP[provider] || provider
    return (
@@ -102,39 +112,40 @@ function ProviderLogo({
    )
 }

-// Reusable validation button component
-function ValidationButton({
-    status,
-    onClick,
-    disabled,
+// Configuration section with title and optional action
+function ConfigSection({
+    title,
+    icon: Icon,
+    action,
+    children,
 }: {
-    status: ValidationStatus
-    onClick: () => void
-    disabled: boolean
+    title: string
+    icon: React.ComponentType<{ className?: string }>
+    action?: React.ReactNode
+    children: React.ReactNode
 }) {
    return (
-        <Button
-            variant={status === "success" ? "outline" : "default"}
-            size="sm"
-            onClick={onClick}
-            disabled={disabled}
-            className={cn(
-                "h-9 px-4 min-w-[80px]",
-                status === "success" &&
-                    "text-emerald-600 border-emerald-200 dark:border-emerald-800",
-            )}
-        >
-            {status === "validating" ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-            ) : status === "success" ? (
-                <>
-                    <Check className="h-4 w-4 mr-1.5" />
-                    Verified
-                </>
-            ) : (
-                "Test"
-            )}
-        </Button>
+        <div className="space-y-4">
+            <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                    <Icon className="h-4 w-4 text-muted-foreground" />
+                    <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                        {title}
+                    </span>
+                </div>
+                {action}
+            </div>
+            {children}
+        </div>
+    )
+}
+
+// Card wrapper with subtle depth
+function ConfigCard({ children }: { children: React.ReactNode }) {
+    return (
+        <div className="rounded-2xl border border-border-subtle bg-surface-2/50 p-5 space-y-5">
+            {children}
+        </div>
    )
 }

@@ -151,7 +162,6 @@ export function ModelConfigDialog({
    const [validationStatus, setValidationStatus] =
        useState<ValidationStatus>("idle")
    const [validationError, setValidationError] = useState<string>("")
-    const [scrollState, setScrollState] = useState({ top: false, bottom: true })
    const [customModelInput, setCustomModelInput] = useState("")
    const scrollRef = useRef<HTMLDivElement>(null)
    const validationResetTimeoutRef = useRef<ReturnType<
@@ -183,26 +193,6 @@ export function ModelConfigDialog({
        (p) => p.id === selectedProviderId,
    )

-    // Track scroll position for gradient shadows
-    useEffect(() => {
-        const scrollEl = scrollRef.current?.querySelector(
-            "[data-radix-scroll-area-viewport]",
-        ) as HTMLElement | null
-        if (!scrollEl) return
-
-        const handleScroll = () => {
-            const { scrollTop, scrollHeight, clientHeight } = scrollEl
-            setScrollState({
-                top: scrollTop > 10,
-                bottom: scrollTop < scrollHeight - clientHeight - 10,
-            })
-        }
-
-        handleScroll() // Initial check
-        scrollEl.addEventListener("scroll", handleScroll)
-        return () => scrollEl.removeEventListener("scroll", handleScroll)
-    }, [selectedProvider])
-
    // Cleanup validation reset timeout on unmount
    useEffect(() => {
        return () => {
@@ -387,104 +377,116 @@ export function ModelConfigDialog({

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-3xl h-[75vh] max-h-[700px] overflow-hidden flex flex-col gap-0 p-0">
-                <DialogHeader className="px-6 pt-6 pb-4 border-b bg-gradient-to-r from-primary/5 via-primary/3 to-transparent">
-                    <DialogTitle className="flex items-center gap-2.5 text-xl font-semibold">
-                        <div className="p-1.5 rounded-lg bg-primary/10">
+            <DialogContent className="sm:max-w-4xl h-[80vh] max-h-[800px] overflow-hidden flex flex-col gap-0 p-0">
+                {/* Header */}
+                <DialogHeader className="px-6 pt-6 pb-4 shrink-0">
+                    <DialogTitle className="flex items-center gap-3">
+                        <div className="p-2 rounded-xl bg-surface-2">
                            <Server className="h-5 w-5 text-primary" />
                        </div>
                        {dict.modelConfig?.title || "AI Model Configuration"}
                    </DialogTitle>
-                    <DialogDescription className="text-sm">
+                    <DialogDescription className="mt-1">
                        {dict.modelConfig?.description ||
                            "Configure multiple AI providers and models for your workspace"}
                    </DialogDescription>
                </DialogHeader>

-                <div className="flex flex-1 min-h-0 overflow-hidden">
+                <div className="flex flex-1 min-h-0 overflow-hidden border-t border-border-subtle">
                    {/* Provider List (Left Sidebar) */}
-                    <div className="w-56 flex-shrink-0 flex flex-col border-r bg-muted/20">
-                        <div className="px-4 py-3 border-b">
+                    <div className="w-60 shrink-0 flex flex-col bg-surface-1/50 border-r border-border-subtle">
+                        <div className="px-4 py-3">
                            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                                Providers
+                                {dict.modelConfig.providers}
                            </span>
                        </div>

-                        <ScrollArea className="flex-1">
-                            <div className="p-2">
+                        <ScrollArea className="flex-1 px-2">
+                            <div className="space-y-1 pb-2">
                                {config.providers.length === 0 ? (
                                    <div className="px-3 py-8 text-center">
-                                        <div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-muted mb-3">
+                                        <div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-surface-2 mb-3">
                                            <Plus className="h-5 w-5 text-muted-foreground" />
                                        </div>
                                        <p className="text-xs text-muted-foreground">
-                                            Add a provider to get started
+                                            {dict.modelConfig.addProviderHint}
                                        </p>
                                    </div>
                                ) : (
-                                    <div className="flex flex-col gap-1">
-                                        {config.providers.map((provider) => (
-                                            <button
-                                                key={provider.id}
-                                                type="button"
-                                                onClick={() => {
-                                                    setSelectedProviderId(
-                                                        provider.id,
-                                                    )
-                                                    setValidationStatus(
-                                                        provider.validated
-                                                            ? "success"
-                                                            : "idle",
-                                                    )
-                                                    setShowApiKey(false)
-                                                }}
+                                    config.providers.map((provider) => (
+                                        <button
+                                            key={provider.id}
+                                            type="button"
+                                            onClick={() => {
+                                                setSelectedProviderId(
+                                                    provider.id,
+                                                )
+                                                setValidationStatus("idle")
+                                                setShowApiKey(false)
+                                            }}
+                                            className={cn(
+                                                "group flex items-center gap-3 px-3 py-2.5 rounded-xl w-full",
+                                                "text-left text-sm transition-all duration-150",
+                                                "hover:bg-interactive-hover",
+                                                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                                                selectedProviderId ===
+                                                    provider.id &&
+                                                    "bg-surface-0 shadow-sm ring-1 ring-border-subtle",
+                                            )}
+                                        >
+                                            <div
                                                className={cn(
-                                                    "group flex items-center gap-3 px-3 py-2.5 rounded-lg text-left text-sm transition-all duration-150 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                                                    "w-8 h-8 rounded-lg flex items-center justify-center",
+                                                    "bg-surface-2 transition-colors duration-150",
                                                    selectedProviderId ===
                                                        provider.id &&
-                                                        "bg-background shadow-sm ring-1 ring-border",
+                                                        "bg-primary/10",
                                                )}
                                            >
                                                <ProviderLogo
                                                    provider={provider.provider}
                                                    className="flex-shrink-0"
                                                />
-                                                <span className="flex-1 truncate font-medium">
-                                                    {getProviderDisplayName(
-                                                        provider,
-                                                    )}
-                                                </span>
-                                                {provider.validated ? (
-                                                    <div className="flex-shrink-0 flex items-center justify-center w-5 h-5 rounded-full bg-emerald-500/10">
-                                                        <Check className="h-3 w-3 text-emerald-500" />
-                                                    </div>
-                                                ) : (
-                                                    <ChevronRight
-                                                        className={cn(
-                                                            "h-4 w-4 text-muted-foreground/50 transition-transform",
-                                                            selectedProviderId ===
-                                                                provider.id &&
-                                                                "translate-x-0.5",
-                                                        )}
-                                                    />
+                                            </div>
+                                            <span className="flex-1 truncate font-medium">
+                                                {getProviderDisplayName(
+                                                    provider,
                                                )}
-                                            </button>
-                                        ))}
-                                    </div>
+                                            </span>
+                                            {provider.validated ? (
+                                                <div className="flex-shrink-0 flex items-center justify-center w-5 h-5 rounded-full bg-success-muted">
+                                                    <Check className="h-3 w-3 text-success" />
+                                                </div>
+                                            ) : (
+                                                <ChevronRight
+                                                    className={cn(
+                                                        "h-4 w-4 text-muted-foreground/50 transition-transform duration-150",
+                                                        selectedProviderId ===
+                                                            provider.id &&
+                                                            "translate-x-0.5",
+                                                    )}
+                                                />
+                                            )}
+                                        </button>
+                                    ))
                                )}
                            </div>
                        </ScrollArea>

                        {/* Add Provider */}
-                        <div className="p-2 border-t">
+                        <div className="p-3 border-t border-border-subtle">
                            <Select
                                onValueChange={(v) =>
                                    handleAddProvider(v as ProviderName)
                                }
                            >
-                                <SelectTrigger className="h-9 bg-background hover:bg-accent">
+                                <SelectTrigger className="w-full h-9 rounded-xl bg-surface-0 border-border-subtle hover:bg-interactive-hover">
                                    <Plus className="h-4 w-4 mr-2 text-muted-foreground" />
-                                    <SelectValue placeholder="Add Provider" />
+                                    <SelectValue
+                                        placeholder={
+                                            dict.modelConfig.addProvider
+                                        }
+                                    />
                                </SelectTrigger>
                                <SelectContent>
                                    {availableProviders.map((p) => (
@@ -507,41 +509,23 @@ export function ModelConfigDialog({
                    </div>

                    {/* Provider Details (Right Panel) */}
-                    <div className="flex-1 min-w-0 overflow-hidden relative">
+                    <div className="flex-1 min-w-0 flex flex-col overflow-auto [&::-webkit-scrollbar]:hidden ">
                        {selectedProvider ? (
                            <>
-                                {/* Top gradient shadow */}
-                                <div
-                                    className={cn(
-                                        "absolute top-0 left-0 right-0 h-8 bg-gradient-to-b from-background to-transparent z-10 pointer-events-none transition-opacity duration-200",
-                                        scrollState.top
-                                            ? "opacity-100"
-                                            : "opacity-0",
-                                    )}
-                                />
-                                {/* Bottom gradient shadow */}
-                                <div
-                                    className={cn(
-                                        "absolute bottom-0 left-0 right-0 h-8 bg-gradient-to-t from-background to-transparent z-10 pointer-events-none transition-opacity duration-200",
-                                        scrollState.bottom
-                                            ? "opacity-100"
-                                            : "opacity-0",
-                                    )}
-                                />
-                                <ScrollArea className="h-full" ref={scrollRef}>
-                                    <div className="p-6 space-y-6">
+                                <ScrollArea className="flex-1" ref={scrollRef}>
+                                    <div className="p-6 space-y-8">
                                        {/* Provider Header */}
                                        <div className="flex items-center gap-3">
-                                            <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-muted">
+                                            <div className="flex items-center justify-center w-12 h-12 rounded-xl bg-surface-2">
                                                <ProviderLogo
                                                    provider={
                                                        selectedProvider.provider
                                                    }
-                                                    className="h-5 w-5"
+                                                    className="h-6 w-6"
                                                />
                                            </div>
                                            <div className="flex-1 min-w-0">
-                                                <h3 className="font-semibold text-base">
+                                                <h3 className="font-semibold text-lg tracking-tight">
                                                    {
                                                        PROVIDER_INFO[
                                                            selectedProvider
@@ -549,31 +533,57 @@ export function ModelConfigDialog({
                                                        ].label
                                                    }
                                                </h3>
-                                                <p className="text-xs text-muted-foreground">
+                                                <p className="text-sm text-muted-foreground">
                                                    {selectedProvider.models
                                                        .length === 0
-                                                        ? "No models configured"
-                                                        : `${selectedProvider.models.length} model${selectedProvider.models.length > 1 ? "s" : ""} configured`}
+                                                        ? dict.modelConfig
+                                                              .noModelsConfigured
+                                                        : formatMessage(
+                                                              dict.modelConfig
+                                                                  .modelsConfiguredCount,
+                                                              {
+                                                                  count: selectedProvider
+                                                                      .models
+                                                                      .length,
+                                                              },
+                                                          )}
                                                </p>
                                            </div>
                                            {selectedProvider.validated && (
-                                                <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
-                                                    <Check className="h-3.5 w-3.5" />
+                                                <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-success-muted text-success">
+                                                    <Check className="h-3.5 w-3.5 animate-check-pop" />
                                                    <span className="text-xs font-medium">
-                                                        Verified
+                                                        {
+                                                            dict.modelConfig
+                                                                .verified
+                                                        }
                                                    </span>
                                                </div>
                                            )}
+                                            <Button
+                                                variant="ghost"
+                                                size="sm"
+                                                onClick={() =>
+                                                    setDeleteConfirmOpen(true)
+                                                }
+                                                className="text-destructive hover:text-destructive hover:bg-destructive/10"
+                                            >
+                                                <Trash2 className="h-4 w-4 mr-1.5" />
+                                                {
+                                                    dict.modelConfig
+                                                        .deleteProvider
+                                                }
+                                            </Button>
                                        </div>

                                        {/* Configuration Section */}
-                                        <div className="space-y-4">
-                                            <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
-                                                <Settings2 className="h-4 w-4" />
-                                                <span>Configuration</span>
-                                            </div>
-
-                                            <div className="rounded-xl border bg-card p-4 space-y-4">
+                                        <ConfigSection
+                                            title={
+                                                dict.modelConfig.configuration
+                                            }
+                                            icon={Settings2}
+                                        >
+                                            <ConfigCard>
                                                {/* Display Name */}
                                                <div className="space-y-2">
                                                    <Label
@@ -581,7 +591,10 @@ export function ModelConfigDialog({
                                                        className="text-xs font-medium flex items-center gap-1.5"
                                                    >
                                                        <Tag className="h-3.5 w-3.5 text-muted-foreground" />
-                                                        Display Name
+                                                        {
+                                                            dict.modelConfig
+                                                                .displayName
+                                                        }
                                                    </Label>
                                                    <Input
                                                        id="provider-name"
@@ -616,8 +629,11 @@ export function ModelConfigDialog({
                                                                className="text-xs font-medium flex items-center gap-1.5"
                                                            >
                                                                <Key className="h-3.5 w-3.5 text-muted-foreground" />
-                                                                AWS Access Key
-                                                                ID
+                                                                {
+                                                                    dict
+                                                                        .modelConfig
+                                                                        .awsAccessKeyId
+                                                                }
                                                            </Label>
                                                            <Input
                                                                id="aws-access-key-id"
@@ -649,8 +665,11 @@ export function ModelConfigDialog({
                                                                className="text-xs font-medium flex items-center gap-1.5"
                                                            >
                                                                <Key className="h-3.5 w-3.5 text-muted-foreground" />
-                                                                AWS Secret
-                                                                Access Key
+                                                                {
+                                                                    dict
+                                                                        .modelConfig
+                                                                        .awsSecretAccessKey
+                                                                }
                                                            </Label>
                                                            <div className="relative">
                                                                <Input
@@ -674,7 +693,11 @@ export function ModelConfigDialog({
                                                                                .value,
                                                                        )
                                                                    }
-                                                                    placeholder="Enter your secret access key"
+                                                                    placeholder={
+                                                                        dict
+                                                                            .modelConfig
+                                                                            .enterSecretKey
+                                                                    }
                                                                    className="h-9 pr-10 font-mono text-xs"
                                                                />
                                                                <button
@@ -707,7 +730,11 @@ export function ModelConfigDialog({
                                                                className="text-xs font-medium flex items-center gap-1.5"
                                                            >
                                                                <Link2 className="h-3.5 w-3.5 text-muted-foreground" />
-                                                                AWS Region
+                                                                {
+                                                                    dict
+                                                                        .modelConfig
+                                                                        .awsRegion
+                                                                }
                                                            </Label>
                                                            <Select
                                                                value={
@@ -724,7 +751,13 @@ export function ModelConfigDialog({
                                                                }
                                                            >
                                                                <SelectTrigger className="h-9 font-mono text-xs hover:bg-accent">
-                                                                    <SelectValue placeholder="Select region" />
+                                                                    <SelectValue
+                                                                        placeholder={
+                                                                            dict
+                                                                                .modelConfig
+                                                                                .selectRegion
+                                                                        }
+                                                                    />
                                                                </SelectTrigger>
                                                                <SelectContent className="max-h-64">
                                                                    <SelectItem value="us-east-1">
@@ -809,7 +842,7 @@ export function ModelConfigDialog({
                                                                    "h-9 px-4",
                                                                    validationStatus ===
                                                                        "success" &&
-                                                                        "text-emerald-600 border-emerald-200 dark:border-emerald-800",
+                                                                        "text-success border-success/30 bg-success-muted hover:bg-success-muted",
                                                                )}
                                                            >
                                                                {validationStatus ===
@@ -818,11 +851,17 @@ export function ModelConfigDialog({
                                                                ) : validationStatus ===
                                                                  "success" ? (
                                                                    <>
-                                                                        <Check className="h-4 w-4 mr-1.5" />
-                                                                        Verified
+                                                                        <Check className="h-4 w-4 mr-1.5 animate-check-pop" />
+                                                                        {
+                                                                            dict
+                                                                                .modelConfig
+                                                                                .verified
+                                                                        }
                                                                    </>
                                                                ) : (
-                                                                    "Test"
+                                                                    dict
+                                                                        .modelConfig
+                                                                        .test
                                                                )}
                                                            </Button>
                                                            {validationStatus ===
@@ -846,7 +885,11 @@ export function ModelConfigDialog({
                                                                className="text-xs font-medium flex items-center gap-1.5"
                                                            >
                                                                <Key className="h-3.5 w-3.5 text-muted-foreground" />
-                                                                API Key
+                                                                {
+                                                                    dict
+                                                                        .modelConfig
+                                                                        .apiKey
+                                                                }
                                                            </Label>
                                                            <div className="flex gap-2">
                                                                <div className="relative flex-1">
@@ -870,7 +913,11 @@ export function ModelConfigDialog({
                                                                                    .value,
                                                                            )
                                                                        }
-                                                                        placeholder="Enter your API key"
+                                                                        placeholder={
+                                                                            dict
+                                                                                .modelConfig
+                                                                                .enterApiKey
+                                                                        }
                                                                        className="h-9 pr-10 font-mono text-xs"
                                                                    />
                                                                    <button
@@ -914,7 +961,7 @@ export function ModelConfigDialog({
                                                                        "h-9 px-4",
                                                                        validationStatus ===
                                                                            "success" &&
-                                                                            "text-emerald-600 border-emerald-200 dark:border-emerald-800",
+                                                                            "text-success border-success/30 bg-success-muted hover:bg-success-muted",
                                                                    )}
                                                                >
                                                                    {validationStatus ===
@@ -923,11 +970,17 @@ export function ModelConfigDialog({
                                                                    ) : validationStatus ===
                                                                      "success" ? (
                                                                        <>
-                                                                            <Check className="h-4 w-4 mr-1.5" />
-                                                                            Verified
+                                                                            <Check className="h-4 w-4 mr-1.5 animate-check-pop" />
+                                                                            {
+                                                                                dict
+                                                                                    .modelConfig
+                                                                                    .verified
+                                                                            }
                                                                        </>
                                                                    ) : (
-                                                                        "Test"
+                                                                        dict
+                                                                            .modelConfig
+                                                                            .test
                                                                    )}
                                                                </Button>
                                                            </div>
@@ -950,9 +1003,17 @@ export function ModelConfigDialog({
                                                                className="text-xs font-medium flex items-center gap-1.5"
                                                            >
                                                                <Link2 className="h-3.5 w-3.5 text-muted-foreground" />
-                                                                Base URL
+                                                                {
+                                                                    dict
+                                                                        .modelConfig
+                                                                        .baseUrl
+                                                                }
                                                                <span className="text-muted-foreground font-normal">
-                                                                    (optional)
+                                                                    {
+                                                                        dict
+                                                                            .modelConfig
+                                                                            .optional
+                                                                    }
                                                                </span>
                                                            </Label>
                                                            <Input
@@ -974,27 +1035,30 @@ export function ModelConfigDialog({
                                                                            .provider
                                                                    ]
                                                                        .defaultBaseUrl ||
-                                                                    "Custom endpoint URL"
+                                                                    dict
+                                                                        .modelConfig
+                                                                        .customEndpoint
                                                                }
-                                                                className="h-9 font-mono text-xs"
+                                                                className="h-9 rounded-xl font-mono text-xs"
                                                            />
                                                        </div>
                                                    </>
                                                )}
-                                            </div>
-                                        </div>
+                                            </ConfigCard>
+                                        </ConfigSection>

                                        {/* Models Section */}
-                                        <div className="space-y-4">
-                                            <div className="flex items-center justify-between">
-                                                <div className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
-                                                    <Sparkles className="h-4 w-4" />
-                                                    <span>Models</span>
-                                                </div>
+                                        <ConfigSection
+                                            title={dict.modelConfig.models}
+                                            icon={Sparkles}
+                                            action={
                                                <div className="flex items-center gap-2">
                                                    <div className="relative">
                                                        <Input
-                                                            placeholder="Custom model ID..."
+                                                            placeholder={
+                                                                dict.modelConfig
+                                                                    .customModelId
+                                                            }
                                                            value={
                                                                customModelInput
                                                            }
@@ -1003,7 +1067,6 @@ export function ModelConfigDialog({
                                                                    e.target
                                                                        .value,
                                                                )
-                                                                // Clear duplicate error when typing
                                                                if (
                                                                    duplicateError
                                                                ) {
@@ -1032,12 +1095,11 @@ export function ModelConfigDialog({
                                                                }
                                                            }}
                                                            className={cn(
-                                                                "h-8 w-48 font-mono text-xs",
+                                                                "h-8 w-44 rounded-lg font-mono text-xs",
                                                                duplicateError &&
                                                                    "border-destructive focus-visible:ring-destructive",
                                                            )}
                                                        />
-                                                        {/* Show duplicate error for custom model input */}
                                                        {duplicateError && (
                                                            <p className="absolute top-full left-0 mt-1 text-[11px] text-destructive">
                                                                {duplicateError}
@@ -1047,7 +1109,7 @@ export function ModelConfigDialog({
                                                    <Button
                                                        variant="outline"
                                                        size="sm"
-                                                        className="h-8"
+                                                        className="h-8 rounded-lg"
                                                        onClick={() => {
                                                            if (
                                                                customModelInput.trim()
@@ -1084,12 +1146,16 @@ export function ModelConfigDialog({
                                                            0
                                                        }
                                                    >
-                                                        <SelectTrigger className="w-32 h-8 hover:bg-accent">
+                                                        <SelectTrigger className="w-28 h-8 rounded-lg hover:bg-interactive-hover">
                                                            <span className="text-xs">
                                                                {availableSuggestions.length ===
                                                                0
-                                                                    ? "All added"
-                                                                    : "Suggested"}
+                                                                    ? dict
+                                                                          .modelConfig
+                                                                          .allAdded
+                                                                    : dict
+                                                                          .modelConfig
+                                                                          .suggested}
                                                            </span>
                                                        </SelectTrigger>
                                                        <SelectContent className="max-h-72">
@@ -1113,22 +1179,25 @@ export function ModelConfigDialog({
                                                        </SelectContent>
                                                    </Select>
                                                </div>
-                                            </div>
-
+                                            }
+                                        >
                                            {/* Model List */}
-                                            <div className="rounded-xl border bg-card overflow-hidden min-h-[120px]">
+                                            <div className="rounded-2xl border border-border-subtle bg-surface-2/30 overflow-hidden min-h-[120px]">
                                                {selectedProvider.models
                                                    .length === 0 ? (
-                                                    <div className="p-4 text-center h-full flex flex-col items-center justify-center">
-                                                        <div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-muted mb-2">
+                                                    <div className="p-6 text-center h-full flex flex-col items-center justify-center">
+                                                        <div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-surface-2 mb-3">
                                                            <Sparkles className="h-5 w-5 text-muted-foreground" />
                                                        </div>
                                                        <p className="text-sm text-muted-foreground">
-                                                            No models configured
+                                                            {
+                                                                dict.modelConfig
+                                                                    .noModelsConfigured
+                                                            }
                                                        </p>
                                                    </div>
                                                ) : (
-                                                    <div className="divide-y">
+                                                    <div className="divide-y divide-border-subtle">
                                                        {selectedProvider.models.map(
                                                            (model, index) => (
                                                                <div
@@ -1136,16 +1205,7 @@ export function ModelConfigDialog({
                                                                        model.id
                                                                    }
                                                                    className={cn(
-                                                                        "transition-colors hover:bg-muted/30",
-                                                                        index ===
-                                                                            0 &&
-                                                                            "rounded-t-xl",
-                                                                        index ===
-                                                                            selectedProvider
-                                                                                .models
-                                                                                .length -
-                                                                                1 &&
-                                                                            "rounded-b-xl",
+                                                                        "transition-colors duration-150 hover:bg-interactive-hover/50",
                                                                    )}
                                                                >
                                                                    <div className="flex items-center gap-3 p-3 min-w-0">
@@ -1172,8 +1232,8 @@ export function ModelConfigDialog({
                                                                            ) : model.validated ===
                                                                              true ? (
                                                                                // Valid
-                                                                                <div className="w-full h-full rounded-lg bg-emerald-500/10 flex items-center justify-center">
-                                                                                    <Check className="h-4 w-4 text-emerald-500" />
+                                                                                <div className="w-full h-full rounded-lg bg-success-muted flex items-center justify-center">
+                                                                                    <Check className="h-4 w-4 text-success" />
                                                                                </div>
                                                                            ) : model.validated ===
                                                                              false ? (
@@ -1291,7 +1351,9 @@ export function ModelConfigDialog({
                                                                                    !newModelId
                                                                                ) {
                                                                                    showError(
-                                                                                        "Model ID cannot be empty",
+                                                                                        dict
+                                                                                            .modelConfig
+                                                                                            .modelIdEmpty,
                                                                                    )
                                                                                    return
                                                                                }
@@ -1319,7 +1381,9 @@ export function ModelConfigDialog({
                                                                                    )
                                                                                ) {
                                                                                    showError(
-                                                                                        "This model ID already exists",
+                                                                                        dict
+                                                                                            .modelConfig
+                                                                                            .modelIdExists,
                                                                                    )
                                                                                    return
                                                                                }
@@ -1370,36 +1434,20 @@ export function ModelConfigDialog({
                                                    </div>
                                                )}
                                            </div>
-                                        </div>
-
-                                        {/* Danger Zone */}
-                                        <div className="pt-4">
-                                            <Button
-                                                variant="ghost"
-                                                size="sm"
-                                                onClick={() =>
-                                                    setDeleteConfirmOpen(true)
-                                                }
-                                                className="text-muted-foreground hover:text-destructive hover:bg-destructive/10"
-                                            >
-                                                <Trash2 className="h-4 w-4 mr-2" />
-                                                Delete Provider
-                                            </Button>
-                                        </div>
+                                        </ConfigSection>
                                    </div>
                                </ScrollArea>
                            </>
                        ) : (
                            <div className="h-full flex flex-col items-center justify-center p-8 text-center">
-                                <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br from-primary/10 to-primary/5 mb-4">
-                                    <Server className="h-8 w-8 text-primary/60" />
+                                <div className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-surface-2 mb-4">
+                                    <Server className="h-8 w-8 text-muted-foreground" />
                                </div>
-                                <h3 className="font-semibold mb-1">
-                                    Configure AI Providers
+                                <h3 className="font-semibold text-lg tracking-tight mb-1">
+                                    {dict.modelConfig.configureProviders}
                                </h3>
                                <p className="text-sm text-muted-foreground max-w-xs">
-                                    Select a provider from the list or add a new
-                                    one to configure API keys and models
+                                    {dict.modelConfig.selectProviderHint}
                                </p>
                            </div>
                        )}
@@ -1407,11 +1455,24 @@ export function ModelConfigDialog({
                </div>

                {/* Footer */}
-                <div className="px-6 py-3 border-t bg-muted/20">
-                    <p className="text-xs text-muted-foreground text-center flex items-center justify-center gap-1.5">
-                        <Key className="h-3 w-3" />
-                        API keys are stored locally in your browser
-                    </p>
+                <div className="px-6 py-3 border-t border-border-subtle bg-surface-1/30 shrink-0">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                            <Switch
+                                checked={modelConfig.showUnvalidatedModels}
+                                onCheckedChange={
+                                    modelConfig.setShowUnvalidatedModels
+                                }
+                            />
+                            <Label className="text-xs text-muted-foreground cursor-pointer">
+                                {dict.modelConfig.showUnvalidatedModels}
+                            </Label>
+                        </div>
+                        <p className="text-xs text-muted-foreground flex items-center gap-1.5">
+                            <Key className="h-3 w-3" />
+                            {dict.modelConfig.apiKeyStored}
+                        </p>
+                    </div>
                </div>
            </DialogContent>

@@ -1429,19 +1490,16 @@ export function ModelConfigDialog({
                            <AlertCircle className="h-6 w-6 text-destructive" />
                        </div>
                        <AlertDialogTitle className="text-center">
-                            Delete Provider
+                            {dict.modelConfig.deleteProvider}
                        </AlertDialogTitle>
                        <AlertDialogDescription className="text-center">
-                            Are you sure you want to delete{" "}
-                            <span className="font-medium text-foreground">
-                                {selectedProvider
+                            {formatMessage(dict.modelConfig.deleteConfirmDesc, {
+                                name: selectedProvider
                                    ? selectedProvider.name ||
                                      PROVIDER_INFO[selectedProvider.provider]
                                          .label
-                                    : "this provider"}
-                            </span>
-                            ? This will remove all configured models and cannot
-                            be undone.
+                                    : "this provider",
+                            })}
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    {selectedProvider &&
@@ -1451,11 +1509,16 @@ export function ModelConfigDialog({
                                    htmlFor="delete-confirm"
                                    className="text-sm text-muted-foreground"
                                >
-                                    Type &quot;
-                                    {selectedProvider.name ||
-                                        PROVIDER_INFO[selectedProvider.provider]
-                                            .label}
-                                    &quot; to confirm
+                                    {formatMessage(
+                                        dict.modelConfig.typeToConfirm,
+                                        {
+                                            name:
+                                                selectedProvider.name ||
+                                                PROVIDER_INFO[
+                                                    selectedProvider.provider
+                                                ].label,
+                                        },
+                                    )}
                                </Label>
                                <Input
                                    id="delete-confirm"
@@ -1463,13 +1526,17 @@ export function ModelConfigDialog({
                                    onChange={(e) =>
                                        setDeleteConfirmText(e.target.value)
                                    }
-                                    placeholder="Type provider name..."
+                                    placeholder={
+                                        dict.modelConfig.typeProviderName
+                                    }
                                    className="h-9"
                                />
                            </div>
                        )}
                    <AlertDialogFooter>
-                        <AlertDialogCancel>Cancel</AlertDialogCancel>
+                        <AlertDialogCancel>
+                            {dict.modelConfig.cancel}
+                        </AlertDialogCancel>
                        <AlertDialogAction
                            onClick={handleDeleteProvider}
                            disabled={
@@ -1482,7 +1549,7 @@ export function ModelConfigDialog({
                            }
                            className="bg-destructive text-destructive-foreground hover:bg-destructive/90 disabled:opacity-50"
                        >
-                            Delete
+                            {dict.modelConfig.delete}
                        </AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
--- a/components/model-selector.tsx
+++ b/components/model-selector.tsx
@@ -1,7 +1,14 @@
 "use client"

-import { Bot, Check, ChevronDown, Server, Settings2 } from "lucide-react"
-import { useMemo, useState } from "react"
+import {
+    AlertTriangle,
+    Bot,
+    Check,
+    ChevronDown,
+    Server,
+    Settings2,
+} from "lucide-react"
+import { useEffect, useMemo, useRef, useState } from "react"
 import {
    ModelSelectorContent,
    ModelSelectorEmpty,
@@ -16,6 +23,7 @@ import {
    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"

@@ -25,6 +33,7 @@ interface ModelSelectorProps {
    onSelect: (modelId: string | undefined) => void
    onConfigure: () => void
    disabled?: boolean
+    showUnvalidatedModels?: boolean
 }

 // Map our provider names to models.dev logo names
@@ -37,7 +46,9 @@ const PROVIDER_LOGO_MAP: Record<string, string> = {
    openrouter: "openrouter",
    deepseek: "deepseek",
    siliconflow: "siliconflow",
+    sglang: "openai", // SGLang is OpenAI-compatible, use OpenAI logo
    gateway: "vercel",
+    doubao: "bytedance",
 }

 // Group models by providerLabel (handles duplicate providers)
@@ -66,16 +77,20 @@ export function ModelSelector({
    onSelect,
    onConfigure,
    disabled = false,
+    showUnvalidatedModels = false,
 }: ModelSelectorProps) {
+    const dict = useDictionary()
    const [open, setOpen] = useState(false)
-    // Only show validated models in the selector
-    const validatedModels = useMemo(
-        () => models.filter((m) => m.validated === true),
-        [models],
-    )
+    // 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(validatedModels),
-        [validatedModels],
+        () => groupModelsByProvider(displayModels),
+        [displayModels],
    )

    // Find selected model for display
@@ -96,121 +111,192 @@ export function ModelSelector({
    }

    const tooltipContent = selectedModel
-        ? `${selectedModel.modelId} (click to change)`
-        : "Using server default model (click to change)"
+        ? `${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 (
-        <ModelSelectorRoot open={open} onOpenChange={setOpen}>
-            <ModelSelectorTrigger asChild>
-                <ButtonWithTooltip
-                    tooltipContent={tooltipContent}
-                    variant="ghost"
-                    size="sm"
-                    disabled={disabled}
-                    className="hover:bg-accent gap-1.5 h-8 max-w-[180px] px-2"
-                >
-                    <Bot className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
-                    <span className="text-xs truncate">
-                        {selectedModel ? selectedModel.modelId : "Default"}
-                    </span>
-                    <ChevronDown className="h-3 w-3 flex-shrink-0 text-muted-foreground" />
-                </ButtonWithTooltip>
-            </ModelSelectorTrigger>
-            <ModelSelectorContent title="Select Model">
-                <ModelSelectorInput placeholder="Search models..." />
-                <ModelSelectorList>
-                    <ModelSelectorEmpty>
-                        {validatedModels.length === 0 && models.length > 0
-                            ? "No verified models. Test your models first."
-                            : "No models found."}
-                    </ModelSelectorEmpty>
+        <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>

-                    {/* Server Default Option */}
-                    <ModelSelectorGroup heading="Default">
-                        <ModelSelectorItem
-                            value="__server_default__"
-                            onSelect={handleSelect}
-                            className={cn(
-                                "cursor-pointer",
-                                !selectedModelId && "bg-accent",
-                            )}
-                        >
-                            <Check
+                <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(
-                                    "mr-2 h-4 w-4",
-                                    !selectedModelId
-                                        ? "opacity-100"
-                                        : "opacity-0",
+                                    "cursor-pointer",
+                                    !selectedModelId && "bg-accent",
                                )}
-                            />
-                            <Server className="mr-2 h-4 w-4 text-muted-foreground" />
-                            <ModelSelectorName>
-                                Server Default
-                            </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>
-                                    </ModelSelectorItem>
-                                ))}
-                            </ModelSelectorGroup>
-                        ),
-                    )}
+                                <Check
+                                    className={cn(
+                                        "mr-2 h-4 w-4",
+                                        !selectedModelId
+                                            ? "opacity-100"
+                                            : "opacity-0",
+                                    )}
+                                />
+                                <Server className="mr-2 h-4 w-4 text-muted-foreground" />
+                                <ModelSelectorName>
+                                    {dict.modelConfig.serverDefault}
+                                </ModelSelectorName>
+                            </ModelSelectorItem>
+                        </ModelSelectorGroup>

-                    {/* Configure Option */}
-                    <ModelSelectorSeparator />
-                    <ModelSelectorGroup>
-                        <ModelSelectorItem
-                            value="__configure__"
-                            onSelect={handleSelect}
-                            className="cursor-pointer"
-                        >
-                            <Settings2 className="mr-2 h-4 w-4" />
-                            <ModelSelectorName>
-                                Configure Models...
-                            </ModelSelectorName>
-                        </ModelSelectorItem>
-                    </ModelSelectorGroup>
-                    {/* Info text */}
-                    <div className="px-3 py-2 text-xs text-muted-foreground border-t">
-                        Only verified models are shown
-                    </div>
-                </ModelSelectorList>
-            </ModelSelectorContent>
-        </ModelSelectorRoot>
+                        {/* 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>
    )
 }
--- a/components/quota-limit-toast.tsx
+++ b/components/quota-limit-toast.tsx
@@ -1,7 +1,6 @@
 "use client"

-import { Coffee, X } from "lucide-react"
-import Link from "next/link"
+import { Coffee, Settings, X } from "lucide-react"
 import type React from "react"
 import { FaGithub } from "react-icons/fa"
 import { useDictionary } from "@/hooks/use-dictionary"
@@ -12,6 +11,7 @@ interface QuotaLimitToastProps {
    used: number
    limit: number
    onDismiss: () => void
+    onConfigModel?: () => void
 }

 export function QuotaLimitToast({
@@ -19,6 +19,7 @@ export function QuotaLimitToast({
    used,
    limit,
    onDismiss,
+    onConfigModel,
 }: QuotaLimitToastProps) {
    const dict = useDictionary()
    const isTokenLimit = type === "token"
@@ -75,16 +76,36 @@ export function QuotaLimitToast({
                        ? dict.quota.messageToken
                        : dict.quota.messageApi}
                </p>
+                <p
+                    dangerouslySetInnerHTML={{
+                        __html: formatMessage(dict.quota.doubaoSponsorship, {
+                            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 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" />
                    {dict.quota.selfHost}
--- a/components/settings-dialog.tsx
+++ b/components/settings-dialog.tsx
@@ -1,7 +1,8 @@
 "use client"

-import { Moon, Sun } from "lucide-react"
-import { useEffect, useState } from "react"
+import { Github, Info, Moon, Sun, Tag } from "lucide-react"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { Suspense, useEffect, useState } from "react"
 import { Button } from "@/components/ui/button"
 import {
    Dialog,
@@ -12,8 +13,48 @@ import {
 } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    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
@@ -23,6 +64,8 @@ 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"
@@ -36,7 +79,7 @@ function getStoredAccessCodeRequired(): boolean | null {
    return stored === "true"
 }

-export function SettingsDialog({
+function SettingsContent({
    open,
    onOpenChange,
    onCloseProtectionChange,
@@ -44,8 +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)
@@ -53,12 +101,13 @@ export function SettingsDialog({
    const [accessCodeRequired, setAccessCodeRequired] = useState(
        () => getStoredAccessCodeRequired() ?? false,
    )
+    const [currentLang, setCurrentLang] = useState("en")

    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()
@@ -77,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 =
@@ -93,6 +153,21 @@ export function SettingsDialog({
        }
    }, [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

@@ -100,12 +175,15 @@ export function SettingsDialog({
        setIsVerifying(true)

        try {
-            const response = await fetch("/api/verify-access-code", {
-                method: "POST",
-                headers: {
-                    "x-access-code": accessCode.trim(),
+            const response = await fetch(
+                getApiEndpoint("/api/verify-access-code"),
+                {
+                    method: "POST",
+                    headers: {
+                        "x-access-code": accessCode.trim(),
+                    },
                },
-            })
+            )

            const data = await response.json()

@@ -131,20 +209,32 @@ export function SettingsDialog({
    }

    return (
-        <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="sm:max-w-md">
-                <DialogHeader>
-                    <DialogTitle>{dict.settings.title}</DialogTitle>
-                    <DialogDescription>
-                        {dict.settings.description}
-                    </DialogDescription>
-                </DialogHeader>
-                <div className="space-y-4 py-2">
+        <DialogContent className="sm:max-w-lg p-0 gap-0">
+            {/* Header */}
+            <DialogHeader className="px-6 pt-6 pb-4">
+                <DialogTitle>{dict.settings.title}</DialogTitle>
+                <DialogDescription className="mt-1">
+                    {dict.settings.description}
+                </DialogDescription>
+            </DialogHeader>
+
+            {/* Content */}
+            <div className="px-6 pb-6">
+                <div className="divide-y divide-border-subtle">
+                    {/* Access Code (conditional) */}
                    {accessCodeRequired && (
-                        <div className="space-y-2">
-                            <Label htmlFor="access-code">
-                                {dict.settings.accessCode}
-                            </Label>
+                        <div className="py-4 first:pt-0 space-y-3">
+                            <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"
@@ -158,38 +248,60 @@ export function SettingsDialog({
                                        dict.settings.accessCodePlaceholder
                                    }
                                    autoComplete="off"
+                                    className="h-9"
                                />
                                <Button
                                    onClick={handleSave}
                                    disabled={isVerifying || !accessCode.trim()}
+                                    className="h-9 px-4 rounded-xl"
                                >
                                    {isVerifying ? "..." : dict.common.save}
                                </Button>
                            </div>
-                            <p className="text-[0.8rem] text-muted-foreground">
-                                {dict.settings.accessCodeDescription}
-                            </p>
                            {error && (
-                                <p className="text-[0.8rem] text-destructive">
+                                <p className="text-xs text-destructive">
                                    {error}
                                </p>
                            )}
                        </div>
                    )}
-                    <div className="flex items-center justify-between">
-                        <div className="space-y-0.5">
-                            <Label htmlFor="theme-toggle">
-                                {dict.settings.theme}
-                            </Label>
-                            <p className="text-[0.8rem] text-muted-foreground">
-                                {dict.settings.themeDescription}
-                            </p>
-                        </div>
+
+                    {/* Language */}
+                    <SettingItem
+                        label={dict.settings.language}
+                        description={dict.settings.languageDescription}
+                    >
+                        <Select
+                            value={currentLang}
+                            onValueChange={changeLanguage}
+                        >
+                            <SelectTrigger
+                                id="language-select"
+                                className="w-[120px] h-9 rounded-xl"
+                            >
+                                <SelectValue />
+                            </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" />
@@ -197,42 +309,35 @@ export function SettingsDialog({
                                <Moon className="h-4 w-4" />
                            )}
                        </Button>
-                    </div>
+                    </SettingItem>

-                    <div className="flex items-center justify-between">
-                        <div className="space-y-0.5">
-                            <Label htmlFor="drawio-ui">
-                                {dict.settings.drawioStyle}
-                            </Label>
-                            <p className="text-[0.8rem] text-muted-foreground">
-                                {dict.settings.drawioStyleDescription}{" "}
-                                {drawioUi === "min"
-                                    ? dict.settings.minimal
-                                    : dict.settings.sketch}
-                            </p>
-                        </div>
+                    {/* Draw.io Style */}
+                    <SettingItem
+                        label={dict.settings.drawioStyle}
+                        description={`${dict.settings.drawioStyleDescription} ${
+                            drawioUi === "min"
+                                ? dict.settings.minimal
+                                : dict.settings.sketch
+                        }`}
+                    >
                        <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"
                        >
                            {dict.settings.switchTo}{" "}
                            {drawioUi === "min"
                                ? dict.settings.sketch
                                : dict.settings.minimal}
                        </Button>
-                    </div>
+                    </SettingItem>

-                    <div className="flex items-center justify-between">
-                        <div className="space-y-0.5">
-                            <Label htmlFor="close-protection">
-                                {dict.settings.closeProtection}
-                            </Label>
-                            <p className="text-[0.8rem] text-muted-foreground">
-                                {dict.settings.closeProtectionDescription}
-                            </p>
-                        </div>
+                    {/* Close Protection */}
+                    <SettingItem
+                        label={dict.settings.closeProtection}
+                        description={dict.settings.closeProtectionDescription}
+                    >
                        <Switch
                            id="close-protection"
                            checked={closeProtection}
@@ -245,14 +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>
-                <div className="pt-4 border-t border-border/50">
-                    <p className="text-[0.75rem] text-muted-foreground text-center">
-                        Version {process.env.APP_VERSION}
-                    </p>
+            </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="/about"
+                                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" />
+                                About
+                            </a>
+                        </>
+                    )}
                </div>
-            </DialogContent>
+            </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>
    )
 }
--- a/components/ui/dialog.tsx
+++ b/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}
    />
  )
--- a/components/ui/input.tsx
+++ b/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",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        // Base styles
+        "flex h-10 w-full min-w-0 rounded-xl px-3.5 py-2",
+        "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}
--- a/contexts/diagram-context.tsx
+++ b/contexts/diagram-context.tsx
@@ -5,6 +5,7 @@ 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 { getApiEndpoint } from "@/lib/base-path"
 import { extractDiagramXML, validateAndFixXml } from "../lib/utils"

 interface DiagramContextType {
@@ -329,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 }),
--- a/docker-compose.yml
+++ b/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]
--- a/docs/Cloudflare_Deploy.md
+++ b/docs/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.
--- a/docs/README_CN.md
+++ b/docs/README_CN.md
@@ -19,6 +19,8 @@

 一个集成了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

 ## 目录
@@ -127,8 +129,6 @@ claude mcp add drawio -- npx @next-ai-drawio/mcp-server@latest

 [![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运行（推荐）
@@ -186,7 +186,7 @@ cp env.example .env.local

 编辑 `.env.local` 并配置您选择的提供商：

-   将 `AI_PROVIDER` 设置为您选择的提供商（bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow）
+-   将 `AI_PROVIDER` 设置为您选择的提供商（bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, doubao）
 -   将 `AI_MODEL` 设置为您要使用的特定模型
 -   添加您的提供商所需的API密钥
 -   `TEMPERATURE`：可选的温度设置（例如 `0` 表示确定性输出）。对于不支持此参数的模型（如推理模型），请不要设置。
@@ -218,6 +218,7 @@ npm run dev

 ## 多提供商支持

+-   [字节跳动豆包](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
@@ -268,6 +269,8 @@ 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或联系维护者：
--- a/docs/README_JA.md
+++ b/docs/README_JA.md
@@ -19,6 +19,8 @@

 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

 ## 目次
@@ -127,8 +129,6 @@ Claudeにダイアグラムの作成を依頼：

 [![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で実行（推奨）
@@ -186,7 +186,7 @@ cp env.example .env.local

 `.env.local`を編集して選択したプロバイダーを設定：

-   `AI_PROVIDER`を選択したプロバイダーに設定（bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow）
+-   `AI_PROVIDER`を選択したプロバイダーに設定（bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, doubao）
 -   `AI_MODEL`を使用する特定のモデルに設定
 -   プロバイダーに必要なAPIキーを追加
 -   `TEMPERATURE`：オプションの温度設定（例：`0`で決定論的な出力）。温度をサポートしないモデル（推論モデルなど）では設定しないでください。
@@ -218,6 +218,7 @@ Next.jsアプリをデプロイする最も簡単な方法は、Next.jsの作成

 ## マルチプロバイダーサポート

+-   [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
@@ -268,6 +269,8 @@ 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を開くか、メンテナーにご連絡ください：
--- a/docs/ai-providers.md
+++ b/docs/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,6 +85,8 @@ Optional custom endpoint (defaults to the recommended domain):
 SILICONFLOW_BASE_URL=https://api.siliconflow.com/v1  # or https://api.siliconflow.cn/v1
 ```

+
+
 ### Azure OpenAI

 ```bash
@@ -179,7 +190,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, gateway
+AI_PROVIDER=google  # or: openai, anthropic, deepseek, siliconflow, doubao, azure, bedrock, openrouter, ollama, gateway
 ```

 ## Model Capability Requirements
--- a/docs/offline-deployment.md
+++ b/docs/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.

--- a/docs/shape-libraries/alibaba_cloud.md
+++ b/docs/shape-libraries/alibaba_cloud.md
@@ -6,7 +6,7 @@
 ## Usage

 ```xml
-<mxCell value="label" style="shape=mxgraph.alibaba_cloud.{shape};fillColor=#FF6A00;strokeColor=none;" vertex="1" parent="1">
+<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>
 ```
--- a/docs/shape-libraries/atlassian.md
+++ b/docs/shape-libraries/atlassian.md
@@ -6,7 +6,7 @@
 ## Usage

 ```xml
-<mxCell value="label" style="image;aspect=fixed;image=img/lib/atlassian/Jira_Logo.svg;" vertex="1" parent="1">
+<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>
 ```
--- a/docs/shape-libraries/aws4.md
+++ b/docs/shape-libraries/aws4.md
@@ -6,7 +6,7 @@
 ## Usage

 ```xml
-<mxCell value="label" style="shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.{shape};fillColor=#ED7100;strokeColor=#ffffff;" vertex="1" parent="1">
+<mxCell value="label" style="shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.{shape};fillColor=#ED7100;strokeColor=#ffffff;verticalLabelPosition=bottom;verticalAlign=top;align=center;" vertex="1" parent="1">
  <mxGeometry x="0" y="0" width="60" height="60" as="geometry" />
 </mxCell>
 ```
--- a/docs/shape-libraries/azure2.md
+++ b/docs/shape-libraries/azure2.md
@@ -6,7 +6,7 @@
 ## Usage

 ```xml
-<mxCell value="label" style="image;aspect=fixed;image=img/lib/azure2/compute/Virtual_Machine.svg;" vertex="1" parent="1">
+<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>
 ```
--- a/docs/shape-libraries/cisco19.md
+++ b/docs/shape-libraries/cisco19.md
@@ -6,7 +6,7 @@
 ## Usage

 ```xml
-<mxCell value="label" style="shape=mxgraph.cisco19.rect;prIcon={shape};fillColor=#00bceb;strokeColor=none;" vertex="1" parent="1">
+<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>
 ```
--- a/docs/shape-libraries/citrix.md
+++ b/docs/shape-libraries/citrix.md
@@ -6,7 +6,7 @@
 ## Usage

 ```xml
-<mxCell value="label" style="shape=mxgraph.citrix.{shape};fillColor=#00A4E4;strokeColor=none;" vertex="1" parent="1">
+<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>
 ```
--- a/docs/shape-libraries/gcp2.md
+++ b/docs/shape-libraries/gcp2.md
@@ -6,7 +6,7 @@
 ## Usage

 ```xml
-<mxCell value="label" style="shape=mxgraph.gcp2.{shape};fillColor=#4285F4;strokeColor=none;" vertex="1" parent="1">
+<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>
 ```
--- a/docs/shape-libraries/kubernetes.md
+++ b/docs/shape-libraries/kubernetes.md
@@ -6,7 +6,7 @@
 ## Usage

 ```xml
-<mxCell value="label" style="shape=mxgraph.kubernetes.icon;prIcon={shape};fillColor=#326CE5;strokeColor=none;" vertex="1" parent="1">
+<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>
 ```
--- a/docs/shape-libraries/mscae.md
+++ b/docs/shape-libraries/mscae.md
@@ -6,7 +6,7 @@
 ## Usage

 ```xml
-<mxCell value="label" style="shape=mxgraph.mscae.cloud.azure;fillColor=#0078D4;strokeColor=none;" vertex="1" parent="1">
+<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>
 ```
--- a/docs/shape-libraries/network.md
+++ b/docs/shape-libraries/network.md
@@ -6,7 +6,7 @@
 ## Usage

 ```xml
-<mxCell value="label" style="shape=mxgraph.networks.server;fillColor=#29AAE1;strokeColor=none;" vertex="1" parent="1">
+<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>
 ```
--- a/docs/shape-libraries/openstack.md
+++ b/docs/shape-libraries/openstack.md
@@ -6,7 +6,7 @@
 ## Usage

 ```xml
-<mxCell value="label" style="shape=mxgraph.openstack.{shape};fillColor=#3F51B5;strokeColor=none;" vertex="1" parent="1">
+<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>
 ```
--- a/docs/shape-libraries/salesforce.md
+++ b/docs/shape-libraries/salesforce.md
@@ -6,7 +6,7 @@
 ## Usage

 ```xml
-<mxCell value="label" style="shape=mxgraph.salesforce.analytics;fillColor=#7f8de1;strokeColor=none;" vertex="1" parent="1">
+<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>
 ```
--- a/docs/shape-libraries/sap.md
+++ b/docs/shape-libraries/sap.md
@@ -6,7 +6,7 @@
 ## Usage

 ```xml
-<mxCell value="label" style="image;aspect=fixed;image=img/lib/sap/SAP_Logo.svg;" vertex="1" parent="1">
+<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>
 ```
--- a/docs/shape-libraries/vvd.md
+++ b/docs/shape-libraries/vvd.md
@@ -6,7 +6,7 @@
 ## Usage

 ```xml
-<mxCell value="label" style="shape=mxgraph.vvd.{shape};fillColor=#00AEEF;strokeColor=none;" vertex="1" parent="1">
+<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>
 ```
--- a/docs/shape-libraries/webicons.md
+++ b/docs/shape-libraries/webicons.md
@@ -6,7 +6,7 @@
 ## Usage

 ```xml
-<mxCell value="label" style="shape=mxgraph.webicons.{shape};fillColor=#3b5998;strokeColor=none;" vertex="1" parent="1">
+<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>
 ```
--- a/electron/electron-builder.yml
+++ b/electron/electron-builder.yml
--- a/electron/electron.d.ts
+++ b/electron/electron.d.ts
--- a/electron/main/port-manager.ts
+++ b/electron/main/port-manager.ts
@@ -3,16 +3,16 @@ 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 port range (will find first available)
-    production: {
-        min: 10000,
-        max: 65535,
-    },
-    // Maximum attempts to find an available port
+    // 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,
 }

@@ -36,19 +36,11 @@ export function isPortAvailable(port: number): Promise<boolean> {
    })
 }

-/**
- * Generate a random port within the production range
- */
-function getRandomPort(): number {
-    const { min, max } = PORT_CONFIG.production
-    return Math.floor(Math.random() * (max - min + 1)) + min
-}
-
 /**
 * Find an available port
 * - In development: uses fixed port (6002)
- * - In production: finds a random available port
- * - If a port was previously allocated, verifies it's still available
+ * - 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
@@ -56,6 +48,9 @@ function getRandomPort(): number {
 */
 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) {
@@ -69,29 +64,22 @@ export async function findAvailablePort(reuseExisting = true): Promise<number> {
        allocatedPort = null
    }

-    if (isDev) {
-        // Development mode: use fixed port
-        const port = PORT_CONFIG.development
-        const available = await isPortAvailable(port)
-        if (available) {
-            allocatedPort = port
-            return port
-        }
-        console.warn(
-            `Development port ${port} is in use, finding alternative...`,
-        )
+    // Try preferred port first
+    if (await isPortAvailable(preferredPort)) {
+        allocatedPort = preferredPort
+        return preferredPort
    }

-    // Production mode or dev port unavailable: find random available port
-    for (let attempt = 0; attempt < PORT_CONFIG.maxAttempts; attempt++) {
-        const port = isDev
-            ? PORT_CONFIG.development + attempt + 1
-            : getRandomPort()
+    console.warn(
+        `Preferred port ${preferredPort} is in use, finding alternative...`,
+    )

-        const available = await isPortAvailable(port)
-        if (available) {
+    // 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 port: ${port}`)
+            console.log(`Allocated fallback port: ${port}`)
            return port
        }
    }
--- a/electron/settings/index.html
+++ b/electron/settings/index.html
@@ -9,6 +9,12 @@
 </head>
 <body>
    <div class="container">
+        <div class="deprecation-notice">
+            <strong>⚠️ Deprecation Notice</strong>
+            <p>This settings panel will be removed in a future update.</p>
+            <p>Please use the <strong>AI Model Configuration</strong> button (left of the Send button in the chat panel) to configure your AI providers. Your settings there will persist across updates.</p>
+        </div>
+
        <h1>Configuration Presets</h1>

        <div class="section">
--- a/electron/settings/settings.css
+++ b/electron/settings/settings.css
@@ -24,6 +24,39 @@
    }
 }

+.deprecation-notice {
+    background-color: #fff3cd;
+    border: 1px solid #ffc107;
+    border-radius: 8px;
+    padding: 16px;
+    margin-bottom: 20px;
+}
+
+.deprecation-notice strong {
+    color: #856404;
+    display: block;
+    margin-bottom: 8px;
+    font-size: 14px;
+}
+
+.deprecation-notice p {
+    color: #856404;
+    font-size: 13px;
+    margin: 4px 0;
+}
+
+@media (prefers-color-scheme: dark) {
+    .deprecation-notice {
+        background-color: #332701;
+        border-color: #665200;
+    }
+
+    .deprecation-notice strong,
+    .deprecation-notice p {
+        color: #ffc107;
+    }
+}
+
 * {
    margin: 0;
    padding: 0;
--- a/env.example
+++ b/env.example
@@ -68,6 +68,14 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
 # SILICONFLOW_API_KEY=sk-...
 # SILICONFLOW_BASE_URL=https://api.siliconflow.com/v1  # Optional: switch to https://api.siliconflow.cn/v1 if needed

+# SGLang Configuration (OpenAI-compatible)
+# SGLANG_API_KEY=your-sglang-api-key
+# SGLANG_BASE_URL=http://127.0.0.1:8000/v1  # Your SGLang endpoint
+
+# ByteDance Doubao Configuration (via Volcengine)
+# DOUBAO_API_KEY=your-doubao-api-key
+# DOUBAO_BASE_URL=https://ark.cn-beijing.volces.com/api/v3  # ByteDance Volcengine endpoint
+
 # Vercel AI Gateway Configuration
 # Get your API key from: https://vercel.com/ai-gateway
 # Model format: "provider/model" e.g., "openai/gpt-4o", "anthropic/claude-sonnet-4-5"
@@ -93,6 +101,12 @@ AI_MODEL=global.anthropic.claude-sonnet-4-5-20250929-v1:0
 # NEXT_PUBLIC_DRAWIO_BASE_URL=https://embed.diagrams.net  # Default: https://embed.diagrams.net
 # Use this to point to a self-hosted draw.io instance

+# Subdirectory Deployment (Optional)
+# For deploying to a subdirectory (e.g., https://example.com/nextaidrawio)
+# Set this to your subdirectory path with leading slash (e.g., /nextaidrawio)
+# Leave empty for root deployment (default)
+# NEXT_PUBLIC_BASE_PATH=/nextaidrawio
+
 # PDF Input Feature (Optional)
 # Enable PDF file upload to extract text and generate diagrams
 # Enabled by default. Set to "false" to disable.
--- a/hooks/use-diagram-tool-handlers.ts
+++ b/hooks/use-diagram-tool-handlers.ts
@@ -0,0 +1,383 @@
+import type { MutableRefObject } from "react"
+import { isMxCellXmlComplete, wrapWithMxFile } from "@/lib/utils"
+
+const DEBUG = process.env.NODE_ENV === "development"
+
+interface ToolCall {
+    toolCallId: string
+    toolName: string
+    input: unknown
+}
+
+type AddToolOutputSuccess = {
+    tool: string
+    toolCallId: string
+    state?: "output-available"
+    output: string
+    errorText?: undefined
+}
+
+type AddToolOutputError = {
+    tool: string
+    toolCallId: string
+    state: "output-error"
+    output?: undefined
+    errorText: string
+}
+
+type AddToolOutputParams = AddToolOutputSuccess | AddToolOutputError
+
+type AddToolOutputFn = (params: AddToolOutputParams) => void
+
+interface DiagramOperation {
+    operation: "update" | "add" | "delete"
+    cell_id: string
+    new_xml?: string
+}
+
+interface UseDiagramToolHandlersParams {
+    partialXmlRef: MutableRefObject<string>
+    editDiagramOriginalXmlRef: MutableRefObject<Map<string, string>>
+    chartXMLRef: MutableRefObject<string>
+    onDisplayChart: (xml: string, skipValidation?: boolean) => string | null
+    onFetchChart: (saveToHistory?: boolean) => Promise<string>
+    onExport: () => void
+}
+
+/**
+ * Hook that creates the onToolCall handler for diagram-related tools.
+ * Handles display_diagram, edit_diagram, and append_diagram tools.
+ *
+ * Note: addToolOutput is passed at call time (not hook init) because
+ * it comes from useChat which creates a circular dependency.
+ */
+export function useDiagramToolHandlers({
+    partialXmlRef,
+    editDiagramOriginalXmlRef,
+    chartXMLRef,
+    onDisplayChart,
+    onFetchChart,
+    onExport,
+}: UseDiagramToolHandlersParams) {
+    const handleToolCall = async (
+        { toolCall }: { toolCall: ToolCall },
+        addToolOutput: AddToolOutputFn,
+    ) => {
+        if (DEBUG) {
+            console.log(
+                `[onToolCall] Tool: ${toolCall.toolName}, CallId: ${toolCall.toolCallId}`,
+            )
+        }
+
+        if (toolCall.toolName === "display_diagram") {
+            await handleDisplayDiagram(toolCall, addToolOutput)
+        } else if (toolCall.toolName === "edit_diagram") {
+            await handleEditDiagram(toolCall, addToolOutput)
+        } else if (toolCall.toolName === "append_diagram") {
+            handleAppendDiagram(toolCall, addToolOutput)
+        }
+    }
+
+    const handleDisplayDiagram = async (
+        toolCall: ToolCall,
+        addToolOutput: AddToolOutputFn,
+    ) => {
+        const { xml } = toolCall.input as { xml: string }
+
+        // DEBUG: Log raw input to diagnose false truncation detection
+        if (DEBUG) {
+            console.log(
+                "[display_diagram] XML ending (last 100 chars):",
+                xml.slice(-100),
+            )
+            console.log("[display_diagram] XML length:", xml.length)
+        }
+
+        // Check if XML is truncated (incomplete mxCell indicates truncated output)
+        const isTruncated = !isMxCellXmlComplete(xml)
+        if (DEBUG) {
+            console.log("[display_diagram] isTruncated:", isTruncated)
+        }
+
+        if (isTruncated) {
+            // Store the partial XML for continuation via append_diagram
+            partialXmlRef.current = xml
+
+            // Tell LLM to use append_diagram to continue
+            const partialEnding = partialXmlRef.current.slice(-500)
+            addToolOutput({
+                tool: "display_diagram",
+                toolCallId: toolCall.toolCallId,
+                state: "output-error",
+                errorText: `Output was truncated due to length limits. Use the append_diagram tool to continue.
+
+Your output ended with:
+\`\`\`
+${partialEnding}
+\`\`\`
+
+NEXT STEP: Call append_diagram with the continuation XML.
+- Do NOT include wrapper tags or root cells (id="0", id="1")
+- Start from EXACTLY where you stopped
+- Complete all remaining mxCell elements`,
+            })
+            return
+        }
+
+        // Complete XML received - use it directly
+        // (continuation is now handled via append_diagram tool)
+        const finalXml = xml
+        partialXmlRef.current = "" // Reset any partial from previous truncation
+
+        // Wrap raw XML with full mxfile structure for draw.io
+        const fullXml = wrapWithMxFile(finalXml)
+
+        // loadDiagram validates and returns error if invalid
+        const validationError = onDisplayChart(fullXml)
+
+        if (validationError) {
+            console.warn("[display_diagram] Validation error:", validationError)
+            // Return error to model - sendAutomaticallyWhen will trigger retry
+            if (DEBUG) {
+                console.log(
+                    "[display_diagram] Adding tool output with state: output-error",
+                )
+            }
+            addToolOutput({
+                tool: "display_diagram",
+                toolCallId: toolCall.toolCallId,
+                state: "output-error",
+                errorText: `${validationError}
+
+Please fix the XML issues and call display_diagram again with corrected XML.
+
+Your failed XML:
+\`\`\`xml
+${finalXml}
+\`\`\``,
+            })
+        } else {
+            // Success - diagram will be rendered by chat-message-display
+            if (DEBUG) {
+                console.log(
+                    "[display_diagram] Success! Adding tool output with state: output-available",
+                )
+            }
+            addToolOutput({
+                tool: "display_diagram",
+                toolCallId: toolCall.toolCallId,
+                output: "Successfully displayed the diagram.",
+            })
+            if (DEBUG) {
+                console.log(
+                    "[display_diagram] Tool output added. Diagram should be visible now.",
+                )
+            }
+        }
+    }
+
+    const handleEditDiagram = async (
+        toolCall: ToolCall,
+        addToolOutput: AddToolOutputFn,
+    ) => {
+        const { operations } = toolCall.input as {
+            operations: DiagramOperation[]
+        }
+
+        let currentXml = ""
+        try {
+            // Use the original XML captured during streaming (shared with chat-message-display)
+            // This ensures we apply operations to the same base XML that streaming used
+            const originalXml = editDiagramOriginalXmlRef.current.get(
+                toolCall.toolCallId,
+            )
+            if (originalXml) {
+                currentXml = originalXml
+            } else {
+                // Fallback: use chartXML from ref if streaming didn't capture original
+                const cachedXML = chartXMLRef.current
+                if (cachedXML) {
+                    currentXml = cachedXML
+                } else {
+                    // Last resort: export from iframe
+                    currentXml = await onFetchChart(false)
+                }
+            }
+
+            const { applyDiagramOperations } = await import("@/lib/utils")
+            const { result: editedXml, errors } = applyDiagramOperations(
+                currentXml,
+                operations,
+            )
+
+            // Check for operation errors
+            if (errors.length > 0) {
+                const errorMessages = errors
+                    .map(
+                        (e) =>
+                            `- ${e.type} on cell_id="${e.cellId}": ${e.message}`,
+                    )
+                    .join("\n")
+
+                addToolOutput({
+                    tool: "edit_diagram",
+                    toolCallId: toolCall.toolCallId,
+                    state: "output-error",
+                    errorText: `Some operations failed:\n${errorMessages}
+
+Current diagram XML:
+\`\`\`xml
+${currentXml}
+\`\`\`
+
+Please check the cell IDs and retry.`,
+                })
+                // Clean up the shared original XML ref
+                editDiagramOriginalXmlRef.current.delete(toolCall.toolCallId)
+                return
+            }
+
+            // loadDiagram validates and returns error if invalid
+            const validationError = onDisplayChart(editedXml)
+            if (validationError) {
+                console.warn(
+                    "[edit_diagram] Validation error:",
+                    validationError,
+                )
+                addToolOutput({
+                    tool: "edit_diagram",
+                    toolCallId: toolCall.toolCallId,
+                    state: "output-error",
+                    errorText: `Edit produced invalid XML: ${validationError}
+
+Current diagram XML:
+\`\`\`xml
+${currentXml}
+\`\`\`
+
+Please fix the operations to avoid structural issues.`,
+                })
+                // Clean up the shared original XML ref
+                editDiagramOriginalXmlRef.current.delete(toolCall.toolCallId)
+                return
+            }
+            onExport()
+            addToolOutput({
+                tool: "edit_diagram",
+                toolCallId: toolCall.toolCallId,
+                output: `Successfully applied ${operations.length} operation(s) to the diagram.`,
+            })
+            // Clean up the shared original XML ref
+            editDiagramOriginalXmlRef.current.delete(toolCall.toolCallId)
+        } catch (error) {
+            console.error("[edit_diagram] Failed:", error)
+
+            const errorMessage =
+                error instanceof Error ? error.message : String(error)
+
+            addToolOutput({
+                tool: "edit_diagram",
+                toolCallId: toolCall.toolCallId,
+                state: "output-error",
+                errorText: `Edit failed: ${errorMessage}
+
+Current diagram XML:
+\`\`\`xml
+${currentXml || "No XML available"}
+\`\`\`
+
+Please check cell IDs and retry, or use display_diagram to regenerate.`,
+            })
+            // Clean up the shared original XML ref even on error
+            editDiagramOriginalXmlRef.current.delete(toolCall.toolCallId)
+        }
+    }
+
+    const handleAppendDiagram = (
+        toolCall: ToolCall,
+        addToolOutput: AddToolOutputFn,
+    ) => {
+        const { xml } = toolCall.input as { xml: string }
+
+        // Detect if LLM incorrectly started fresh instead of continuing
+        // LLM should only output bare mxCells now, so wrapper tags indicate error
+        const trimmed = xml.trim()
+        const isFreshStart =
+            trimmed.startsWith("<mxGraphModel") ||
+            trimmed.startsWith("<root") ||
+            trimmed.startsWith("<mxfile") ||
+            trimmed.startsWith('<mxCell id="0"') ||
+            trimmed.startsWith('<mxCell id="1"')
+
+        if (isFreshStart) {
+            addToolOutput({
+                tool: "append_diagram",
+                toolCallId: toolCall.toolCallId,
+                state: "output-error",
+                errorText: `ERROR: You started fresh with wrapper tags. Do NOT include wrapper tags or root cells (id="0", id="1").
+
+Continue from EXACTLY where the partial ended:
+\`\`\`
+${partialXmlRef.current.slice(-500)}
+\`\`\`
+
+Start your continuation with the NEXT character after where it stopped.`,
+            })
+            return
+        }
+
+        // Append to accumulated XML
+        partialXmlRef.current += xml
+
+        // Check if XML is now complete (last mxCell is complete)
+        const isComplete = isMxCellXmlComplete(partialXmlRef.current)
+
+        if (isComplete) {
+            // Wrap and display the complete diagram
+            const finalXml = partialXmlRef.current
+            partialXmlRef.current = "" // Reset
+
+            const fullXml = wrapWithMxFile(finalXml)
+            const validationError = onDisplayChart(fullXml)
+
+            if (validationError) {
+                addToolOutput({
+                    tool: "append_diagram",
+                    toolCallId: toolCall.toolCallId,
+                    state: "output-error",
+                    errorText: `Validation error after assembly: ${validationError}
+
+Assembled XML:
+\`\`\`xml
+${finalXml.substring(0, 2000)}...
+\`\`\`
+
+Please use display_diagram with corrected XML.`,
+                })
+            } else {
+                addToolOutput({
+                    tool: "append_diagram",
+                    toolCallId: toolCall.toolCallId,
+                    output: "Diagram assembly complete and displayed successfully.",
+                })
+            }
+        } else {
+            // Still incomplete - signal to continue
+            addToolOutput({
+                tool: "append_diagram",
+                toolCallId: toolCall.toolCallId,
+                state: "output-error",
+                errorText: `XML still incomplete (mxCell not closed). Call append_diagram again to continue.
+
+Current ending:
+\`\`\`
+${partialXmlRef.current.slice(-500)}
+\`\`\`
+
+Continue from EXACTLY where you stopped.`,
+            })
+        }
+    }
+
+    return { handleToolCall }
+}
--- a/hooks/use-model-config.ts
+++ b/hooks/use-model-config.ts
@@ -109,9 +109,11 @@ export interface UseModelConfigReturn {
    models: FlattenedModel[]
    selectedModel: FlattenedModel | undefined
    selectedModelId: string | undefined
+    showUnvalidatedModels: boolean

    // Actions
    setSelectedModelId: (modelId: string | undefined) => void
+    setShowUnvalidatedModels: (show: boolean) => void
    addProvider: (provider: ProviderName) => ProviderConfig
    updateProvider: (
        providerId: string,
@@ -160,6 +162,13 @@ export function useModelConfig(): UseModelConfigReturn {
        }))
    }, [])

+    const setShowUnvalidatedModels = useCallback((show: boolean) => {
+        setConfig((prev) => ({
+            ...prev,
+            showUnvalidatedModels: show,
+        }))
+    }, [])
+
    const addProvider = useCallback(
        (provider: ProviderName): ProviderConfig => {
            const newProvider = createProviderConfig(provider)
@@ -278,7 +287,9 @@ export function useModelConfig(): UseModelConfigReturn {
        models,
        selectedModel,
        selectedModelId: config.selectedModelId,
+        showUnvalidatedModels: config.showUnvalidatedModels ?? false,
        setSelectedModelId,
+        setShowUnvalidatedModels,
        addProvider,
        updateProvider,
        deleteProvider,
--- a/instrumentation.ts
+++ b/instrumentation.ts
@@ -14,19 +14,14 @@ export function register() {
        publicKey: process.env.LANGFUSE_PUBLIC_KEY,
        secretKey: process.env.LANGFUSE_SECRET_KEY,
        baseUrl: process.env.LANGFUSE_BASEURL,
-        // Filter out Next.js HTTP request spans so AI SDK spans become root traces
+        // Whitelist approach: only export AI-related spans
        shouldExportSpan: ({ otelSpan }) => {
            const spanName = otelSpan.name
-            // Skip Next.js HTTP infrastructure spans
-            if (
-                spanName.startsWith("POST /") ||
-                spanName.startsWith("GET /") ||
-                spanName.includes("BaseServer") ||
-                spanName.includes("handleRequest")
-            ) {
-                return false
+            // Only export AI SDK spans (ai.*) and our explicit "chat" wrapper
+            if (spanName === "chat" || spanName.startsWith("ai.")) {
+                return true
            }
-            return true
+            return false
        },
    })

@@ -36,4 +31,5 @@ export function register() {

    // Register globally so AI SDK's telemetry also uses this processor
    tracerProvider.register()
+    console.log("[Langfuse] Instrumentation initialized successfully")
 }
--- a/lib/ai-providers.ts
+++ b/lib/ai-providers.ts
@@ -19,7 +19,9 @@ export type ProviderName =
    | "openrouter"
    | "deepseek"
    | "siliconflow"
+    | "sglang"
    | "gateway"
+    | "doubao"

 interface ModelConfig {
    model: any
@@ -50,7 +52,9 @@ const ALLOWED_CLIENT_PROVIDERS: ProviderName[] = [
    "openrouter",
    "deepseek",
    "siliconflow",
+    "sglang",
    "gateway",
+    "doubao",
 ]

 // Bedrock provider options for Anthropic beta features
@@ -93,8 +97,8 @@ function parseIntSafe(
 * Supports various AI SDK providers with their unique configuration options
 *
 * Environment variables:
- * - OPENAI_REASONING_EFFORT: OpenAI reasoning effort level (minimal/low/medium/high) - for o1/o3/gpt-5
- * - OPENAI_REASONING_SUMMARY: OpenAI reasoning summary (none/brief/detailed) - auto-enabled for o1/o3/gpt-5
+ * - OPENAI_REASONING_EFFORT: OpenAI reasoning effort level (minimal/low/medium/high) - for o1/o3/o4/gpt-5
+ * - OPENAI_REASONING_SUMMARY: OpenAI reasoning summary (auto/detailed) - auto-enabled for o1/o3/o4/gpt-5
 * - ANTHROPIC_THINKING_BUDGET_TOKENS: Anthropic thinking budget in tokens (1024-64000)
 * - ANTHROPIC_THINKING_TYPE: Anthropic thinking type (enabled)
 * - GOOGLE_THINKING_BUDGET: Google Gemini 2.5 thinking budget in tokens (1024-100000)
@@ -116,18 +120,19 @@ function buildProviderOptions(
            const reasoningEffort = process.env.OPENAI_REASONING_EFFORT
            const reasoningSummary = process.env.OPENAI_REASONING_SUMMARY

-            // OpenAI reasoning models (o1, o3, gpt-5) need reasoningSummary to return thoughts
+            // OpenAI reasoning models (o1, o3, o4, gpt-5) need reasoningSummary to return thoughts
            if (
                modelId &&
                (modelId.includes("o1") ||
                    modelId.includes("o3") ||
+                    modelId.includes("o4") ||
                    modelId.includes("gpt-5"))
            ) {
                options.openai = {
-                    // Auto-enable reasoning summary for reasoning models (default: detailed)
+                    // Auto-enable reasoning summary for reasoning models
+                    // Use 'auto' as default since not all models support 'detailed'
                    reasoningSummary:
-                        (reasoningSummary as "none" | "brief" | "detailed") ||
-                        "detailed",
+                        (reasoningSummary as "auto" | "detailed") || "auto",
                }

                // Optionally configure reasoning effort
@@ -150,8 +155,7 @@ function buildProviderOptions(
                }
                if (reasoningSummary) {
                    options.openai.reasoningSummary = reasoningSummary as
-                        | "none"
-                        | "brief"
+                        | "auto"
                        | "detailed"
                }
            }
@@ -343,7 +347,9 @@ function buildProviderOptions(
        case "deepseek":
        case "openrouter":
        case "siliconflow":
-        case "gateway": {
+        case "sglang":
+        case "gateway":
+        case "doubao": {
            // These providers don't have reasoning configs in AI SDK yet
            // Gateway passes through to underlying providers which handle their own configs
            break
@@ -367,7 +373,9 @@ const PROVIDER_ENV_VARS: Record<ProviderName, string | null> = {
    openrouter: "OPENROUTER_API_KEY",
    deepseek: "DEEPSEEK_API_KEY",
    siliconflow: "SILICONFLOW_API_KEY",
+    sglang: "SGLANG_API_KEY",
    gateway: "AI_GATEWAY_API_KEY",
+    doubao: "DOUBAO_API_KEY",
 }

 /**
@@ -432,7 +440,7 @@ function validateProviderCredentials(provider: ProviderName): void {
 * Get the AI model based on environment variables
 *
 * Environment variables:
- * - AI_PROVIDER: The provider to use (bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow)
+ * - AI_PROVIDER: The provider to use (bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, sglang, gateway)
 * - AI_MODEL: The model ID/name for the selected provider
 *
 * Provider-specific env vars:
@@ -448,6 +456,8 @@ function validateProviderCredentials(provider: ProviderName): void {
 * - DEEPSEEK_BASE_URL: DeepSeek endpoint (optional)
 * - SILICONFLOW_API_KEY: SiliconFlow API key
 * - SILICONFLOW_BASE_URL: SiliconFlow endpoint (optional, defaults to https://api.siliconflow.com/v1)
+ * - SGLANG_API_KEY: SGLang API key
+ * - SGLANG_BASE_URL: SGLang endpoint (optional)
 */
 export function getAIModel(overrides?: ClientOverrides): ModelConfig {
    // SECURITY: Prevent SSRF attacks (GHSA-9qf7-mprq-9qgm)
@@ -516,6 +526,7 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
                        `- OPENROUTER_API_KEY for OpenRouter\n` +
                        `- AZURE_API_KEY for Azure\n` +
                        `- SILICONFLOW_API_KEY for SiliconFlow\n` +
+                        `- SGLANG_API_KEY for SGLang\n` +
                        `Or set AI_PROVIDER=ollama for local Ollama.`,
                )
            } else {
@@ -581,12 +592,16 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
        case "openai": {
            const apiKey = overrides?.apiKey || process.env.OPENAI_API_KEY
            const baseURL = overrides?.baseUrl || process.env.OPENAI_BASE_URL
-            if (baseURL || overrides?.apiKey) {
-                const customOpenAI = createOpenAI({
-                    apiKey,
-                    ...(baseURL && { baseURL }),
-                })
+            if (baseURL) {
+                // Custom base URL = third-party proxy, use Chat Completions API
+                // for compatibility (most proxies don't support /responses endpoint)
+                const customOpenAI = createOpenAI({ apiKey, baseURL })
                model = customOpenAI.chat(modelId)
+            } else if (overrides?.apiKey) {
+                // Custom API key but official OpenAI endpoint, use Responses API
+                // to support reasoning for gpt-5, o1, o3, o4 models
+                const customOpenAI = createOpenAI({ apiKey })
+                model = customOpenAI(modelId)
            } else {
                model = openai(modelId)
            }
@@ -698,6 +713,112 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
            break
        }

+        case "sglang": {
+            const apiKey = overrides?.apiKey || process.env.SGLANG_API_KEY
+            const baseURL = overrides?.baseUrl || process.env.SGLANG_BASE_URL
+
+            const sglangProvider = createOpenAI({
+                apiKey,
+                baseURL,
+                // Add a custom fetch wrapper to intercept and fix the stream from sglang
+                fetch: async (url, options) => {
+                    const response = await fetch(url, options)
+                    if (!response.body) {
+                        return response
+                    }
+
+                    // Create a transform stream to fix the non-compliant sglang stream
+                    let buffer = ""
+                    const decoder = new TextDecoder()
+
+                    const transformStream = new TransformStream({
+                        transform(chunk, controller) {
+                            buffer += decoder.decode(chunk, { stream: true })
+                            // Process all complete messages in the buffer
+                            let messageEndPos
+                            while (
+                                (messageEndPos = buffer.indexOf("\n\n")) !== -1
+                            ) {
+                                const message = buffer.substring(
+                                    0,
+                                    messageEndPos,
+                                )
+                                buffer = buffer.substring(messageEndPos + 2) // Move past the '\n\n'
+
+                                if (message.startsWith("data: ")) {
+                                    const jsonStr = message.substring(6).trim()
+                                    if (jsonStr === "[DONE]") {
+                                        controller.enqueue(
+                                            new TextEncoder().encode(
+                                                message + "\n\n",
+                                            ),
+                                        )
+                                        continue
+                                    }
+                                    try {
+                                        const data = JSON.parse(jsonStr)
+                                        const delta = data.choices?.[0]?.delta
+
+                                        if (delta) {
+                                            // Fix 1: remove invalid empty role
+                                            if (delta.role === "") {
+                                                delete delta.role
+                                            }
+                                            // Fix 2: remove non-standard reasoning_content field
+                                            if ("reasoning_content" in delta) {
+                                                delete delta.reasoning_content
+                                            }
+                                        }
+
+                                        // Re-serialize and forward the corrected data with the correct SSE format
+                                        controller.enqueue(
+                                            new TextEncoder().encode(
+                                                `data: ${JSON.stringify(data)}\n\n`,
+                                            ),
+                                        )
+                                    } catch (e) {
+                                        // If parsing fails, forward the original message to avoid breaking the stream.
+                                        controller.enqueue(
+                                            new TextEncoder().encode(
+                                                message + "\n\n",
+                                            ),
+                                        )
+                                    }
+                                } else if (message.trim() !== "") {
+                                    // Pass through other message types (e.g., 'event: ...')
+                                    controller.enqueue(
+                                        new TextEncoder().encode(
+                                            message + "\n\n",
+                                        ),
+                                    )
+                                }
+                            }
+                        },
+                        flush(controller) {
+                            // If there's anything left in the buffer, forward it.
+                            if (buffer.trim()) {
+                                controller.enqueue(
+                                    new TextEncoder().encode(buffer),
+                                )
+                            }
+                        },
+                    })
+
+                    const transformedBody =
+                        response.body.pipeThrough(transformStream)
+
+                    // Return a new response with the transformed body
+                    return new Response(transformedBody, {
+                        status: response.status,
+                        statusText: response.statusText,
+                        headers: response.headers,
+                    })
+                },
+            })
+            model = sglangProvider.chat(modelId)
+            break
+        }
+
        case "gateway": {
            // Vercel AI Gateway - unified access to multiple AI providers
            // Model format: "provider/model" e.g., "openai/gpt-4o", "anthropic/claude-sonnet-4-5"
@@ -719,9 +840,23 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
            break
        }

+        case "doubao": {
+            const apiKey = overrides?.apiKey || process.env.DOUBAO_API_KEY
+            const baseURL =
+                overrides?.baseUrl ||
+                process.env.DOUBAO_BASE_URL ||
+                "https://ark.cn-beijing.volces.com/api/v3"
+            const doubaoProvider = createDeepSeek({
+                apiKey,
+                baseURL,
+            })
+            model = doubaoProvider(modelId)
+            break
+        }
+
        default:
            throw new Error(
-                `Unknown AI provider: ${provider}. Supported providers: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, gateway`,
+                `Unknown AI provider: ${provider}. Supported providers: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, sglang, gateway, doubao`,
            )
    }

--- a/lib/base-path.ts
+++ b/lib/base-path.ts
@@ -0,0 +1,37 @@
+/**
+ * Get the base path for API calls and static assets
+ * This is used for subdirectory deployment support
+ *
+ * Example: If deployed at https://example.com/nextaidrawio, this returns "/nextaidrawio"
+ * For root deployment, this returns ""
+ *
+ * Set NEXT_PUBLIC_BASE_PATH environment variable to your subdirectory path (e.g., /nextaidrawio)
+ */
+export function getBasePath(): string {
+    // Read from environment variable (must start with NEXT_PUBLIC_ to be available on client)
+    const basePath = process.env.NEXT_PUBLIC_BASE_PATH || ""
+    if (basePath && !basePath.startsWith("/")) {
+        console.warn("NEXT_PUBLIC_BASE_PATH should start with /")
+    }
+    return basePath
+}
+
+/**
+ * Get full API endpoint URL
+ * @param endpoint - API endpoint path (e.g., "/api/chat", "/api/config")
+ * @returns Full API path with base path prefix
+ */
+export function getApiEndpoint(endpoint: string): string {
+    const basePath = getBasePath()
+    return `${basePath}${endpoint}`
+}
+
+/**
+ * Get full static asset URL
+ * @param assetPath - Asset path (e.g., "/example.png", "/chain-of-thought.txt")
+ * @returns Full asset path with base path prefix
+ */
+export function getAssetUrl(assetPath: string): string {
+    const basePath = getBasePath()
+    return `${basePath}${assetPath}`
+}
--- a/lib/dynamo-quota-manager.ts
+++ b/lib/dynamo-quota-manager.ts
@@ -0,0 +1,255 @@
+import {
+    ConditionalCheckFailedException,
+    DynamoDBClient,
+    GetItemCommand,
+    UpdateItemCommand,
+} from "@aws-sdk/client-dynamodb"
+
+// Quota tracking is OPT-IN: only enabled if DYNAMODB_QUOTA_TABLE is explicitly set
+// OSS users who don't need quota tracking can simply not set this env var
+const TABLE = process.env.DYNAMODB_QUOTA_TABLE
+const DYNAMODB_REGION = process.env.DYNAMODB_REGION || "ap-northeast-1"
+// Timezone for daily quota reset (e.g., "Asia/Tokyo" for JST midnight reset)
+// Defaults to UTC if not set
+let QUOTA_TIMEZONE = process.env.QUOTA_TIMEZONE || "UTC"
+
+// Validate timezone at module load
+try {
+    new Intl.DateTimeFormat("en-CA", { timeZone: QUOTA_TIMEZONE }).format(
+        new Date(),
+    )
+} catch {
+    console.warn(
+        `[quota] Invalid QUOTA_TIMEZONE "${QUOTA_TIMEZONE}", using UTC`,
+    )
+    QUOTA_TIMEZONE = "UTC"
+}
+
+/**
+ * Get today's date string in the configured timezone (YYYY-MM-DD format)
+ * This is used as the Sort Key (SK) for per-day tracking
+ */
+function getTodayInTimezone(): string {
+    return new Intl.DateTimeFormat("en-CA", {
+        timeZone: QUOTA_TIMEZONE,
+    }).format(new Date())
+}
+
+// Only create client if quota is enabled
+const client = TABLE ? new DynamoDBClient({ region: DYNAMODB_REGION }) : null
+
+/**
+ * Check if server-side quota tracking is enabled.
+ * Quota is opt-in: only enabled when DYNAMODB_QUOTA_TABLE env var is set.
+ */
+export function isQuotaEnabled(): boolean {
+    return !!TABLE
+}
+
+interface QuotaLimits {
+    requests: number // Daily request limit
+    tokens: number // Daily token limit
+    tpm: number // Tokens per minute
+}
+
+interface QuotaCheckResult {
+    allowed: boolean
+    error?: string
+    type?: "request" | "token" | "tpm"
+    used?: number
+    limit?: number
+}
+
+/**
+ * Check all quotas and increment request count atomically.
+ * Uses composite key (PK=user, SK=date) for per-day tracking.
+ * Each day automatically gets a new item - no explicit reset needed.
+ */
+export async function checkAndIncrementRequest(
+    ip: string,
+    limits: QuotaLimits,
+): Promise<QuotaCheckResult> {
+    // Skip if quota tracking not enabled
+    if (!client || !TABLE) {
+        return { allowed: true }
+    }
+
+    const pk = ip // User identifier (base64 IP)
+    const sk = getTodayInTimezone() // Date as sort key (YYYY-MM-DD)
+    const currentMinute = Math.floor(Date.now() / 60000).toString()
+
+    try {
+        // Single atomic update - handles creation AND increment
+        // New day automatically creates new item (different SK)
+        // Note: lastMinute/tpmCount are managed by recordTokenUsage only
+        await client.send(
+            new UpdateItemCommand({
+                TableName: TABLE,
+                Key: {
+                    PK: { S: pk },
+                    SK: { S: sk },
+                },
+                UpdateExpression: "ADD reqCount :one",
+                // Check all limits before allowing increment
+                // TPM check: allow if new minute OR under limit
+                ConditionExpression: `
+                    (attribute_not_exists(reqCount) OR reqCount < :reqLimit) AND
+                    (attribute_not_exists(tokenCount) OR tokenCount < :tokenLimit) AND
+                    (attribute_not_exists(lastMinute) OR lastMinute <> :minute OR
+                     attribute_not_exists(tpmCount) OR tpmCount < :tpmLimit)
+                `,
+                ExpressionAttributeValues: {
+                    ":one": { N: "1" },
+                    ":minute": { S: currentMinute },
+                    ":reqLimit": { N: String(limits.requests || 999999) },
+                    ":tokenLimit": { N: String(limits.tokens || 999999) },
+                    ":tpmLimit": { N: String(limits.tpm || 999999) },
+                },
+            }),
+        )
+
+        return { allowed: true }
+    } catch (e: any) {
+        // Condition failed - need to determine which limit was exceeded
+        if (e instanceof ConditionalCheckFailedException) {
+            // Get current counts to determine which limit was hit
+            try {
+                const getResult = await client.send(
+                    new GetItemCommand({
+                        TableName: TABLE,
+                        Key: {
+                            PK: { S: pk },
+                            SK: { S: sk },
+                        },
+                    }),
+                )
+
+                const item = getResult.Item
+                const storedMinute = item?.lastMinute?.S
+
+                const reqCount = Number(item?.reqCount?.N || 0)
+                const tokenCount = Number(item?.tokenCount?.N || 0)
+                const tpmCount =
+                    storedMinute !== currentMinute
+                        ? 0
+                        : Number(item?.tpmCount?.N || 0)
+
+                // Determine which limit was exceeded
+                if (limits.requests > 0 && reqCount >= limits.requests) {
+                    return {
+                        allowed: false,
+                        type: "request",
+                        error: "Daily request limit exceeded",
+                        used: reqCount,
+                        limit: limits.requests,
+                    }
+                }
+                if (limits.tokens > 0 && tokenCount >= limits.tokens) {
+                    return {
+                        allowed: false,
+                        type: "token",
+                        error: "Daily token limit exceeded",
+                        used: tokenCount,
+                        limit: limits.tokens,
+                    }
+                }
+                if (limits.tpm > 0 && tpmCount >= limits.tpm) {
+                    return {
+                        allowed: false,
+                        type: "tpm",
+                        error: "Rate limit exceeded (tokens per minute)",
+                        used: tpmCount,
+                        limit: limits.tpm,
+                    }
+                }
+
+                // Condition failed but no limit clearly exceeded - race condition edge case
+                // Fail safe by allowing (could be a TPM reset race)
+                console.warn(
+                    `[quota] Condition failed but no limit exceeded for IP prefix: ${ip.slice(0, 8)}...`,
+                )
+                return { allowed: true }
+            } catch (getError: any) {
+                console.error(
+                    `[quota] Failed to get quota details after condition failure, IP prefix: ${ip.slice(0, 8)}..., error: ${getError.message}`,
+                )
+                return { allowed: true } // Fail open
+            }
+        }
+
+        // Other DynamoDB errors - fail open
+        console.error(
+            `[quota] DynamoDB error (fail-open), IP prefix: ${ip.slice(0, 8)}..., error: ${e.message}`,
+        )
+        return { allowed: true }
+    }
+}
+
+/**
+ * Record token usage after response completes.
+ * Uses composite key (PK=user, SK=date) for per-day tracking.
+ * Handles minute boundaries atomically to prevent race conditions.
+ */
+export async function recordTokenUsage(
+    ip: string,
+    tokens: number,
+): Promise<void> {
+    // Skip if quota tracking not enabled
+    if (!client || !TABLE) return
+    if (!Number.isFinite(tokens) || tokens <= 0) return
+
+    const pk = ip // User identifier (base64 IP)
+    const sk = getTodayInTimezone() // Date as sort key (YYYY-MM-DD)
+    const currentMinute = Math.floor(Date.now() / 60000).toString()
+
+    try {
+        // Try to update for same minute OR new item (most common cases)
+        // Handles: 1) new item (no lastMinute), 2) same minute (lastMinute matches)
+        await client.send(
+            new UpdateItemCommand({
+                TableName: TABLE,
+                Key: {
+                    PK: { S: pk },
+                    SK: { S: sk },
+                },
+                UpdateExpression:
+                    "SET lastMinute = if_not_exists(lastMinute, :minute) ADD tokenCount :tokens, tpmCount :tokens",
+                ConditionExpression:
+                    "attribute_not_exists(lastMinute) OR lastMinute = :minute",
+                ExpressionAttributeValues: {
+                    ":minute": { S: currentMinute },
+                    ":tokens": { N: String(tokens) },
+                },
+            }),
+        )
+    } catch (e: any) {
+        if (e instanceof ConditionalCheckFailedException) {
+            // Different minute - reset TPM count and set new minute
+            try {
+                await client.send(
+                    new UpdateItemCommand({
+                        TableName: TABLE,
+                        Key: {
+                            PK: { S: pk },
+                            SK: { S: sk },
+                        },
+                        UpdateExpression:
+                            "SET lastMinute = :minute, tpmCount = :tokens ADD tokenCount :tokens",
+                        ExpressionAttributeValues: {
+                            ":minute": { S: currentMinute },
+                            ":tokens": { N: String(tokens) },
+                        },
+                    }),
+                )
+            } catch (retryError: any) {
+                console.error(
+                    `[quota] Failed to record tokens (retry), IP prefix: ${ip.slice(0, 8)}..., tokens: ${tokens}, error: ${retryError.message}`,
+                )
+            }
+        } else {
+            console.error(
+                `[quota] Failed to record tokens, IP prefix: ${ip.slice(0, 8)}..., tokens: ${tokens}, error: ${e.message}`,
+            )
+        }
+    }
+}
--- a/lib/i18n/dictionaries/en.json
+++ b/lib/i18n/dictionaries/en.json
@@ -14,6 +14,7 @@
        "about": "About",
        "editor": "Editor",
        "newChat": "Start fresh chat",
+        "github": "GitHub",
        "settings": "Settings",
        "hidePanel": "Hide chat panel (Ctrl+B)",
        "showPanel": "Show chat panel (Ctrl+B)",
@@ -87,6 +88,8 @@
        "overrides": "Overrides",
        "clearSettings": "Clear Settings",
        "useServerDefault": "Use Server Default",
+        "language": "Language",
+        "languageDescription": "Choose your interface language.",
        "theme": "Theme",
        "themeDescription": "Dark/Light mode for interface and DrawIO canvas.",
        "drawioStyle": "DrawIO Style",
@@ -95,7 +98,13 @@
        "minimal": "Minimal",
        "sketch": "Sketch",
        "closeProtection": "Close Protection",
-        "closeProtectionDescription": "Show confirmation when leaving the page."
+        "closeProtectionDescription": "Show confirmation when leaving the page.",
+        "diagramStyle": "Diagram Style",
+        "diagramStyleDescription": "Toggle between minimal and styled diagram output.",
+        "diagramActions": "Diagram Actions",
+        "diagramActionsDescription": "Manage diagram history and exports",
+        "history": "History",
+        "download": "Download"
    },
    "save": {
        "title": "Save Diagram",
@@ -147,10 +156,13 @@
        "tokenLimit": "Daily Token Limit Reached",
        "tpmLimit": "Rate Limit",
        "tpmMessage": "Too many requests. Please wait a moment.",
-        "messageApi": "Oops — you've reached the daily API limit for this demo! As an indie developer covering all the API costs myself, I have to set these limits to keep things sustainable.",
-        "messageToken": "Oops — you've reached the daily token limit for this demo! As an indie developer covering all the API costs myself, I have to set these limits to keep things sustainable.",
+        "tpmMessageDetailed": "Rate limit reached ({limit} tokens/min). Please wait {seconds} seconds before sending another request.",
+        "messageApi": "Looks like you've reached today's demo limit. We're thrilled you're enjoying it, and while ByteDance Doubao generously sponsors this demo, we've had to set a few boundaries to keep things fair for everyone.",
+        "messageToken": "Looks like you've reached today's token limit. We're thrilled you're enjoying it, and while ByteDance Doubao generously sponsors this demo, we've had to set a few boundaries to keep things fair for everyone.",
        "tip": "<strong>Tip:</strong> You can use your own API key (click the Settings icon) or self-host the project to bypass these limits.",
-        "reset": "Your limit resets tomorrow. Thanks for understanding!",
+        "reset": "Your limit resets tomorrow. Thanks for understanding.",
+        "doubaoSponsorship": "<a href=\"{link}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"underline hover:text-foreground\">Register here</a> to get 500K free tokens per model (including Doubao, DeepSeek and Kimi), then configure your API key in model settings.",
+        "configModel": "Use Your API Key",
        "selfHost": "Self-host",
        "sponsor": "Sponsor",
        "learnMore": "Learn more →",
@@ -198,6 +210,50 @@
        "apiKeyStored": "API keys are stored locally in your browser",
        "test": "Test",
        "validationError": "Validation failed",
-        "addModelFirst": "Add at least one model to validate"
+        "addModelFirst": "Add at least one model to validate",
+        "providers": "Providers",
+        "addProviderHint": "Add a provider to get started",
+        "verified": "Verified",
+        "configuration": "Configuration",
+        "displayName": "Display Name",
+        "awsAccessKeyId": "AWS Access Key ID",
+        "awsSecretAccessKey": "AWS Secret Access Key",
+        "awsRegion": "AWS Region",
+        "selectRegion": "Select region",
+        "apiKey": "API Key",
+        "enterApiKey": "Enter your API key",
+        "enterSecretKey": "Enter your secret access key",
+        "baseUrl": "Base URL",
+        "optional": "(optional)",
+        "customEndpoint": "Custom endpoint URL",
+        "models": "Models",
+        "customModelId": "Custom model ID...",
+        "allAdded": "All added",
+        "suggested": "Suggested",
+        "noModelsConfigured": "No models configured",
+        "modelIdEmpty": "Model ID cannot be empty",
+        "modelIdExists": "This model ID already exists",
+        "configureProviders": "Configure AI Providers",
+        "selectProviderHint": "Select a provider from the list or add a new one to configure API keys and models",
+        "deleteConfirmDesc": "Are you sure you want to delete {name}? This will remove all configured models and cannot be undone.",
+        "typeToConfirm": "Type \"{name}\" to confirm",
+        "typeProviderName": "Type provider name...",
+        "modelsConfiguredCount": "{count} model(s) configured",
+        "validationFailedCount": "{count} model(s) failed validation",
+        "cancel": "Cancel",
+        "delete": "Delete",
+        "clickToChange": "(click to change)",
+        "usingServerDefault": "Using server default model",
+        "selectModel": "Select Model",
+        "searchModels": "Search models...",
+        "noVerifiedModels": "No verified models. Test your models first.",
+        "noModelsFound": "No models found.",
+        "default": "Default",
+        "serverDefault": "Server Default",
+        "configureModels": "Configure Models...",
+        "onlyVerifiedShown": "Only verified models are shown",
+        "showUnvalidatedModels": "Show unvalidated models",
+        "allModelsShown": "All models are shown (including unvalidated)",
+        "unvalidatedModelWarning": "This model has not been validated"
    }
 }
--- a/lib/i18n/dictionaries/ja.json
+++ b/lib/i18n/dictionaries/ja.json
@@ -14,6 +14,7 @@
        "about": "概要",
        "editor": "エディタ",
        "newChat": "新しいチャットを開始",
+        "github": "GitHub",
        "settings": "設定",
        "hidePanel": "チャットパネルを非表示 (Ctrl+B)",
        "showPanel": "チャットパネルを表示 (Ctrl+B)",
@@ -87,6 +88,8 @@
        "overrides": "上書き",
        "clearSettings": "設定をクリア",
        "useServerDefault": "サーバーデフォルトを使用",
+        "language": "言語",
+        "languageDescription": "インターフェース言語を選択します。",
        "theme": "テーマ",
        "themeDescription": "インターフェースと DrawIO キャンバスのダーク/ライトモード。",
        "drawioStyle": "DrawIO スタイル",
@@ -95,7 +98,13 @@
        "minimal": "ミニマル",
        "sketch": "スケッチ",
        "closeProtection": "ページ離脱確認",
-        "closeProtectionDescription": "ページを離れる際に確認を表示します。"
+        "closeProtectionDescription": "ページを離れる際に確認を表示します。",
+        "diagramStyle": "ダイアグラムスタイル",
+        "diagramStyleDescription": "ミニマルとスタイル付きの出力を切り替えます。",
+        "diagramActions": "ダイアグラム操作",
+        "diagramActionsDescription": "ダイアグラムの履歴とエクスポートを管理",
+        "history": "履歴",
+        "download": "ダウンロード"
    },
    "save": {
        "title": "ダイアグラムを保存",
@@ -147,10 +156,13 @@
        "tokenLimit": "1日のトークン制限に達しました",
        "tpmLimit": "レート制限",
        "tpmMessage": "リクエストが多すぎます。しばらくお待ちください。",
-        "messageApi": "おっと — このデモの1日の API 制限に達しました！個人開発者として API コストをすべて負担しているため、持続可能性を保つためにこれらの制限を設定する必要があります。",
-        "messageToken": "おっと — このデモの1日のトークン制限に達しました！個人開発者として API コストをすべて負担しているため、持続可能性を保つためにこれらの制限を設定する必要があります。",
+        "tpmMessageDetailed": "レート制限に達しました（{limit}トークン/分）。{seconds}秒待ってからもう一度リクエストしてください。",
+        "messageApi": "今日のデモ利用上限に達してしまったようです。楽しんでいただけて本当に嬉しいです。このデモはByteDance Doubaoのご厚意により提供されていますが、皆様に公平にご利用いただくため、少し制限を設けさせていただいております。",
+        "messageToken": "今日のトークン利用上限に達してしまったようです。楽しんでいただけて本当に嬉しいです。このデモはByteDance Doubaoのご厚意により提供されていますが、皆様に公平にご利用いただくため、少し制限を設けさせていただいております。",
        "tip": "<strong>ヒント：</strong>独自の API キーを使用する（設定アイコンをクリック）か、プロジェクトをセルフホストしてこれらの制限を回避できます。",
-        "reset": "制限は明日リセットされます。ご理解ありがとうございます！",
+        "reset": "制限は明日リセットされます。ご理解ありがとうございます。",
+        "doubaoSponsorship": "<a href=\"{link}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"underline hover:text-foreground\">こちらから登録</a>すると、各モデル（Doubao、DeepSeek、Kimi含む）で50万トークンを無料で取得できます。モデル設定でAPIキーを設定してください。",
+        "configModel": "APIキーを使用",
        "selfHost": "セルフホスト",
        "sponsor": "スポンサー",
        "learnMore": "詳細 →",
@@ -198,6 +210,50 @@
        "apiKeyStored": "APIキーはブラウザにローカル保存されます",
        "test": "テスト",
        "validationError": "検証に失敗しました",
-        "addModelFirst": "検証するには少なくとも1つのモデルを追加してください"
+        "addModelFirst": "検証するには少なくとも1つのモデルを追加してください",
+        "providers": "プロバイダー",
+        "addProviderHint": "プロバイダーを追加して開始",
+        "verified": "検証済み",
+        "configuration": "設定",
+        "displayName": "表示名",
+        "awsAccessKeyId": "AWS アクセスキー ID",
+        "awsSecretAccessKey": "AWS シークレットアクセスキー",
+        "awsRegion": "AWS リージョン",
+        "selectRegion": "リージョンを選択",
+        "apiKey": "API キー",
+        "enterApiKey": "API キーを入力",
+        "enterSecretKey": "シークレットアクセスキーを入力",
+        "baseUrl": "ベース URL",
+        "optional": "（オプション）",
+        "customEndpoint": "カスタムエンドポイント URL",
+        "models": "モデル",
+        "customModelId": "カスタムモデル ID...",
+        "allAdded": "すべて追加済み",
+        "suggested": "おすすめ",
+        "noModelsConfigured": "モデルが設定されていません",
+        "modelIdEmpty": "モデル ID は空にできません",
+        "modelIdExists": "このモデル ID は既に存在します",
+        "configureProviders": "AI プロバイダーを設定",
+        "selectProviderHint": "リストからプロバイダーを選択するか、新規追加して API キーとモデルを設定",
+        "deleteConfirmDesc": "{name} を削除してもよろしいですか？設定されたすべてのモデルが削除され、元に戻せません。",
+        "typeToConfirm": "確認のため「{name}」と入力",
+        "typeProviderName": "プロバイダー名を入力...",
+        "modelsConfiguredCount": "{count} 個のモデルを設定済み",
+        "validationFailedCount": "{count} 個のモデルの検証に失敗",
+        "cancel": "キャンセル",
+        "delete": "削除",
+        "clickToChange": "（クリックして変更）",
+        "usingServerDefault": "サーバーデフォルトモデルを使用中",
+        "selectModel": "モデルを選択",
+        "searchModels": "モデルを検索...",
+        "noVerifiedModels": "検証済みのモデルがありません。先にモデルをテストしてください。",
+        "noModelsFound": "モデルが見つかりません。",
+        "default": "デフォルト",
+        "serverDefault": "サーバーデフォルト",
+        "configureModels": "モデルを設定...",
+        "onlyVerifiedShown": "検証済みのモデルのみ表示",
+        "showUnvalidatedModels": "未検証のモデルを表示",
+        "allModelsShown": "すべてのモデルを表示（未検証を含む）",
+        "unvalidatedModelWarning": "このモデルは検証されていません"
    }
 }
--- a/lib/i18n/dictionaries/zh.json
+++ b/lib/i18n/dictionaries/zh.json
@@ -14,6 +14,7 @@
        "about": "关于",
        "editor": "编辑器",
        "newChat": "开始新对话",
+        "github": "GitHub",
        "settings": "设置",
        "hidePanel": "隐藏聊天面板 (Ctrl+B)",
        "showPanel": "显示聊天面板 (Ctrl+B)",
@@ -87,6 +88,8 @@
        "overrides": "覆盖",
        "clearSettings": "清除设置",
        "useServerDefault": "使用服务器默认值",
+        "language": "语言",
+        "languageDescription": "选择界面语言。",
        "theme": "主题",
        "themeDescription": "界面和 DrawIO 画布的深色/浅色模式。",
        "drawioStyle": "DrawIO 样式",
@@ -95,7 +98,13 @@
        "minimal": "简约",
        "sketch": "草图",
        "closeProtection": "关闭确认",
-        "closeProtectionDescription": "离开页面时显示确认。"
+        "closeProtectionDescription": "离开页面时显示确认。",
+        "diagramStyle": "图表样式",
+        "diagramStyleDescription": "切换简约与精致图表输出模式。",
+        "diagramActions": "图表操作",
+        "diagramActionsDescription": "管理图表历史记录和导出",
+        "history": "历史记录",
+        "download": "下载"
    },
    "save": {
        "title": "保存图表",
@@ -147,10 +156,13 @@
        "tokenLimit": "已达每日令牌限制",
        "tpmLimit": "速率限制",
        "tpmMessage": "请求过多。请稍等片刻。",
-        "messageApi": "糟糕 — 您已达到此演示的每日 API 限制！作为一名独立开发者，我自己承担所有 API 费用，因此必须设置这些限制以保持可持续性。",
-        "messageToken": "糟糕 — 您已达到此演示的每日令牌限制！作为一名独立开发者，我自己承担所有 API 费用，因此必须设置这些限制以保持可持续性。",
+        "tpmMessageDetailed": "达到速率限制（{limit} 令牌/分钟）。请等待 {seconds} 秒后再发送请求。",
+        "messageApi": "看来您今天的体验次数已达上限。非常高兴您玩得开心，虽然本项目由字节跳动豆包慷慨赞助，但为了确保大家都能公平使用，我们不得不对使用量做一点小小的限制。",
+        "messageToken": "看来您今天的 Token 用量已达上限。非常高兴您玩得开心，虽然本项目由字节跳动豆包慷慨赞助，但为了确保大家都能公平使用，我们不得不对使用量做一点小小的限制。",
        "tip": "<strong>提示：</strong>您可以使用自己的 API 密钥（点击设置图标）或自托管项目来绕过这些限制。",
-        "reset": "您的限制将在明天重置。感谢您的理解！",
+        "reset": "您的限制将在明天重置。感谢您的理解。",
+        "doubaoSponsorship": "<a href=\"{link}\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"underline hover:text-foreground\">点击此处注册</a>可获得每个模型 50 万免费 Token（包括豆包、DeepSeek 和 Kimi），然后在模型设置中配置您的 API Key。",
+        "configModel": "使用您的密钥",
        "selfHost": "自托管",
        "sponsor": "赞助",
        "learnMore": "了解更多 →",
@@ -198,6 +210,50 @@
        "apiKeyStored": "API 密钥存储在您的浏览器本地",
        "test": "测试",
        "validationError": "验证失败",
-        "addModelFirst": "请先添加至少一个模型以进行验证"
+        "addModelFirst": "请先添加至少一个模型以进行验证",
+        "providers": "提供商",
+        "addProviderHint": "添加提供商即可开始使用",
+        "verified": "已验证",
+        "configuration": "配置",
+        "displayName": "显示名称",
+        "awsAccessKeyId": "AWS 访问密钥 ID",
+        "awsSecretAccessKey": "AWS Secret Access Key",
+        "awsRegion": "AWS 区域",
+        "selectRegion": "选择区域",
+        "apiKey": "API 密钥",
+        "enterApiKey": "输入您的 API 密钥",
+        "enterSecretKey": "输入您的 Secret Key",
+        "baseUrl": "基础 URL",
+        "optional": "（可选）",
+        "customEndpoint": "自定义端点 URL",
+        "models": "模型",
+        "customModelId": "自定义模型 ID...",
+        "allAdded": "已全部添加",
+        "suggested": "推荐",
+        "noModelsConfigured": "尚未配置模型",
+        "modelIdEmpty": "模型 ID 不能为空",
+        "modelIdExists": "此模型 ID 已存在",
+        "configureProviders": "配置 AI 提供商",
+        "selectProviderHint": "从列表中选择提供商或添加新的以配置 API 密钥和模型",
+        "deleteConfirmDesc": "确定要删除 {name} 吗？这将移除所有配置的模型且无法撤销。",
+        "typeToConfirm": "输入 \"{name}\" 以确认",
+        "typeProviderName": "输入提供商名称...",
+        "modelsConfiguredCount": "已配置 {count} 个模型",
+        "validationFailedCount": "{count} 个模型验证失败",
+        "cancel": "取消",
+        "delete": "删除",
+        "clickToChange": "（点击更改）",
+        "usingServerDefault": "使用服务器默认模型",
+        "selectModel": "选择模型",
+        "searchModels": "搜索模型...",
+        "noVerifiedModels": "没有已验证的模型。请先测试您的模型。",
+        "noModelsFound": "未找到模型。",
+        "default": "默认",
+        "serverDefault": "服务器默认",
+        "configureModels": "配置模型...",
+        "onlyVerifiedShown": "仅显示已验证的模型",
+        "showUnvalidatedModels": "显示未验证的模型",
+        "allModelsShown": "显示所有模型（包括未验证的）",
+        "unvalidatedModelWarning": "此模型尚未验证"
    }
 }
--- a/lib/langfuse.ts
+++ b/lib/langfuse.ts
@@ -21,9 +21,11 @@ export function getLangfuseClient(): LangfuseClient | null {
    return langfuseClient
 }

-// Check if Langfuse is configured
+// Check if Langfuse is configured (both keys required)
 export function isLangfuseEnabled(): boolean {
-    return !!process.env.LANGFUSE_PUBLIC_KEY
+    return !!(
+        process.env.LANGFUSE_PUBLIC_KEY && process.env.LANGFUSE_SECRET_KEY
+    )
 }

 // Update trace with input data at the start of request
@@ -43,34 +45,16 @@ export function setTraceInput(params: {
 }

 // Update trace with output and end the span
-export function setTraceOutput(
-    output: string,
-    usage?: { promptTokens?: number; completionTokens?: number },
-) {
+// Note: AI SDK 6 telemetry automatically reports token usage on its spans,
+// so we only need to set the output text and close our wrapper span
+export function setTraceOutput(output: string) {
    if (!isLangfuseEnabled()) return

    updateActiveTrace({ output })

+    // End the observe() wrapper span (AI SDK creates its own child spans with usage)
    const activeSpan = api.trace.getActiveSpan()
    if (activeSpan) {
-        // Manually set usage attributes since AI SDK Bedrock streaming doesn't provide them
-        if (usage?.promptTokens) {
-            activeSpan.setAttribute("ai.usage.promptTokens", usage.promptTokens)
-            activeSpan.setAttribute(
-                "gen_ai.usage.input_tokens",
-                usage.promptTokens,
-            )
-        }
-        if (usage?.completionTokens) {
-            activeSpan.setAttribute(
-                "ai.usage.completionTokens",
-                usage.completionTokens,
-            )
-            activeSpan.setAttribute(
-                "gen_ai.usage.output_tokens",
-                usage.completionTokens,
-            )
-        }
        activeSpan.end()
    }
 }
--- a/lib/system-prompts.ts
+++ b/lib/system-prompts.ts
@@ -99,9 +99,9 @@ When using edit_diagram tool:
 - For update/add: provide cell_id and complete new_xml (full mxCell element including mxGeometry)
 - For delete: only cell_id is needed
 - Find the cell_id from "Current diagram XML" in system context
- Example update: {"operations": [{"type": "update", "cell_id": "3", "new_xml": "<mxCell id=\\"3\\" value=\\"New Label\\" style=\\"rounded=1;\\" vertex=\\"1\\" parent=\\"1\\">\\n  <mxGeometry x=\\"100\\" y=\\"100\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/>\\n</mxCell>"}]}
- Example delete: {"operations": [{"type": "delete", "cell_id": "5"}]}
- Example add: {"operations": [{"type": "add", "cell_id": "new1", "new_xml": "<mxCell id=\\"new1\\" value=\\"New Box\\" style=\\"rounded=1;\\" vertex=\\"1\\" parent=\\"1\\">\\n  <mxGeometry x=\\"400\\" y=\\"200\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/>\\n</mxCell>"}]}
+- Example update: {"operations": [{"operation": "update", "cell_id": "3", "new_xml": "<mxCell id=\\"3\\" value=\\"New Label\\" style=\\"rounded=1;\\" vertex=\\"1\\" parent=\\"1\\">\\n  <mxGeometry x=\\"100\\" y=\\"100\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/>\\n</mxCell>"}]}
+- Example delete: {"operations": [{"operation": "delete", "cell_id": "5"}]}
+- Example add: {"operations": [{"operation": "add", "cell_id": "new1", "new_xml": "<mxCell id=\\"new1\\" value=\\"New Box\\" style=\\"rounded=1;\\" vertex=\\"1\\" parent=\\"1\\">\\n  <mxGeometry x=\\"400\\" y=\\"200\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/>\\n</mxCell>"}]}

 ⚠️ JSON ESCAPING: Every " inside new_xml MUST be escaped as \\". Example: id=\\"5\\" value=\\"Label\\"

@@ -276,15 +276,15 @@ edit_diagram uses ID-based operations to modify cells directly by their id attri
 **Operations:**
 - **update**: Replace an existing cell. Provide cell_id and new_xml.
 - **add**: Add a new cell. Provide cell_id (new unique id) and new_xml.
- **delete**: Remove a cell. Only cell_id is needed.
+- **delete**: Remove a cell. **Cascade is automatic**: children AND edges (source/target) are auto-deleted. Only specify ONE cell_id.

 **Input Format:**
 \`\`\`json
 {
  "operations": [
-    {"type": "update", "cell_id": "3", "new_xml": "<mxCell ...complete element...>"},
-    {"type": "add", "cell_id": "new1", "new_xml": "<mxCell ...new element...>"},
-    {"type": "delete", "cell_id": "5"}
+    {"operation": "update", "cell_id": "3", "new_xml": "<mxCell ...complete element...>"},
+    {"operation": "add", "cell_id": "new1", "new_xml": "<mxCell ...new element...>"},
+    {"operation": "delete", "cell_id": "5"}
  ]
 }
 \`\`\`
@@ -293,17 +293,17 @@ edit_diagram uses ID-based operations to modify cells directly by their id attri

 Change label:
 \`\`\`json
-{"operations": [{"type": "update", "cell_id": "3", "new_xml": "<mxCell id=\\"3\\" value=\\"New Label\\" style=\\"rounded=1;\\" vertex=\\"1\\" parent=\\"1\\">\\n  <mxGeometry x=\\"100\\" y=\\"100\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/>\\n</mxCell>"}]}
+{"operations": [{"operation": "update", "cell_id": "3", "new_xml": "<mxCell id=\\"3\\" value=\\"New Label\\" style=\\"rounded=1;\\" vertex=\\"1\\" parent=\\"1\\">\\n  <mxGeometry x=\\"100\\" y=\\"100\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/>\\n</mxCell>"}]}
 \`\`\`

 Add new shape:
 \`\`\`json
-{"operations": [{"type": "add", "cell_id": "new1", "new_xml": "<mxCell id=\\"new1\\" value=\\"New Box\\" style=\\"rounded=1;fillColor=#dae8fc;\\" vertex=\\"1\\" parent=\\"1\\">\\n  <mxGeometry x=\\"400\\" y=\\"200\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/>\\n</mxCell>"}]}
+{"operations": [{"operation": "add", "cell_id": "new1", "new_xml": "<mxCell id=\\"new1\\" value=\\"New Box\\" style=\\"rounded=1;fillColor=#dae8fc;\\" vertex=\\"1\\" parent=\\"1\\">\\n  <mxGeometry x=\\"400\\" y=\\"200\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/>\\n</mxCell>"}]}
 \`\`\`

-Delete cell:
+Delete container (children & edges auto-deleted):
 \`\`\`json
-{"operations": [{"type": "delete", "cell_id": "5"}]}
+{"operations": [{"operation": "delete", "cell_id": "2"}]}
 \`\`\`

 **Error Recovery:**
--- a/lib/types/model-config.ts
+++ b/lib/types/model-config.ts
@@ -9,7 +9,9 @@ export type ProviderName =
    | "openrouter"
    | "deepseek"
    | "siliconflow"
+    | "sglang"
    | "gateway"
+    | "doubao"

 // Individual model configuration
 export interface ModelConfig {
@@ -40,6 +42,7 @@ export interface MultiModelConfig {
    version: 1
    providers: ProviderConfig[]
    selectedModelId?: string // Currently selected model's UUID
+    showUnvalidatedModels?: boolean // Show models that haven't been validated
 }

 // Flattened model for dropdown display
@@ -77,28 +80,38 @@ export const PROVIDER_INFO: Record<
        label: "SiliconFlow",
        defaultBaseUrl: "https://api.siliconflow.com/v1",
    },
+    sglang: {
+        label: "SGLang",
+        defaultBaseUrl: "http://127.0.0.1:8000/v1",
+    },
    gateway: { label: "AI Gateway" },
+    doubao: {
+        label: "Doubao (ByteDance)",
+        defaultBaseUrl: "https://ark.cn-beijing.volces.com/api/v3",
+    },
 }

 // Suggested models per provider for quick add
 export const SUGGESTED_MODELS: Record<ProviderName, string[]> = {
    openai: [
-        // GPT-4o series (latest)
+        "gpt-5.2-pro",
+        "gpt-5.2-chat-latest",
+        "gpt-5.2",
+        "gpt-5.1-codex-mini",
+        "gpt-5.1-codex",
+        "gpt-5.1-chat-latest",
+        "gpt-5.1",
+        "gpt-5-pro",
+        "gpt-5",
+        "gpt-5-mini",
+        "gpt-5-nano",
+        "gpt-5-codex",
+        "gpt-5-chat-latest",
+        "gpt-4.1",
+        "gpt-4.1-mini",
+        "gpt-4.1-nano",
        "gpt-4o",
        "gpt-4o-mini",
-        "gpt-4o-2024-11-20",
-        // GPT-4 Turbo
-        "gpt-4-turbo",
-        "gpt-4-turbo-preview",
-        // o1/o3 reasoning models
-        "o1",
-        "o1-mini",
-        "o1-preview",
-        "o3-mini",
-        // GPT-4
-        "gpt-4",
-        // GPT-3.5
-        "gpt-3.5-turbo",
    ],
    anthropic: [
        // Claude 4.5 series (latest)
@@ -195,6 +208,10 @@ export const SUGGESTED_MODELS: Record<ProviderName, string[]> = {
        "Qwen/Qwen2.5-7B-Instruct",
        "Qwen/Qwen2-VL-72B-Instruct",
    ],
+    sglang: [
+        // SGLang is OpenAI-compatible, models depend on deployment
+        "default",
+    ],
    gateway: [
        "openai/gpt-4o",
        "openai/gpt-4o-mini",
@@ -202,6 +219,15 @@ export const SUGGESTED_MODELS: Record<ProviderName, string[]> = {
        "anthropic/claude-3-5-sonnet",
        "google/gemini-2.0-flash",
    ],
+    doubao: [
+        // ByteDance Doubao models
+        "doubao-1.5-thinking-pro-250415",
+        "doubao-1.5-thinking-pro-m-250428",
+        "doubao-1.5-pro-32k-250115",
+        "doubao-1.5-pro-256k-250115",
+        "doubao-pro-32k-241215",
+        "doubao-pro-256k-241215",
+    ],
 }

 // Helper to generate UUID
--- a/lib/use-quota-manager.tsx
+++ b/lib/use-quota-manager.tsx
@@ -1,245 +1,87 @@
 "use client"

-import { useCallback, useMemo } from "react"
+import { useCallback } from "react"
 import { toast } from "sonner"
 import { QuotaLimitToast } from "@/components/quota-limit-toast"
-import { STORAGE_KEYS } from "@/lib/storage"
+import { useDictionary } from "@/hooks/use-dictionary"
+import { formatMessage } from "@/lib/i18n/utils"

 export interface QuotaConfig {
    dailyRequestLimit: number
    dailyTokenLimit: number
    tpmLimit: number
-}
-
-export interface QuotaCheckResult {
-    allowed: boolean
-    remaining: number
-    used: number
+    onConfigModel?: () => void
 }

 /**
- * Hook for managing request/token quotas and rate limiting.
- * Handles three types of limits:
- * - Daily request limit
- * - Daily token limit
- * - Tokens per minute (TPM) rate limit
- *
- * Users with their own API key bypass all limits.
+ * Hook for displaying quota limit toasts.
+ * Server-side handles actual quota enforcement via DynamoDB.
+ * This hook only provides UI feedback when limits are exceeded.
 */
 export function useQuotaManager(config: QuotaConfig): {
-    hasOwnApiKey: () => boolean
-    checkDailyLimit: () => QuotaCheckResult
-    checkTokenLimit: () => QuotaCheckResult
-    checkTPMLimit: () => QuotaCheckResult
-    incrementRequestCount: () => void
-    incrementTokenCount: (tokens: number) => void
-    incrementTPMCount: (tokens: number) => void
-    showQuotaLimitToast: () => void
-    showTokenLimitToast: (used: number) => void
-    showTPMLimitToast: () => void
+    showQuotaLimitToast: (used?: number, limit?: number) => void
+    showTokenLimitToast: (used?: number, limit?: number) => void
+    showTPMLimitToast: (limit?: number) => void
 } {
-    const { dailyRequestLimit, dailyTokenLimit, tpmLimit } = config
-
-    // Check if user has their own API key configured (bypass limits)
-    const hasOwnApiKey = useCallback((): boolean => {
-        const provider = localStorage.getItem(STORAGE_KEYS.aiProvider)
-        const apiKey = localStorage.getItem(STORAGE_KEYS.aiApiKey)
-        return !!(provider && apiKey)
-    }, [])
-
-    // Generic helper: Parse count from localStorage with NaN guard
-    const parseStorageCount = (key: string): number => {
-        const count = parseInt(localStorage.getItem(key) || "0", 10)
-        return Number.isNaN(count) ? 0 : count
-    }
-
-    // Generic helper: Create quota checker factory
-    const createQuotaChecker = useCallback(
-        (
-            getTimeKey: () => string,
-            timeStorageKey: string,
-            countStorageKey: string,
-            limit: number,
-        ) => {
-            return (): QuotaCheckResult => {
-                if (hasOwnApiKey())
-                    return { allowed: true, remaining: -1, used: 0 }
-                if (limit <= 0) return { allowed: true, remaining: -1, used: 0 }
-
-                const currentTime = getTimeKey()
-                const storedTime = localStorage.getItem(timeStorageKey)
-                let count = parseStorageCount(countStorageKey)
-
-                if (storedTime !== currentTime) {
-                    count = 0
-                    localStorage.setItem(timeStorageKey, currentTime)
-                    localStorage.setItem(countStorageKey, "0")
-                }
-
-                return {
-                    allowed: count < limit,
-                    remaining: limit - count,
-                    used: count,
-                }
-            }
-        },
-        [hasOwnApiKey],
-    )
-
-    // Generic helper: Create quota incrementer factory
-    const createQuotaIncrementer = useCallback(
-        (
-            getTimeKey: () => string,
-            timeStorageKey: string,
-            countStorageKey: string,
-            validateInput: boolean = false,
-        ) => {
-            return (tokens: number = 1): void => {
-                if (validateInput && (!Number.isFinite(tokens) || tokens <= 0))
-                    return
-
-                const currentTime = getTimeKey()
-                const storedTime = localStorage.getItem(timeStorageKey)
-                let count = parseStorageCount(countStorageKey)
-
-                if (storedTime !== currentTime) {
-                    count = 0
-                    localStorage.setItem(timeStorageKey, currentTime)
-                }
-
-                localStorage.setItem(countStorageKey, String(count + tokens))
-            }
-        },
-        [],
-    )
-
-    // Check daily request limit
-    const checkDailyLimit = useMemo(
-        () =>
-            createQuotaChecker(
-                () => new Date().toDateString(),
-                STORAGE_KEYS.requestDate,
-                STORAGE_KEYS.requestCount,
-                dailyRequestLimit,
-            ),
-        [createQuotaChecker, dailyRequestLimit],
-    )
-
-    // Increment request count
-    const incrementRequestCount = useMemo(
-        () =>
-            createQuotaIncrementer(
-                () => new Date().toDateString(),
-                STORAGE_KEYS.requestDate,
-                STORAGE_KEYS.requestCount,
-                false,
-            ),
-        [createQuotaIncrementer],
-    )
+    const { dailyRequestLimit, dailyTokenLimit, tpmLimit, onConfigModel } =
+        config
+    const dict = useDictionary()

    // Show quota limit toast (request-based)
-    const showQuotaLimitToast = useCallback(() => {
-        toast.custom(
-            (t) => (
-                <QuotaLimitToast
-                    used={dailyRequestLimit}
-                    limit={dailyRequestLimit}
-                    onDismiss={() => toast.dismiss(t)}
-                />
-            ),
-            { duration: 15000 },
-        )
-    }, [dailyRequestLimit])
-
-    // Check daily token limit
-    const checkTokenLimit = useMemo(
-        () =>
-            createQuotaChecker(
-                () => new Date().toDateString(),
-                STORAGE_KEYS.tokenDate,
-                STORAGE_KEYS.tokenCount,
-                dailyTokenLimit,
-            ),
-        [createQuotaChecker, dailyTokenLimit],
-    )
-
-    // Increment token count
-    const incrementTokenCount = useMemo(
-        () =>
-            createQuotaIncrementer(
-                () => new Date().toDateString(),
-                STORAGE_KEYS.tokenDate,
-                STORAGE_KEYS.tokenCount,
-                true, // Validate input tokens
-            ),
-        [createQuotaIncrementer],
-    )
-
-    // Show token limit toast
-    const showTokenLimitToast = useCallback(
-        (used: number) => {
+    const showQuotaLimitToast = useCallback(
+        (used?: number, limit?: number) => {
            toast.custom(
                (t) => (
                    <QuotaLimitToast
-                        type="token"
-                        used={used}
-                        limit={dailyTokenLimit}
+                        used={used ?? dailyRequestLimit}
+                        limit={limit ?? dailyRequestLimit}
                        onDismiss={() => toast.dismiss(t)}
+                        onConfigModel={onConfigModel}
                    />
                ),
                { duration: 15000 },
            )
        },
-        [dailyTokenLimit],
+        [dailyRequestLimit, onConfigModel],
    )

-    // Check TPM (tokens per minute) limit
-    const checkTPMLimit = useMemo(
-        () =>
-            createQuotaChecker(
-                () => Math.floor(Date.now() / 60000).toString(),
-                STORAGE_KEYS.tpmMinute,
-                STORAGE_KEYS.tpmCount,
-                tpmLimit,
-            ),
-        [createQuotaChecker, tpmLimit],
-    )
-
-    // Increment TPM count
-    const incrementTPMCount = useMemo(
-        () =>
-            createQuotaIncrementer(
-                () => Math.floor(Date.now() / 60000).toString(),
-                STORAGE_KEYS.tpmMinute,
-                STORAGE_KEYS.tpmCount,
-                true, // Validate input tokens
-            ),
-        [createQuotaIncrementer],
+    // Show token limit toast
+    const showTokenLimitToast = useCallback(
+        (used?: number, limit?: number) => {
+            toast.custom(
+                (t) => (
+                    <QuotaLimitToast
+                        type="token"
+                        used={used ?? dailyTokenLimit}
+                        limit={limit ?? dailyTokenLimit}
+                        onDismiss={() => toast.dismiss(t)}
+                        onConfigModel={onConfigModel}
+                    />
+                ),
+                { duration: 15000 },
+            )
+        },
+        [dailyTokenLimit, onConfigModel],
    )

    // Show TPM limit toast
-    const showTPMLimitToast = useCallback(() => {
-        const limitDisplay =
-            tpmLimit >= 1000 ? `${tpmLimit / 1000}k` : String(tpmLimit)
-        toast.error(
-            `Rate limit reached (${limitDisplay} tokens/min). Please wait 60 seconds before sending another request.`,
-            { duration: 8000 },
-        )
-    }, [tpmLimit])
+    const showTPMLimitToast = useCallback(
+        (limit?: number) => {
+            const effectiveLimit = limit ?? tpmLimit
+            const limitDisplay =
+                effectiveLimit >= 1000
+                    ? `${effectiveLimit / 1000}k`
+                    : String(effectiveLimit)
+            const message = formatMessage(dict.quota.tpmMessageDetailed, {
+                limit: limitDisplay,
+                seconds: 60,
+            })
+            toast.error(message, { duration: 8000 })
+        },
+        [tpmLimit, dict],
+    )

    return {
-        // Check functions
-        hasOwnApiKey,
-        checkDailyLimit,
-        checkTokenLimit,
-        checkTPMLimit,
-
-        // Increment functions
-        incrementRequestCount,
-        incrementTokenCount,
-        incrementTPMCount,
-
-        // Toast functions
        showQuotaLimitToast,
        showTokenLimitToast,
        showTPMLimitToast,
--- a/lib/user-id.ts
+++ b/lib/user-id.ts
@@ -0,0 +1,12 @@
+/**
+ * Generate a userId from request for tracking purposes.
+ * Uses base64url encoding of IP for URL-safe identifier.
+ * Note: base64 is reversible - this is NOT privacy protection.
+ */
+export function getUserIdFromRequest(req: Request): string {
+    const forwardedFor = req.headers.get("x-forwarded-for")
+    const rawIp = forwardedFor?.split(",")[0]?.trim() || "anonymous"
+    return rawIp === "anonymous"
+        ? rawIp
+        : `user-${Buffer.from(rawIp).toString("base64url")}`
+}
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -36,29 +36,73 @@ const VALID_ENTITIES = new Set(["lt", "gt", "amp", "quot", "apos"])
 /**
 * Check if mxCell XML output is complete (not truncated).
 * Complete XML ends with a self-closing tag (/>) or closing mxCell tag.
- * Also handles function-calling wrapper tags that may be incorrectly included.
+ * Uses a robust approach that handles any LLM provider's wrapper tags
+ * by finding the last valid mxCell ending and checking if suffix is just closing tags.
 * @param xml - The XML string to check (can be undefined/null)
 * @returns true if XML appears complete, false if truncated or empty
 */
 export function isMxCellXmlComplete(xml: string | undefined | null): boolean {
-    let trimmed = xml?.trim() || ""
+    const trimmed = xml?.trim() || ""
    if (!trimmed) return false

-    // Strip Anthropic function-calling wrapper tags if present
-    // These can leak into tool input due to AI SDK parsing issues
-    // Use loop because tags are nested: </mxCell></mxParameter></invoke>
-    let prev = ""
-    while (prev !== trimmed) {
-        prev = trimmed
-        trimmed = trimmed
-            .replace(/<\/mxParameter>\s*$/i, "")
-            .replace(/<\/invoke>\s*$/i, "")
-            .replace(/<\/antml:parameter>\s*$/i, "")
-            .replace(/<\/antml:invoke>\s*$/i, "")
-            .trim()
+    // Find position of last complete mxCell ending (either /> or </mxCell>)
+    const lastSelfClose = trimmed.lastIndexOf("/>")
+    const lastMxCellClose = trimmed.lastIndexOf("</mxCell>")
+
+    const lastValidEnd = Math.max(lastSelfClose, lastMxCellClose)
+
+    // No valid ending found at all
+    if (lastValidEnd === -1) return false
+
+    // Check what comes after the last valid ending
+    // For />: add 2 chars, for </mxCell>: add 9 chars
+    const endOffset = lastMxCellClose > lastSelfClose ? 9 : 2
+    const suffix = trimmed.slice(lastValidEnd + endOffset)
+
+    // If suffix is empty or only contains closing tags (any provider's wrapper) or whitespace, it's complete
+    // This regex matches any sequence of closing XML tags like </foo>, </bar>, </｜DSML｜xyz>
+    return /^(\s*<\/[^>]+>)*\s*$/.test(suffix)
+}
+
+/**
+ * Extract only complete mxCell elements from partial/streaming XML.
+ * This allows progressive rendering during streaming by ignoring incomplete trailing elements.
+ * @param xml - The partial XML string (may contain incomplete trailing mxCell)
+ * @returns XML string containing only complete mxCell elements
+ */
+export function extractCompleteMxCells(xml: string | undefined | null): string {
+    if (!xml) return ""
+
+    const completeCells: Array<{ index: number; text: string }> = []
+
+    // Match self-closing mxCell tags: <mxCell ... />
+    // Also match mxCell with nested mxGeometry: <mxCell ...>...<mxGeometry .../></mxCell>
+    const selfClosingPattern = /<mxCell\s+[^>]*\/>/g
+    const nestedPattern = /<mxCell\s+[^>]*>[\s\S]*?<\/mxCell>/g
+
+    // Find all self-closing mxCell elements
+    let match: RegExpExecArray | null
+    while ((match = selfClosingPattern.exec(xml)) !== null) {
+        completeCells.push({ index: match.index, text: match[0] })
    }

-    return trimmed.endsWith("/>") || trimmed.endsWith("</mxCell>")
+    // Find all mxCell elements with nested content (like mxGeometry)
+    while ((match = nestedPattern.exec(xml)) !== null) {
+        completeCells.push({ index: match.index, text: match[0] })
+    }
+
+    // Sort by position to maintain order
+    completeCells.sort((a, b) => a.index - b.index)
+
+    // Remove duplicates (a self-closing match might overlap with nested match)
+    const seen = new Set<number>()
+    const uniqueCells = completeCells.filter((cell) => {
+        if (seen.has(cell.index)) return false
+        seen.add(cell.index)
+        return true
+    })
+
+    return uniqueCells.map((c) => c.text).join("\n")
 }

 // ============================================================================
@@ -221,6 +265,21 @@ export function convertToLegalXml(xmlString: string): string {
            "&amp;",
        )

+        // Fix unescaped < and > in attribute values for XML parsing
+        // HTML content in value attributes (e.g., <b>Title</b>) needs to be escaped
+        // This is critical because DOMParser will fail on unescaped < > in attributes
+        if (/=\s*"[^"]*<[^"]*"/.test(cellContent)) {
+            cellContent = cellContent.replace(
+                /=\s*"([^"]*)"/g,
+                (_match, value) => {
+                    const escaped = value
+                        .replace(/</g, "&lt;")
+                        .replace(/>/g, "&gt;")
+                    return `="${escaped}"`
+                },
+            )
+        }
+
        // Indent each line of the matched block for readability.
        const formatted = cellContent
            .split("\n")
@@ -265,6 +324,20 @@ export function wrapWithMxFile(xml: string): string {
        content = xml.replace(/<\/?root>/g, "").trim()
    }

+    // Strip trailing LLM wrapper tags (from any provider: Anthropic, DeepSeek, etc.)
+    // Find the last valid mxCell ending and remove everything after it
+    const lastSelfClose = content.lastIndexOf("/>")
+    const lastMxCellClose = content.lastIndexOf("</mxCell>")
+    const lastValidEnd = Math.max(lastSelfClose, lastMxCellClose)
+    if (lastValidEnd !== -1) {
+        const endOffset = lastMxCellClose > lastSelfClose ? 9 : 2
+        const suffix = content.slice(lastValidEnd + endOffset)
+        // If suffix is only closing tags (wrapper tags), strip it
+        if (/^(\s*<\/[^>]+>)*\s*$/.test(suffix)) {
+            content = content.slice(0, lastValidEnd + endOffset)
+        }
+    }
+
    // Remove any existing root cells from content (LLM shouldn't include them, but handle it gracefully)
    // Use flexible patterns that match both self-closing (/>) and non-self-closing (></mxCell>) formats
    content = content
@@ -382,7 +455,7 @@ export function replaceNodes(currentXML: string, nodes: string): string {
 // ============================================================================

 export interface DiagramOperation {
-    type: "update" | "add" | "delete"
+    operation: "update" | "add" | "delete"
    cell_id: string
    new_xml?: string
 }
@@ -455,7 +528,7 @@ export function applyDiagramOperations(

    // Process each operation
    for (const op of operations) {
-        if (op.type === "update") {
+        if (op.operation === "update") {
            const existingCell = cellMap.get(op.cell_id)
            if (!existingCell) {
                errors.push({
@@ -507,7 +580,7 @@ export function applyDiagramOperations(

            // Update the map with the new element
            cellMap.set(op.cell_id, importedNode)
-        } else if (op.type === "add") {
+        } else if (op.operation === "add") {
            // Check if ID already exists
            if (cellMap.has(op.cell_id)) {
                errors.push({
@@ -559,33 +632,78 @@ export function applyDiagramOperations(

            // Add to map
            cellMap.set(op.cell_id, importedNode)
-        } else if (op.type === "delete") {
-            const existingCell = cellMap.get(op.cell_id)
-            if (!existingCell) {
+        } else if (op.operation === "delete") {
+            // Protect root cells from deletion
+            if (op.cell_id === "0" || op.cell_id === "1") {
                errors.push({
                    type: "delete",
                    cellId: op.cell_id,
-                    message: `Cell with id="${op.cell_id}" not found`,
+                    message: `Cannot delete root cell "${op.cell_id}"`,
                })
                continue
            }

-            // Check for edges referencing this cell (warning only, still delete)
-            const referencingEdges = root.querySelectorAll(
-                `mxCell[source="${op.cell_id}"], mxCell[target="${op.cell_id}"]`,
-            )
-            if (referencingEdges.length > 0) {
-                const edgeIds = Array.from(referencingEdges)
-                    .map((e) => e.getAttribute("id"))
-                    .join(", ")
-                console.warn(
-                    `[applyDiagramOperations] Deleting cell "${op.cell_id}" which is referenced by edges: ${edgeIds}`,
+            const existingCell = cellMap.get(op.cell_id)
+            if (!existingCell) {
+                // Cell not found - might have been cascade-deleted by a previous operation
+                // Skip silently instead of erroring (AI may redundantly list children/edges)
+                continue
+            }
+
+            // Cascade delete: collect all cells to delete (children + edges + self)
+            const cellsToDelete = new Set<string>()
+
+            // Recursive function to find all descendants
+            const collectDescendants = (cellId: string) => {
+                if (cellsToDelete.has(cellId)) return
+                cellsToDelete.add(cellId)
+
+                // Find children (cells where parent === cellId)
+                const children = root.querySelectorAll(
+                    `mxCell[parent="${cellId}"]`,
+                )
+                children.forEach((child) => {
+                    const childId = child.getAttribute("id")
+                    if (childId && childId !== "0" && childId !== "1") {
+                        collectDescendants(childId)
+                    }
+                })
+            }
+
+            // Collect the target cell and all its descendants
+            collectDescendants(op.cell_id)
+
+            // Find edges referencing any of the cells to be deleted
+            // Also recursively collect children of those edges (e.g., edge labels)
+            for (const cellId of cellsToDelete) {
+                const referencingEdges = root.querySelectorAll(
+                    `mxCell[source="${cellId}"], mxCell[target="${cellId}"]`,
+                )
+                referencingEdges.forEach((edge) => {
+                    const edgeId = edge.getAttribute("id")
+                    // Protect root cells from being added via edge references
+                    if (edgeId && edgeId !== "0" && edgeId !== "1") {
+                        // Recurse to collect edge's children (like labels)
+                        collectDescendants(edgeId)
+                    }
+                })
+            }
+
+            // Log what will be deleted
+            if (cellsToDelete.size > 1) {
+                console.log(
+                    `[applyDiagramOperations] Cascade delete "${op.cell_id}" → deleting ${cellsToDelete.size} cells: ${Array.from(cellsToDelete).join(", ")}`,
                )
            }

-            // Remove the node
-            existingCell.parentNode?.removeChild(existingCell)
-            cellMap.delete(op.cell_id)
+            // Delete all collected cells
+            for (const cellId of cellsToDelete) {
+                const cell = cellMap.get(cellId)
+                if (cell) {
+                    cell.parentNode?.removeChild(cell)
+                    cellMap.delete(cellId)
+                }
+            }
        }
    }

@@ -869,6 +987,21 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
        fixes.push("Removed CDATA wrapper")
    }

+    // 1b. Strip trailing LLM wrapper tags (DeepSeek, Anthropic, etc.)
+    // These are closing tags after the last valid mxCell that break XML parsing
+    const lastSelfClose = fixed.lastIndexOf("/>")
+    const lastMxCellClose = fixed.lastIndexOf("</mxCell>")
+    const lastValidEnd = Math.max(lastSelfClose, lastMxCellClose)
+    if (lastValidEnd !== -1) {
+        const endOffset = lastMxCellClose > lastSelfClose ? 9 : 2
+        const suffix = fixed.slice(lastValidEnd + endOffset)
+        // If suffix contains only closing tags (wrapper tags) or whitespace, strip it
+        if (/^(\s*<\/[^>]+>)+\s*$/.test(suffix)) {
+            fixed = fixed.slice(0, lastValidEnd + endOffset)
+            fixes.push("Stripped trailing LLM wrapper tags")
+        }
+    }
+
    // 2. Remove text before XML declaration or root element (only if it's garbage text, not valid XML)
    const xmlStart = fixed.search(/<(\?xml|mxGraphModel|mxfile)/i)
    if (xmlStart > 0 && !/^<[a-zA-Z]/.test(fixed.trim())) {
@@ -974,8 +1107,8 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
        fixes.push("Removed quotes around color values in style")
    }

-    // 4. Fix unescaped < in attribute values
-    // This is tricky - we need to find < inside quoted attribute values
+    // 4. Fix unescaped < and > in attribute values
+    // < is required to be escaped, > is not strictly required but we escape for consistency
    const attrPattern = /(=\s*")([^"]*?)(<)([^"]*?)(")/g
    let attrMatch
    let hasUnescapedLt = false
@@ -986,12 +1119,12 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
        }
    }
    if (hasUnescapedLt) {
-        // Replace < with &lt; inside attribute values
+        // Replace < and > with &lt; and &gt; inside attribute values
        fixed = fixed.replace(/=\s*"([^"]*)"/g, (_match, value) => {
-            const escaped = value.replace(/</g, "&lt;")
+            const escaped = value.replace(/</g, "&lt;").replace(/>/g, "&gt;")
            return `="${escaped}"`
        })
-        fixes.push("Escaped < characters in attribute values")
+        fixes.push("Escaped <> characters in attribute values")
    }

    // 5. Fix invalid character references (remove malformed ones)
@@ -1079,7 +1212,8 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
    }

    // 8c. Remove non-draw.io tags (after typo fixes so lowercase variants are fixed first)
-    // Valid draw.io tags: mxfile, diagram, mxGraphModel, root, mxCell, mxGeometry, mxPoint, Array, Object
+    // IMPORTANT: Only remove tags at the element level, NOT inside quoted attribute values
+    // Tags like <b>, <br> inside value="<b>text</b>" should be preserved (they're HTML content)
    const validDrawioTags = new Set([
        "mxfile",
        "diagram",
@@ -1092,25 +1226,59 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
        "Object",
        "mxRectangle",
    ])
+
+    // Helper: Check if a position is inside a quoted attribute value
+    // by counting unescaped quotes before that position
+    const isInsideQuotes = (str: string, pos: number): boolean => {
+        let inQuote = false
+        let quoteChar = ""
+        for (let i = 0; i < pos && i < str.length; i++) {
+            const c = str[i]
+            if (inQuote) {
+                if (c === quoteChar) inQuote = false
+            } else if (c === '"' || c === "'") {
+                // Check if this quote is part of an attribute (preceded by =)
+                // Look back for = sign
+                let j = i - 1
+                while (j >= 0 && /\s/.test(str[j])) j--
+                if (j >= 0 && str[j] === "=") {
+                    inQuote = true
+                    quoteChar = c
+                }
+            }
+        }
+        return inQuote
+    }
+
    const foreignTagPattern = /<\/?([a-zA-Z][a-zA-Z0-9_]*)[^>]*>/g
    let foreignMatch
    const foreignTags = new Set<string>()
+    const foreignTagPositions: Array<{
+        tag: string
+        start: number
+        end: number
+    }> = []
+
    while ((foreignMatch = foreignTagPattern.exec(fixed)) !== null) {
        const tagName = foreignMatch[1]
-        if (!validDrawioTags.has(tagName)) {
-            foreignTags.add(tagName)
-        }
+        // Skip if this is a valid draw.io tag
+        if (validDrawioTags.has(tagName)) continue
+        // Skip if this tag is inside a quoted attribute value
+        if (isInsideQuotes(fixed, foreignMatch.index)) continue
+
+        foreignTags.add(tagName)
+        foreignTagPositions.push({
+            tag: tagName,
+            start: foreignMatch.index,
+            end: foreignMatch.index + foreignMatch[0].length,
+        })
    }
-    if (foreignTags.size > 0) {
-        console.log(
-            "[autoFixXml] Step 8c: Found foreign tags:",
-            Array.from(foreignTags),
-        )
-        for (const tag of foreignTags) {
-            // Remove opening tags (with or without attributes)
-            fixed = fixed.replace(new RegExp(`<${tag}[^>]*>`, "gi"), "")
-            // Remove closing tags
-            fixed = fixed.replace(new RegExp(`</${tag}>`, "gi"), "")
+
+    if (foreignTagPositions.length > 0) {
+        // Remove tags from end to start to preserve indices
+        foreignTagPositions.sort((a, b) => b.start - a.start)
+        for (const { start, end } of foreignTagPositions) {
+            fixed = fixed.slice(0, start) + fixed.slice(end)
        }
        fixes.push(
            `Removed foreign tags: ${Array.from(foreignTags).join(", ")}`,
@@ -1161,6 +1329,7 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {

    // 10b. Remove extra closing tags (more closes than opens)
    // Need to properly count self-closing tags (they don't need closing tags)
+    // IMPORTANT: Only count tags at element level, NOT inside quoted attribute values
    const tagCounts = new Map<
        string,
        { opens: number; closes: number; selfClosing: number }
@@ -1169,12 +1338,18 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
    const fullTagPattern = /<(\/?[a-zA-Z][a-zA-Z0-9]*)[^>]*>/g
    let tagCountMatch
    while ((tagCountMatch = fullTagPattern.exec(fixed)) !== null) {
+        // Skip tags inside quoted attribute values (e.g., value="<b>Title</b>")
+        if (isInsideQuotes(fixed, tagCountMatch.index)) continue
+
        const fullMatch = tagCountMatch[0] // e.g., "<mxCell .../>" or "</mxCell>"
        const tagPart = tagCountMatch[1] // e.g., "mxCell" or "/mxCell"
        const isClosing = tagPart.startsWith("/")
        const isSelfClosing = fullMatch.endsWith("/>")
        const tagName = isClosing ? tagPart.slice(1) : tagPart

+        // Only count valid draw.io tags - skip partial/invalid tags like "mx" from streaming
+        if (!validDrawioTags.has(tagName)) continue
+
        let counts = tagCounts.get(tagName)
        if (!counts) {
            counts = { opens: 0, closes: 0, selfClosing: 0 }
--- a/next.config.ts
+++ b/next.config.ts
@@ -4,9 +4,26 @@ import packageJson from "./package.json"
 const nextConfig: NextConfig = {
    /* config options here */
    output: "standalone",
+    // Support for subdirectory deployment (e.g., https://example.com/nextaidrawio)
+    // Set NEXT_PUBLIC_BASE_PATH environment variable to your subdirectory path (e.g., /nextaidrawio)
+    basePath: process.env.NEXT_PUBLIC_BASE_PATH || "",
    env: {
        APP_VERSION: packageJson.version,
    },
+    // Include instrumentation.ts in standalone build for Langfuse telemetry
+    outputFileTracingIncludes: {
+        "*": ["./instrumentation.ts"],
+    },
 }

 export default nextConfig
+
+// Initialize OpenNext Cloudflare for local development only
+// This must be a dynamic import to avoid loading workerd binary during builds
+if (process.env.NODE_ENV === "development") {
+    import("@opennextjs/cloudflare").then(
+        ({ initOpenNextCloudflareForDev }) => {
+            initOpenNextCloudflareForDev()
+        },
+    )
+}
--- a/open-next.config.ts
+++ b/open-next.config.ts
@@ -0,0 +1,7 @@
+// default open-next.config.ts file created by @opennextjs/cloudflare
+import { defineCloudflareConfig } from "@opennextjs/cloudflare/config"
+import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache"
+
+export default defineCloudflareConfig({
+    incrementalCache: r2IncrementalCache,
+})
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "next-ai-draw-io",
-    "version": "0.4.5",
+    "version": "0.4.7",
    "license": "Apache-2.0",
    "private": true,
    "main": "dist-electron/main/index.js",
@@ -12,33 +12,39 @@
        "format": "biome check --write .",
        "check": "biome ci",
        "prepare": "husky",
+        "preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
+        "deploy": "opennextjs-cloudflare build && opennextjs-cloudflare deploy",
+        "upload": "opennextjs-cloudflare build && opennextjs-cloudflare upload",
+        "cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts",
        "electron:dev": "node scripts/electron-dev.mjs",
        "electron:build": "npm run build && npm run electron:compile",
        "electron:compile": "npx esbuild electron/main/index.ts electron/preload/index.ts electron/preload/settings.ts --bundle --platform=node --outdir=dist-electron --external:electron --sourcemap --packages=external && npx shx cp -r electron/settings dist-electron/",
        "electron:start": "npx cross-env NODE_ENV=development npx electron .",
        "electron:prepare": "node scripts/prepare-electron-build.mjs",
-        "dist": "npm run electron:build && npm run electron:prepare && npx electron-builder",
-        "dist:mac": "npm run electron:build && npm run electron:prepare && npx electron-builder --mac",
-        "dist:win": "npm run electron:build && npm run electron:prepare && npx electron-builder --win",
-        "dist:linux": "npm run electron:build && npm run electron:prepare && npx electron-builder --linux",
-        "dist:all": "npm run electron:build && npm run electron:prepare && npx electron-builder --mac --win --linux"
+        "dist": "npm run electron:build && npm run electron:prepare && npx electron-builder --config electron/electron-builder.yml",
+        "dist:mac": "npm run electron:build && npm run electron:prepare && npx electron-builder --config electron/electron-builder.yml --mac",
+        "dist:win": "npm run electron:build && npm run electron:prepare && npx electron-builder --config electron/electron-builder.yml --win",
+        "dist:linux": "npm run electron:build && npm run electron:prepare && npx electron-builder --config electron/electron-builder.yml --linux",
+        "dist:all": "npm run electron:build && npm run electron:prepare && npx electron-builder --config electron/electron-builder.yml --mac --win --linux"
    },
    "dependencies": {
-        "@ai-sdk/amazon-bedrock": "^3.0.70",
-        "@ai-sdk/anthropic": "^2.0.44",
-        "@ai-sdk/azure": "^2.0.69",
-        "@ai-sdk/deepseek": "^1.0.30",
-        "@ai-sdk/gateway": "^2.0.21",
-        "@ai-sdk/google": "^2.0.0",
-        "@ai-sdk/openai": "^2.0.19",
-        "@ai-sdk/react": "^2.0.107",
+        "@ai-sdk/amazon-bedrock": "^4.0.1",
+        "@ai-sdk/anthropic": "^3.0.0",
+        "@ai-sdk/azure": "^3.0.0",
+        "@ai-sdk/deepseek": "^2.0.0",
+        "@ai-sdk/gateway": "^3.0.0",
+        "@ai-sdk/google": "^3.0.0",
+        "@ai-sdk/openai": "^3.0.0",
+        "@ai-sdk/react": "^3.0.1",
+        "@aws-sdk/client-dynamodb": "^3.957.0",
        "@aws-sdk/credential-providers": "^3.943.0",
        "@formatjs/intl-localematcher": "^0.7.2",
        "@langfuse/client": "^4.4.9",
        "@langfuse/otel": "^4.4.4",
        "@langfuse/tracing": "^4.4.9",
        "@next/third-parties": "^16.0.6",
-        "@openrouter/ai-sdk-provider": "^1.2.3",
+        "@opennextjs/cloudflare": "1.14.7",
+        "@openrouter/ai-sdk-provider": "^1.5.4",
        "@opentelemetry/exporter-trace-otlp-http": "^0.208.0",
        "@opentelemetry/sdk-trace-node": "^2.2.0",
        "@radix-ui/react-alert-dialog": "^1.1.15",
@@ -53,15 +59,15 @@
        "@radix-ui/react-tooltip": "^1.1.8",
        "@radix-ui/react-use-controllable-state": "^1.2.2",
        "@xmldom/xmldom": "^0.9.8",
-        "ai": "^5.0.89",
+        "ai": "^6.0.1",
        "base-64": "^1.0.0",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "cmdk": "^1.1.1",
        "js-tiktoken": "^1.0.21",
-        "jsdom": "^26.0.0",
+        "jsdom": "^27.0.0",
        "jsonrepair": "^3.13.1",
-        "lucide-react": "^0.483.0",
+        "lucide-react": "^0.562.0",
        "motion": "^12.23.25",
        "negotiator": "^1.0.0",
        "next": "^16.0.7",
@@ -94,7 +100,7 @@
        "@tailwindcss/postcss": "^4",
        "@tailwindcss/typography": "^0.5.19",
        "@types/negotiator": "^0.6.4",
-        "@types/node": "^20",
+        "@types/node": "^24.0.0",
        "@types/pako": "^2.0.3",
        "@types/react": "^19",
        "@types/react-dom": "^19",
@@ -103,13 +109,19 @@
        "electron": "^39.2.7",
        "electron-builder": "^26.0.12",
        "esbuild": "^0.27.2",
-        "eslint": "9.39.1",
-        "eslint-config-next": "16.0.5",
+        "eslint": "9.39.2",
+        "eslint-config-next": "16.1.1",
        "husky": "^9.1.7",
        "lint-staged": "^16.2.7",
        "shx": "^0.4.0",
        "tailwindcss": "^4",
        "typescript": "^5",
-        "wait-on": "^9.0.3"
+        "wait-on": "^9.0.3",
+        "wrangler": "4.54.0"
+    },
+    "overrides": {
+        "@openrouter/ai-sdk-provider": {
+            "ai": "^6.0.1"
+        }
    }
 }
--- a/packages/mcp-server/README.md
+++ b/packages/mcp-server/README.md
@@ -97,7 +97,7 @@ Use the standard MCP configuration with:
 | Tool | Description |
 |------|-------------|
 | `start_session` | Opens browser with real-time diagram preview |
-| `display_diagram` | Create a new diagram from XML |
+| `create_new_diagram` | Create a new diagram from XML (requires `xml` argument) |
 | `edit_diagram` | Edit diagram by ID-based operations (update/add/delete cells) |
 | `get_diagram` | Get the current diagram XML |
 | `export_diagram` | Save diagram to a `.drawio` file |
--- a/packages/mcp-server/package-lock.json
+++ b/packages/mcp-server/package-lock.json
@@ -1,24 +1,24 @@
 {
    "name": "@next-ai-drawio/mcp-server",
-    "version": "0.1.5",
+    "version": "0.1.6",
    "lockfileVersion": 3,
    "requires": true,
    "packages": {
        "": {
            "name": "@next-ai-drawio/mcp-server",
-            "version": "0.1.5",
+            "version": "0.1.6",
            "license": "Apache-2.0",
            "dependencies": {
                "@modelcontextprotocol/sdk": "^1.0.4",
                "linkedom": "^0.18.0",
-                "open": "^10.1.0",
+                "open": "^11.0.0",
                "zod": "^3.24.0"
            },
            "bin": {
                "next-ai-drawio-mcp": "dist/index.js"
            },
            "devDependencies": {
-                "@types/node": "^20",
+                "@types/node": "^24.0.0",
                "tsx": "^4.19.0",
                "typescript": "^5"
            },
@@ -481,9 +481,9 @@
            }
        },
        "node_modules/@modelcontextprotocol/sdk": {
-            "version": "1.25.0",
-            "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.25.0.tgz",
-            "integrity": "sha512-z0Zhn/LmQ3yz91dEfd5QgS7DpSjA4pk+3z2++zKgn5L6iDFM9QapsVoAQSbKLvlrFsZk9+ru6yHHWNq2lCYJKQ==",
+            "version": "1.25.1",
+            "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.25.1.tgz",
+            "integrity": "sha512-yO28oVFFC7EBoiKdAn+VqRm+plcfv4v0xp6osG/VsCB0NlPZWi87ajbCZZ8f/RvOFLEu7//rSRmuZZ7lMoe3gQ==",
            "license": "MIT",
            "dependencies": {
                "@hono/node-server": "^1.19.7",
@@ -520,13 +520,13 @@
            }
        },
        "node_modules/@types/node": {
-            "version": "20.19.27",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.27.tgz",
-            "integrity": "sha512-N2clP5pJhB2YnZJ3PIHFk5RkygRX5WO/5f0WC08tp0wd+sv0rsJk3MqWn3CbNmT2J505a5336jaQj4ph1AdMug==",
+            "version": "24.10.4",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.4.tgz",
+            "integrity": "sha512-vnDVpYPMzs4wunl27jHrfmwojOGKya0xyM3sH+UE5iv5uPS6vX7UIoh6m+vQc5LGBq52HBKPIn/zcSZVzeDEZg==",
            "dev": true,
            "license": "MIT",
            "dependencies": {
-                "undici-types": "~6.21.0"
+                "undici-types": "~7.16.0"
            }
        },
        "node_modules/accepts": {
@@ -1034,6 +1034,7 @@
            "resolved": "https://registry.npmjs.org/express/-/express-5.2.1.tgz",
            "integrity": "sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==",
            "license": "MIT",
+            "peer": true,
            "dependencies": {
                "accepts": "^2.0.0",
                "body-parser": "^2.2.1",
@@ -1371,6 +1372,18 @@
                "url": "https://github.com/sponsors/sindresorhus"
            }
        },
+        "node_modules/is-in-ssh": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/is-in-ssh/-/is-in-ssh-1.0.0.tgz",
+            "integrity": "sha512-jYa6Q9rH90kR1vKB6NM7qqd1mge3Fx4Dhw5TVlK1MUBqhEOuCagrEHMevNuCcbECmXZ0ThXkRm+Ymr51HwEPAw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=20"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
        "node_modules/is-inside-container": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
@@ -1586,18 +1599,20 @@
            }
        },
        "node_modules/open": {
-            "version": "10.2.0",
-            "resolved": "https://registry.npmjs.org/open/-/open-10.2.0.tgz",
-            "integrity": "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==",
+            "version": "11.0.0",
+            "resolved": "https://registry.npmjs.org/open/-/open-11.0.0.tgz",
+            "integrity": "sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw==",
            "license": "MIT",
            "dependencies": {
-                "default-browser": "^5.2.1",
+                "default-browser": "^5.4.0",
                "define-lazy-prop": "^3.0.0",
+                "is-in-ssh": "^1.0.0",
                "is-inside-container": "^1.0.0",
-                "wsl-utils": "^0.1.0"
+                "powershell-utils": "^0.1.0",
+                "wsl-utils": "^0.3.0"
            },
            "engines": {
-                "node": ">=18"
+                "node": ">=20"
            },
            "funding": {
                "url": "https://github.com/sponsors/sindresorhus"
@@ -1640,6 +1655,18 @@
                "node": ">=16.20.0"
            }
        },
+        "node_modules/powershell-utils": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/powershell-utils/-/powershell-utils-0.1.0.tgz",
+            "integrity": "sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=20"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
        "node_modules/proxy-addr": {
            "version": "2.0.7",
            "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -1962,9 +1989,9 @@
            "license": "ISC"
        },
        "node_modules/undici-types": {
-            "version": "6.21.0",
-            "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
-            "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+            "version": "7.16.0",
+            "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+            "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
            "dev": true,
            "license": "MIT"
        },
@@ -2008,15 +2035,16 @@
            "license": "ISC"
        },
        "node_modules/wsl-utils": {
-            "version": "0.1.0",
-            "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz",
-            "integrity": "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==",
+            "version": "0.3.0",
+            "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.3.0.tgz",
+            "integrity": "sha512-3sFIGLiaDP7rTO4xh3g+b3AzhYDIUGGywE/WsmqzJWDxus5aJXVnPTNC/6L+r2WzrwXqVOdD262OaO+cEyPMSQ==",
            "license": "MIT",
            "dependencies": {
-                "is-wsl": "^3.1.0"
+                "is-wsl": "^3.1.0",
+                "powershell-utils": "^0.1.0"
            },
            "engines": {
-                "node": ">=18"
+                "node": ">=20"
            },
            "funding": {
                "url": "https://github.com/sponsors/sindresorhus"
@@ -2027,6 +2055,7 @@
            "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
            "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
            "license": "MIT",
+            "peer": true,
            "funding": {
                "url": "https://github.com/sponsors/colinhacks"
            }
--- a/packages/mcp-server/package.json
+++ b/packages/mcp-server/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@next-ai-drawio/mcp-server",
-    "version": "0.1.5",
+    "version": "0.1.10",
    "description": "MCP server for Next AI Draw.io - AI-powered diagram generation with real-time browser preview",
    "type": "module",
    "main": "dist/index.js",
@@ -38,11 +38,11 @@
    "dependencies": {
        "@modelcontextprotocol/sdk": "^1.0.4",
        "linkedom": "^0.18.0",
-        "open": "^10.1.0",
+        "open": "^11.0.0",
        "zod": "^3.24.0"
    },
    "devDependencies": {
-        "@types/node": "^20",
+        "@types/node": "^24.0.0",
        "tsx": "^4.19.0",
        "typescript": "^5"
    },
--- a/packages/mcp-server/src/diagram-operations.ts
+++ b/packages/mcp-server/src/diagram-operations.ts
@@ -4,7 +4,7 @@
 */

 export interface DiagramOperation {
-    type: "update" | "add" | "delete"
+    operation: "update" | "add" | "delete"
    cell_id: string
    new_xml?: string
 }
@@ -77,7 +77,7 @@ export function applyDiagramOperations(

    // Process each operation
    for (const op of operations) {
-        if (op.type === "update") {
+        if (op.operation === "update") {
            const existingCell = cellMap.get(op.cell_id)
            if (!existingCell) {
                errors.push({
@@ -129,7 +129,7 @@ export function applyDiagramOperations(

            // Update the map with the new element
            cellMap.set(op.cell_id, importedNode)
-        } else if (op.type === "add") {
+        } else if (op.operation === "add") {
            // Check if ID already exists
            if (cellMap.has(op.cell_id)) {
                errors.push({
@@ -181,33 +181,78 @@ export function applyDiagramOperations(

            // Add to map
            cellMap.set(op.cell_id, importedNode)
-        } else if (op.type === "delete") {
-            const existingCell = cellMap.get(op.cell_id)
-            if (!existingCell) {
+        } else if (op.operation === "delete") {
+            // Protect root cells from deletion
+            if (op.cell_id === "0" || op.cell_id === "1") {
                errors.push({
                    type: "delete",
                    cellId: op.cell_id,
-                    message: `Cell with id="${op.cell_id}" not found`,
+                    message: `Cannot delete root cell "${op.cell_id}"`,
                })
                continue
            }

-            // Check for edges referencing this cell (warning only, still delete)
-            const referencingEdges = root.querySelectorAll(
-                `mxCell[source="${op.cell_id}"], mxCell[target="${op.cell_id}"]`,
-            )
-            if (referencingEdges.length > 0) {
-                const edgeIds = Array.from(referencingEdges)
-                    .map((e) => e.getAttribute("id"))
-                    .join(", ")
-                console.warn(
-                    `[applyDiagramOperations] Deleting cell "${op.cell_id}" which is referenced by edges: ${edgeIds}`,
+            const existingCell = cellMap.get(op.cell_id)
+            if (!existingCell) {
+                // Cell not found - might have been cascade-deleted by a previous operation
+                // Skip silently instead of erroring (AI may redundantly list children/edges)
+                continue
+            }
+
+            // Cascade delete: collect all cells to delete (children + edges + self)
+            const cellsToDelete = new Set<string>()
+
+            // Recursive function to find all descendants
+            const collectDescendants = (cellId: string) => {
+                if (cellsToDelete.has(cellId)) return
+                cellsToDelete.add(cellId)
+
+                // Find children (cells where parent === cellId)
+                const children = root.querySelectorAll(
+                    `mxCell[parent="${cellId}"]`,
+                )
+                children.forEach((child) => {
+                    const childId = child.getAttribute("id")
+                    if (childId && childId !== "0" && childId !== "1") {
+                        collectDescendants(childId)
+                    }
+                })
+            }
+
+            // Collect the target cell and all its descendants
+            collectDescendants(op.cell_id)
+
+            // Find edges referencing any of the cells to be deleted
+            // Also recursively collect children of those edges (e.g., edge labels)
+            for (const cellId of cellsToDelete) {
+                const referencingEdges = root.querySelectorAll(
+                    `mxCell[source="${cellId}"], mxCell[target="${cellId}"]`,
+                )
+                referencingEdges.forEach((edge) => {
+                    const edgeId = edge.getAttribute("id")
+                    // Protect root cells from being added via edge references
+                    if (edgeId && edgeId !== "0" && edgeId !== "1") {
+                        // Recurse to collect edge's children (like labels)
+                        collectDescendants(edgeId)
+                    }
+                })
+            }
+
+            // Log what will be deleted
+            if (cellsToDelete.size > 1) {
+                console.log(
+                    `[applyDiagramOperations] Cascade delete "${op.cell_id}" → deleting ${cellsToDelete.size} cells: ${Array.from(cellsToDelete).join(", ")}`,
                )
            }

-            // Remove the node
-            existingCell.parentNode?.removeChild(existingCell)
-            cellMap.delete(op.cell_id)
+            // Delete all collected cells
+            for (const cellId of cellsToDelete) {
+                const cell = cellMap.get(cellId)
+                if (cell) {
+                    cell.parentNode?.removeChild(cell)
+                    cellMap.delete(cellId)
+                }
+            }
        }
    }

--- a/packages/mcp-server/src/index.ts
+++ b/packages/mcp-server/src/index.ts
@@ -78,7 +78,7 @@ server.prompt(

 ## Creating a New Diagram
 1. Call start_session to open the browser preview
-2. Use display_diagram with complete mxGraphModel XML to create a new diagram
+2. Use create_new_diagram with complete mxGraphModel XML to create a new diagram

 ## Adding Elements to Existing Diagram
 1. Use edit_diagram with "add" operation
@@ -91,7 +91,7 @@ server.prompt(
 3. For update, provide the cell_id and complete new mxCell XML

 ## Important Notes
- display_diagram REPLACES the entire diagram - only use for new diagrams
+- create_new_diagram REPLACES the entire diagram - only use for new diagrams
 - edit_diagram PRESERVES user's manual changes (fetches browser state first)
 - Always use unique cell_ids when adding elements (e.g., "shape-1", "arrow-2")`,
                },
@@ -150,19 +150,59 @@ server.registerTool(
    },
 )

-// Tool: display_diagram
+// Tool: create_new_diagram
 server.registerTool(
-    "display_diagram",
+    "create_new_diagram",
    {
-        description:
-            "Display a NEW draw.io diagram from XML. REPLACES the entire diagram. " +
-            "Use this for creating new diagrams from scratch. " +
-            "To ADD elements to an existing diagram, use edit_diagram with 'add' operation instead. " +
-            "You should generate valid draw.io/mxGraph XML format.",
+        description: `Create a NEW diagram from mxGraphModel XML. Use this when creating a diagram from scratch or replacing the current diagram entirely.
+
+CRITICAL: You MUST provide the 'xml' argument in EVERY call. Do NOT call this tool without xml.
+
+When to use this tool:
+- Creating a new diagram from scratch
+- Replacing the current diagram with a completely different one
+- Major structural changes that require regenerating the diagram
+
+When to use edit_diagram instead:
+- Small modifications to existing diagram
+- Adding/removing individual elements
+- Changing labels, colors, or positions
+
+XML FORMAT - Full mxGraphModel structure:
+<mxGraphModel>
+  <root>
+    <mxCell id="0"/>
+    <mxCell id="1" parent="0"/>
+    <mxCell id="2" value="Shape" style="rounded=1;" vertex="1" parent="1">
+      <mxGeometry x="100" y="100" width="120" height="60" as="geometry"/>
+    </mxCell>
+  </root>
+</mxGraphModel>
+
+LAYOUT CONSTRAINTS:
+- Keep all elements within x=0-800, y=0-600 (single page viewport)
+- Start from margins (x=40, y=40), keep elements grouped closely
+- Use unique IDs starting from "2" (0 and 1 are reserved)
+- Set parent="1" for top-level shapes
+- Space shapes 150-200px apart for clear edge routing
+
+EDGE ROUTING RULES:
+- Never let multiple edges share the same path - use different exitY/entryY values
+- For bidirectional connections (A↔B), use OPPOSITE sides
+- Always specify exitX, exitY, entryX, entryY explicitly in edge style
+- Route edges AROUND obstacles using waypoints (add 20-30px clearance)
+- Use natural connection points based on flow (not corners)
+
+COMMON STYLES:
+- Shapes: rounded=1; fillColor=#hex; strokeColor=#hex
+- Edges: endArrow=classic; edgeStyle=orthogonalEdgeStyle; curved=1
+- Text: fontSize=14; fontStyle=1 (bold); align=center`,
        inputSchema: {
            xml: z
                .string()
-                .describe("The draw.io XML to display (mxGraphModel format)"),
+                .describe(
+                    "REQUIRED: The complete mxGraphModel XML. Must always be provided.",
+                ),
        },
    },
    async ({ xml: inputXml }) => {
@@ -199,7 +239,7 @@ server.registerTool(
                }
            }

-            log.info(`Displaying diagram, ${xml.length} chars`)
+            log.info(`Setting diagram content, ${xml.length} chars`)

            // Sync from browser state first
            const browserState = getState(currentSession.id)
@@ -226,20 +266,20 @@ server.registerTool(
            // Save AI result (no SVG yet - will be captured by browser)
            addHistory(currentSession.id, xml, "")

-            log.info(`Diagram displayed successfully`)
+            log.info(`Diagram content set successfully`)

            return {
                content: [
                    {
                        type: "text",
-                        text: `Diagram displayed successfully!\n\nThe diagram is now visible in your browser.\n\nXML length: ${xml.length} characters`,
+                        text: `Diagram content set successfully!\n\nThe diagram is now visible in your browser.\n\nXML length: ${xml.length} characters`,
                    },
                ],
            }
        } catch (error) {
            const message =
                error instanceof Error ? error.message : String(error)
-            log.error("display_diagram failed:", message)
+            log.error("create_new_diagram failed:", message)
            return {
                content: [{ type: "text", text: `Error: ${message}` }],
                isError: true,
@@ -265,14 +305,22 @@ server.registerTool(
            "- add: Add a new cell. Provide cell_id (new unique id) and new_xml.\n" +
            "- update: Replace an existing cell by its id. Provide cell_id and complete new_xml.\n" +
            "- delete: Remove a cell by its id. Only cell_id is needed.\n\n" +
-            "For add/update, new_xml must be a complete mxCell element including mxGeometry.",
+            "For add/update, new_xml must be a complete mxCell element including mxGeometry.\n\n" +
+            "Example - Add a rectangle:\n" +
+            '{"operations": [{"operation": "add", "cell_id": "rect-1", "new_xml": "<mxCell id=\\"rect-1\\" value=\\"Hello\\" style=\\"rounded=0;\\" vertex=\\"1\\" parent=\\"1\\"><mxGeometry x=\\"100\\" y=\\"100\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/></mxCell>"}]}\n\n' +
+            "Example - Update a cell:\n" +
+            '{"operations": [{"operation": "update", "cell_id": "3", "new_xml": "<mxCell id=\\"3\\" value=\\"New Label\\" style=\\"rounded=1;\\" vertex=\\"1\\" parent=\\"1\\"><mxGeometry x=\\"100\\" y=\\"100\\" width=\\"120\\" height=\\"60\\" as=\\"geometry\\"/></mxCell>"}]}\n\n' +
+            "Example - Delete a cell:\n" +
+            '{"operations": [{"operation": "delete", "cell_id": "rect-1"}]}',
        inputSchema: {
            operations: z
                .array(
                    z.object({
-                        type: z
+                        operation: z
                            .enum(["update", "add", "delete"])
-                            .describe("Operation type"),
+                            .describe(
+                                "Operation to perform: add, update, or delete",
+                            ),
                        cell_id: z.string().describe("The id of the mxCell"),
                        new_xml: z
                            .string()
@@ -332,7 +380,7 @@ server.registerTool(
                    content: [
                        {
                            type: "text",
-                            text: "Error: No diagram to edit. Please create a diagram first with display_diagram.",
+                            text: "Error: No diagram to edit. Please create a diagram first with create_new_diagram.",
                        },
                    ],
                    isError: true,
@@ -356,13 +404,13 @@ server.registerTool(
                    )
                    if (fixed) {
                        log.info(
-                            `Operation ${op.type} ${op.cell_id}: XML auto-fixed: ${fixes.join(", ")}`,
+                            `Operation ${op.operation} ${op.cell_id}: XML auto-fixed: ${fixes.join(", ")}`,
                        )
                        return { ...op, new_xml: fixed }
                    }
                    if (!valid && error) {
                        log.warn(
-                            `Operation ${op.type} ${op.cell_id}: XML validation failed: ${error}`,
+                            `Operation ${op.operation} ${op.cell_id}: XML validation failed: ${error}`,
                        )
                    }
                }
@@ -466,7 +514,7 @@ server.registerTool(
                    content: [
                        {
                            type: "text",
-                            text: "No diagram exists yet. Use display_diagram to create one.",
+                            text: "No diagram exists yet. Use create_new_diagram to create one.",
                        },
                    ],
                }
--- a/packages/mcp-server/src/xml-validation.ts
+++ b/packages/mcp-server/src/xml-validation.ts
@@ -459,7 +459,8 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
        fixes.push("Removed quotes around color values in style")
    }

-    // 10. Fix unescaped < in attribute values
+    // 10. Fix unescaped < and > in attribute values
+    // < is required to be escaped, > is not strictly required but we escape for consistency
    const attrPattern = /(=\s*")([^"]*?)(<)([^"]*?)(")/g
    let attrMatch
    let hasUnescapedLt = false
@@ -471,10 +472,10 @@ export function autoFixXml(xml: string): { fixed: string; fixes: string[] } {
    }
    if (hasUnescapedLt) {
        fixed = fixed.replace(/=\s*"([^"]*)"/g, (_match, value) => {
-            const escaped = value.replace(/</g, "&lt;")
+            const escaped = value.replace(/</g, "&lt;").replace(/>/g, "&gt;")
            return `="${escaped}"`
        })
-        fixes.push("Escaped < characters in attribute values")
+        fixes.push("Escaped <> characters in attribute values")
    }

    // 11. Fix invalid hex character references
@@ -903,24 +904,30 @@ export function validateAndFixXml(xml: string): {

 /**
 * Check if mxCell XML output is complete (not truncated).
+ * Uses a robust approach that handles any LLM provider's wrapper tags
+ * by finding the last valid mxCell ending and checking if suffix is just closing tags.
 * @param xml - The XML string to check (can be undefined/null)
 * @returns true if XML appears complete, false if truncated or empty
 */
 export function isMxCellXmlComplete(xml: string | undefined | null): boolean {
-    let trimmed = xml?.trim() || ""
+    const trimmed = xml?.trim() || ""
    if (!trimmed) return false

-    // Strip wrapper tags if present
-    let prev = ""
-    while (prev !== trimmed) {
-        prev = trimmed
-        trimmed = trimmed
-            .replace(/<\/mxParameter>\s*$/i, "")
-            .replace(/<\/invoke>\s*$/i, "")
-            .replace(/<\/antml:parameter>\s*$/i, "")
-            .replace(/<\/antml:invoke>\s*$/i, "")
-            .trim()
-    }
+    // Find position of last complete mxCell ending (either /> or </mxCell>)
+    const lastSelfClose = trimmed.lastIndexOf("/>")
+    const lastMxCellClose = trimmed.lastIndexOf("</mxCell>")

-    return trimmed.endsWith("/>") || trimmed.endsWith("</mxCell>")
+    const lastValidEnd = Math.max(lastSelfClose, lastMxCellClose)
+
+    // No valid ending found at all
+    if (lastValidEnd === -1) return false
+
+    // Check what comes after the last valid ending
+    // For />: add 2 chars, for </mxCell>: add 9 chars
+    const endOffset = lastMxCellClose > lastSelfClose ? 9 : 2
+    const suffix = trimmed.slice(lastValidEnd + endOffset)
+
+    // If suffix is empty or only contains closing tags (any provider's wrapper) or whitespace, it's complete
+    // This regex matches any sequence of closing XML tags like </foo>, </bar>, </｜DSML｜xyz>
+    return /^(\s*<\/[^>]+>)*\s*$/.test(suffix)
 }
--- a/public/_headers
+++ b/public/_headers
@@ -0,0 +1,2 @@
+/_next/static/*
+  Cache-Control: public,max-age=31536000,immutable
--- a/public/doubao-color.png
+++ b/public/doubao-color.png
--- a/public/doubao-color.svg
+++ b/public/doubao-color.svg
@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Doubao</title><path d="M5.31 15.756c.172-3.75 1.883-5.999 2.549-6.739-3.26 2.058-5.425 5.658-6.358 8.308v1.12C1.501 21.513 4.226 24 7.59 24a6.59 6.59 0 002.2-.375c.353-.12.7-.248 1.039-.378.913-.899 1.65-1.91 2.243-2.992-4.877 2.431-7.974.072-7.763-4.5l.002.001z" fill="#1E37FC"></path><path d="M22.57 10.283c-1.212-.901-4.109-2.404-7.397-2.8.295 3.792.093 8.766-2.1 12.773a12.782 12.782 0 01-2.244 2.992c3.764-1.448 6.746-3.457 8.596-5.219 2.82-2.683 3.353-5.178 3.361-6.66a2.737 2.737 0 00-.216-1.084v-.002z" fill="#37E1BE"></path><path d="M14.303 1.867C12.955.7 11.248 0 9.39 0 7.532 0 5.883.677 4.545 1.807 2.791 3.29 1.627 5.557 1.5 8.125v9.201c.932-2.65 3.097-6.25 6.357-8.307.5-.318 1.025-.595 1.569-.829 1.883-.801 3.878-.932 5.746-.706-.222-2.83-.718-5.002-.87-5.617h.001z" fill="#A569FF"></path><path d="M17.305 4.961a199.47 199.47 0 01-1.08-1.094c-.202-.213-.398-.419-.586-.622l-1.333-1.378c.151.615.648 2.786.869 5.617 3.288.395 6.185 1.898 7.396 2.8-1.306-1.275-3.475-3.487-5.266-5.323z" fill="#1E37FC"></path></svg>
--- a/public/favicon-white.svg
+++ b/public/favicon-white.svg
@@ -0,0 +1,37 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1536.000000pt" height="1536.000000pt" viewBox="0 0 1536.000000 1536.000000"
+ preserveAspectRatio="xMidYMid meet">
+<g transform="translate(0.000000,1536.000000) scale(0.100000,-0.100000)"
+fill="#ffffff" stroke="none">
+<path d="M2765 14404 c-100 -29 -181 -58 -225 -82 -227 -125 -359 -296 -431
+-560 -19 -70 -19 -108 -19 -1175 0 -1068 1 -1104 20 -1172 58 -206 159 -356
+319 -474 71 -53 199 -121 226 -121 9 0 26 -5 38 -12 12 -6 62 -19 112 -29 85
+-17 207 -18 2219 -19 1172 0 2133 -3 2138 -8 4 -4 7 -246 6 -538 l-3 -529
+-2330 -5 c-2506 -6 -2373 -3 -2470 -54 -61 -31 -150 -113 -194 -178 -87 -128
+-82 -77 -90 -1025 l-6 -838 -360 -6 c-292 -4 -368 -8 -405 -21 -194 -68 -303
+-177 -373 -372 l-22 -61 1 -2887 c1 -2716 2 -2890 18 -2935 56 -153 161 -276
+286 -334 126 -59 0 -54 1400 -54 1394 0 1290 -4 1410 53 95 45 198 148 242
+241 62 133 58 -93 58 3026 0 2992 1 2883 -40 2990 -59 156 -183 272 -360 337
+-25 9 -146 14 -440 18 l-405 5 0 540 0 540 2020 3 c1111 1 2030 0 2043 -3 l22
+-5 -2 -538 -3 -537 -380 -6 c-312 -4 -388 -8 -426 -21 -195 -68 -326 -204
+-383 -399 -15 -51 -16 -295 -16 -2921 0 -2778 1 -2867 19 -2920 36 -104 72
+-167 134 -230 75 -78 115 -105 222 -151 l50 -22 1219 -3 c672 -1 1255 1 1300
+6 109 12 217 63 298 140 73 69 107 118 144 208 l29 69 3 2880 c2 2687 1 2884
+-15 2945 -48 183 -188 332 -373 398 -37 13 -114 17 -430 21 l-385 6 -3 534
+c-2 421 0 536 10 543 7 4 925 8 2039 8 1718 0 2028 -2 2038 -14 8 -10 11 -154
+11 -531 -1 -284 -4 -523 -7 -531 -4 -12 -69 -14 -392 -14 -354 0 -391 -2 -448
+-20 -168 -52 -282 -148 -353 -295 -22 -45 -40 -91 -40 -103 0 -11 -5 -33 -10
+-47 -7 -18 -10 -988 -10 -2875 0 -2393 2 -2858 14 -2902 43 -167 148 -298 293
+-369 57 -27 107 -44 151 -50 88 -11 2429 -11 2508 0 210 31 416 238 445 450 6
+39 8 1245 7 2926 -3 2713 -4 2862 -21 2900 -41 93 -74 150 -110 191 -46 52
+-149 134 -169 134 -8 0 -19 5 -24 10 -6 6 -42 19 -80 30 -63 18 -100 20 -415
+20 -307 0 -348 2 -353 16 -3 9 -6 390 -6 848 0 797 -1 834 -19 886 -31 87 -50
+118 -111 183 -66 70 -141 119 -221 144 -50 16 -228 18 -2389 23 l-2335 5 0
+535 0 535 2165 5 c1191 3 2170 8 2176 12 6 4 35 12 65 17 201 35 435 198 539
+376 55 93 82 153 110 245 19 63 20 94 20 1167 0 1047 -1 1106 -19 1180 -70
+290 -275 523 -539 613 -160 54 232 50 -5028 49 -4182 0 -4856 -2 -4899 -15z"/>
+</g>
+</svg>
--- a/scripts/test-diagram-operations.mjs
+++ b/scripts/test-diagram-operations.mjs
@@ -22,7 +22,7 @@ function applyDiagramOperations(xmlContent, operations) {
            result: xmlContent,
            errors: [
                {
-                    type: "update",
+                    operation: "update",
                    cellId: "",
                    message: `XML parse error: ${parseError.textContent}`,
                },
@@ -36,7 +36,7 @@ function applyDiagramOperations(xmlContent, operations) {
            result: xmlContent,
            errors: [
                {
-                    type: "update",
+                    operation: "update",
                    cellId: "",
                    message: "Could not find <root> element in XML",
                },
@@ -51,11 +51,11 @@ function applyDiagramOperations(xmlContent, operations) {
    })

    for (const op of operations) {
-        if (op.type === "update") {
+        if (op.operation === "update") {
            const existingCell = cellMap.get(op.cell_id)
            if (!existingCell) {
                errors.push({
-                    type: "update",
+                    operation: "update",
                    cellId: op.cell_id,
                    message: `Cell with id="${op.cell_id}" not found`,
                })
@@ -63,7 +63,7 @@ function applyDiagramOperations(xmlContent, operations) {
            }
            if (!op.new_xml) {
                errors.push({
-                    type: "update",
+                    operation: "update",
                    cellId: op.cell_id,
                    message: "new_xml is required for update operation",
                })
@@ -76,7 +76,7 @@ function applyDiagramOperations(xmlContent, operations) {
            const newCell = newDoc.querySelector("mxCell")
            if (!newCell) {
                errors.push({
-                    type: "update",
+                    operation: "update",
                    cellId: op.cell_id,
                    message: "new_xml must contain an mxCell element",
                })
@@ -85,7 +85,7 @@ function applyDiagramOperations(xmlContent, operations) {
            const newCellId = newCell.getAttribute("id")
            if (newCellId !== op.cell_id) {
                errors.push({
-                    type: "update",
+                    operation: "update",
                    cellId: op.cell_id,
                    message: `ID mismatch: cell_id is "${op.cell_id}" but new_xml has id="${newCellId}"`,
                })
@@ -94,10 +94,10 @@ function applyDiagramOperations(xmlContent, operations) {
            const importedNode = doc.importNode(newCell, true)
            existingCell.parentNode?.replaceChild(importedNode, existingCell)
            cellMap.set(op.cell_id, importedNode)
-        } else if (op.type === "add") {
+        } else if (op.operation === "add") {
            if (cellMap.has(op.cell_id)) {
                errors.push({
-                    type: "add",
+                    operation: "add",
                    cellId: op.cell_id,
                    message: `Cell with id="${op.cell_id}" already exists`,
                })
@@ -105,7 +105,7 @@ function applyDiagramOperations(xmlContent, operations) {
            }
            if (!op.new_xml) {
                errors.push({
-                    type: "add",
+                    operation: "add",
                    cellId: op.cell_id,
                    message: "new_xml is required for add operation",
                })
@@ -118,7 +118,7 @@ function applyDiagramOperations(xmlContent, operations) {
            const newCell = newDoc.querySelector("mxCell")
            if (!newCell) {
                errors.push({
-                    type: "add",
+                    operation: "add",
                    cellId: op.cell_id,
                    message: "new_xml must contain an mxCell element",
                })
@@ -127,7 +127,7 @@ function applyDiagramOperations(xmlContent, operations) {
            const newCellId = newCell.getAttribute("id")
            if (newCellId !== op.cell_id) {
                errors.push({
-                    type: "add",
+                    operation: "add",
                    cellId: op.cell_id,
                    message: `ID mismatch: cell_id is "${op.cell_id}" but new_xml has id="${newCellId}"`,
                })
@@ -136,11 +136,11 @@ function applyDiagramOperations(xmlContent, operations) {
            const importedNode = doc.importNode(newCell, true)
            root.appendChild(importedNode)
            cellMap.set(op.cell_id, importedNode)
-        } else if (op.type === "delete") {
+        } else if (op.operation === "delete") {
            const existingCell = cellMap.get(op.cell_id)
            if (!existingCell) {
                errors.push({
-                    type: "delete",
+                    operation: "delete",
                    cellId: op.cell_id,
                    message: `Cell with id="${op.cell_id}" not found`,
                })
@@ -201,7 +201,7 @@ function assert(condition, message) {
 test("Update operation changes cell value", () => {
    const { result, errors } = applyDiagramOperations(sampleXml, [
        {
-            type: "update",
+            operation: "update",
            cell_id: "2",
            new_xml:
                '<mxCell id="2" value="Updated Box A" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="100" y="100" width="120" height="60" as="geometry"/></mxCell>',
@@ -224,7 +224,7 @@ test("Update operation changes cell value", () => {
 test("Update operation fails for non-existent cell", () => {
    const { errors } = applyDiagramOperations(sampleXml, [
        {
-            type: "update",
+            operation: "update",
            cell_id: "999",
            new_xml: '<mxCell id="999" value="Test"/>',
        },
@@ -239,7 +239,7 @@ test("Update operation fails for non-existent cell", () => {
 test("Update operation fails on ID mismatch", () => {
    const { errors } = applyDiagramOperations(sampleXml, [
        {
-            type: "update",
+            operation: "update",
            cell_id: "2",
            new_xml: '<mxCell id="WRONG" value="Test"/>',
        },
@@ -254,7 +254,7 @@ test("Update operation fails on ID mismatch", () => {
 test("Add operation creates new cell", () => {
    const { result, errors } = applyDiagramOperations(sampleXml, [
        {
-            type: "add",
+            operation: "add",
            cell_id: "new1",
            new_xml:
                '<mxCell id="new1" value="New Box" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="500" y="100" width="120" height="60" as="geometry"/></mxCell>',
@@ -274,7 +274,7 @@ test("Add operation creates new cell", () => {
 test("Add operation fails for duplicate ID", () => {
    const { errors } = applyDiagramOperations(sampleXml, [
        {
-            type: "add",
+            operation: "add",
            cell_id: "2",
            new_xml: '<mxCell id="2" value="Duplicate"/>',
        },
@@ -289,7 +289,7 @@ test("Add operation fails for duplicate ID", () => {
 test("Add operation fails on ID mismatch", () => {
    const { errors } = applyDiagramOperations(sampleXml, [
        {
-            type: "add",
+            operation: "add",
            cell_id: "new1",
            new_xml: '<mxCell id="WRONG" value="Test"/>',
        },
@@ -303,7 +303,7 @@ test("Add operation fails on ID mismatch", () => {

 test("Delete operation removes cell", () => {
    const { result, errors } = applyDiagramOperations(sampleXml, [
-        { type: "delete", cell_id: "3" },
+        { operation: "delete", cell_id: "3" },
    ])
    assert(
        errors.length === 0,
@@ -315,7 +315,7 @@ test("Delete operation removes cell", () => {

 test("Delete operation fails for non-existent cell", () => {
    const { errors } = applyDiagramOperations(sampleXml, [
-        { type: "delete", cell_id: "999" },
+        { operation: "delete", cell_id: "999" },
    ])
    assert(errors.length === 1, "Should have one error")
    assert(
@@ -327,18 +327,18 @@ test("Delete operation fails for non-existent cell", () => {
 test("Multiple operations in sequence", () => {
    const { result, errors } = applyDiagramOperations(sampleXml, [
        {
-            type: "update",
+            operation: "update",
            cell_id: "2",
            new_xml:
                '<mxCell id="2" value="Updated" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="100" y="100" width="120" height="60" as="geometry"/></mxCell>',
        },
        {
-            type: "add",
+            operation: "add",
            cell_id: "new1",
            new_xml:
                '<mxCell id="new1" value="Added" style="rounded=1;" vertex="1" parent="1"><mxGeometry x="500" y="100" width="120" height="60" as="geometry"/></mxCell>',
        },
-        { type: "delete", cell_id: "3" },
+        { operation: "delete", cell_id: "3" },
    ])
    assert(
        errors.length === 0,
@@ -354,14 +354,14 @@ test("Multiple operations in sequence", () => {

 test("Invalid XML returns parse error", () => {
    const { errors } = applyDiagramOperations("<not valid xml", [
-        { type: "delete", cell_id: "1" },
+        { operation: "delete", cell_id: "1" },
    ])
    assert(errors.length === 1, "Should have one error")
 })

 test("Missing root element returns error", () => {
    const { errors } = applyDiagramOperations("<mxfile></mxfile>", [
-        { type: "delete", cell_id: "1" },
+        { operation: "delete", cell_id: "1" },
    ])
    assert(errors.length === 1, "Should have one error")
    assert(
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -22,6 +22,7 @@
            "@/*": ["./*"]
        }
    },
+    "files": ["electron/electron.d.ts"],
    "include": [
        "next-env.d.ts",
        "**/*.ts",
--- a/wrangler.jsonc
+++ b/wrangler.jsonc
@@ -0,0 +1,23 @@
+{
+    "$schema": "node_modules/wrangler/config-schema.json",
+    "main": ".open-next/worker.js",
+    "name": "next-ai-draw-io-worker",
+    "compatibility_date": "2025-12-08", // must be a today or past compatibility_date
+    "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"
+        }
+    ]
+}
				`@@ -0,0 +1 @@`
				<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Doubao</title><path d="M5.31 15.756c.172-3.75 1.883-5.999 2.549-6.739-3.26 2.058-5.425 5.658-6.358 8.308v1.12C1.501 21.513 4.226 24 7.59 24a6.59 6.59 0 002.2-.375c.353-.12.7-.248 1.039-.378.913-.899 1.65-1.91 2.243-2.992-4.877 2.431-7.974.072-7.763-4.5l.002.001z" fill="#1E37FC"></path><path d="M22.57 10.283c-1.212-.901-4.109-2.404-7.397-2.8.295 3.792.093 8.766-2.1 12.773a12.782 12.782 0 01-2.244 2.992c3.764-1.448 6.746-3.457 8.596-5.219 2.82-2.683 3.353-5.178 3.361-6.66a2.737 2.737 0 00-.216-1.084v-.002z" fill="#37E1BE"></path><path d="M14.303 1.867C12.955.7 11.248 0 9.39 0 7.532 0 5.883.677 4.545 1.807 2.791 3.29 1.627 5.557 1.5 8.125v9.201c.932-2.65 3.097-6.25 6.357-8.307.5-.318 1.025-.595 1.569-.829 1.883-.801 3.878-.932 5.746-.706-.222-2.83-.718-5.002-.87-5.617h.001z" fill="#A569FF"></path><path d="M17.305 4.961a199.47 199.47 0 01-1.08-1.094c-.202-.213-.398-.419-.586-.622l-1.333-1.378c.151.615.648 2.786.869 5.617 3.288.395 6.185 1.898 7.396 2.8-1.306-1.275-3.475-3.487-5.266-5.323z" fill="#1E37FC"></path></svg>