fix: zoom reset on drag and IndexedDB version conflict

- Fix zoom resetting when dragging items (#775): removed useEffect that called load() on every autosave-triggered chartXML change, which reset the viewport. Moved diagram restore logic to onDrawioLoad where it only fires on remount. - Fix IndexedDB VersionError: template-storage.ts shared the same DB name as session-storage.ts but at version 2, causing session storage to fail with "requested version (1) < existing version (2)". Give templates their own DB ("next-ai-drawio-templates").
2026-10-03 16:27:47 +08:00 · 2026-04-03 16:37:16 +09:00
40 changed files with 345 additions and 562 deletions
@@ -37,7 +37,7 @@ jobs:
      - name: Download draw.io static files for offline use
        run: |
          rm -rf public/drawio
-          git clone --depth 1 https://github.com/jgraph/drawio.git /tmp/drawio
+          git clone --depth 1 --branch v29.3.5 https://github.com/jgraph/drawio.git /tmp/drawio
          mkdir -p public/drawio
          cp -r /tmp/drawio/src/main/webapp/* public/drawio/
          rm -rf public/drawio/WEB-INF
@@ -70,7 +70,7 @@ jobs:
        shell: bash
        run: |
          rm -rf public/drawio
-          git clone --depth 1 https://github.com/jgraph/drawio.git /tmp/drawio
+          git clone --depth 1 --branch v29.3.5 https://github.com/jgraph/drawio.git /tmp/drawio
          mkdir -p public/drawio
          cp -r /tmp/drawio/src/main/webapp/* public/drawio/
          rm -rf public/drawio/WEB-INF
@@ -31,7 +31,7 @@ https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
  - [Table of Contents](#table-of-contents)
  - [Examples](#examples)
  - [Features](#features)
-  - [MCP Server](#mcp-server)
+  - [MCP Server (Preview)](#mcp-server-preview)
    - [Claude Code CLI](#claude-code-cli)
  - [Getting Started](#getting-started)
    - [Try it Online](#try-it-online)
@@ -63,24 +63,24 @@ Here are some example prompts and their generated diagrams:
  </tr>
  <tr>
    <td width="50%" valign="top">
-      <strong>RAG Technique Diagram</strong><br />
-      <p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p>
-      <img src="./public/rag_prod.svg" alt="RAG Architecture Diagram" width="480" />
+      <strong>GCP architecture diagram</strong><br />
+      <p><strong>Prompt:</strong> Generate a GCP architecture diagram with **GCP icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
+      <img src="./public/gcp_demo.svg" alt="GCP Architecture Diagram" width="480" />
    </td>
    <td width="50%" valign="top">
-      <strong>Authentication using React and AWS</strong><br />
-      <p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p>
-      <img src="./public/auth.svg" alt="Authentication Architecture Diagram" width="480" />
+      <strong>AWS architecture diagram</strong><br />
+      <p><strong>Prompt:</strong> Generate a AWS architecture diagram with **AWS icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
+      <img src="./public/aws_demo.svg" alt="AWS Architecture Diagram" width="480" />
    </td>
  </tr>
  <tr>
    <td width="50%" valign="top">
-      <strong>Open Innovation</strong><br />
-      <p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p>
-      <img src="./public/inno.svg" alt="Open Innovation Diagram" width="480" />
+      <strong>Azure architecture diagram</strong><br />
+      <p><strong>Prompt:</strong> Generate a Azure architecture diagram with **Azure icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
+      <img src="./public/azure_demo.svg" alt="Azure Architecture Diagram" width="480" />
    </td>
    <td width="50%" valign="top">
-      <strong>Cat sketch</strong><br />
+      <strong>Cat sketch prompt</strong><br />
      <p><strong>Prompt:</strong> Draw a cute cat for me.</p>
      <img src="./public/cat_demo.svg" alt="Cat Drawing" width="240" />
    </td>
@@ -99,7 +99,9 @@ Here are some example prompts and their generated diagrams:
 -   **Cloud Architecture Diagram Support**: Specialized support for generating cloud architecture diagrams (AWS, GCP, Azure)
 -   **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization

-## MCP Server
+## MCP Server (Preview)
+
+> **Preview Feature**: This feature is experimental and may not be stable.

 Use Next AI Draw.io with AI agents like Claude Desktop, Cursor, and VS Code via MCP (Model Context Protocol).

@@ -175,106 +175,92 @@ export default function AboutCN() {
                    </p>

                    <div className="space-y-8">
-                        {/* ResNet50 Architecture */}
+                        {/* Animated Transformer */}
                        <div className="text-center">
                            <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                ResNet50模型架构动画
+                                动画Transformer连接器
                            </h3>
                            <p className="text-gray-600 mb-4">
-                                <strong>Prompt:</strong> Give me an{" "}
-                                <strong>animated</strong> architecture diagram
-                                of the ResNet50 model.
+                                <strong>提示词：</strong> 给我一个带有
+                                <strong>动画连接器</strong>的Transformer架构图。
                            </p>
-                            <div className="bg-neutral-950 rounded-lg p-4 inline-block">
-                                <Image
-                                    src="/resnet50.svg"
-                                    alt="ResNet50模型架构图"
-                                    width={480}
-                                    height={360}
-                                    className="mx-auto"
-                                />
-                            </div>
+                            <Image
+                                src="/animated_connectors.svg"
+                                alt="带动画连接器的Transformer架构"
+                                width={480}
+                                height={360}
+                                className="mx-auto"
+                            />
                        </div>

-                        {/* Diagram Grid */}
+                        {/* Cloud Architecture Grid */}
                        <div className="grid md:grid-cols-2 gap-6">
                            <div className="text-center">
                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    RAG技术图
+                                    GCP架构图
                                </h3>
                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate a RAG
-                                    architecture diagram for{" "}
-                                    <strong>chat application</strong>. Use
-                                    connected diagram for data ingestion
+                                    <strong>提示词：</strong> 使用
+                                    <strong>GCP图标</strong>
+                                    生成一个GCP架构图。用户连接到托管在实例上的前端。
                                </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    <Image
-                                        src="/rag_prod.svg"
-                                        alt="RAG架构图"
-                                        width={480}
-                                        height={360}
-                                        className="max-w-full max-h-full object-contain"
-                                    />
-                                </div>
+                                <Image
+                                    src="/gcp_demo.svg"
+                                    alt="GCP架构图"
+                                    width={400}
+                                    height={300}
+                                    className="mx-auto"
+                                />
                            </div>
                            <div className="text-center">
                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    React和AWS认证流程
+                                    AWS架构图
                                </h3>
                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate
-                                    authentication process using React with{" "}
-                                    <strong>AWS</strong>. Use Serverless
-                                    architecture.
+                                    <strong>提示词：</strong> 使用
+                                    <strong>AWS图标</strong>
+                                    生成一个AWS架构图。用户连接到托管在实例上的前端。
                                </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    <Image
-                                        src="/auth.svg"
-                                        alt="认证架构图"
-                                        width={480}
-                                        height={360}
-                                        className="max-w-full max-h-full object-contain"
-                                    />
-                                </div>
+                                <Image
+                                    src="/aws_demo.svg"
+                                    alt="AWS架构图"
+                                    width={400}
+                                    height={300}
+                                    className="mx-auto"
+                                />
                            </div>
                            <div className="text-center">
                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    敏捷Scrum流程
+                                    Azure架构图
                                </h3>
                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate agile
-                                    scrum workflow diagram for software
-                                    development team.
+                                    <strong>提示词：</strong> 使用
+                                    <strong>Azure图标</strong>
+                                    生成一个Azure架构图。用户连接到托管在实例上的前端。
                                </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    <Image
-                                        src="/agile_scrum.svg"
-                                        alt="敏捷Scrum流程图"
-                                        width={480}
-                                        height={360}
-                                        className="max-w-full max-h-full object-contain"
-                                    />
-                                </div>
+                                <Image
+                                    src="/azure_demo.svg"
+                                    alt="Azure架构图"
+                                    width={400}
+                                    height={300}
+                                    className="mx-auto"
+                                />
                            </div>
                            <div className="text-center">
                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    开放式创新
+                                    猫咪素描
                                </h3>
                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Create
-                                    visualization of Henry Chesbrough&apos;s
-                                    Open Innovation model.
+                                    <strong>提示词：</strong>{" "}
+                                    给我画一只可爱的猫。
                                </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    <Image
-                                        src="/inno.svg"
-                                        alt="开放式创新图"
-                                        width={480}
-                                        height={360}
-                                        className="max-w-full max-h-full object-contain"
-                                    />
-                                </div>
+                                <Image
+                                    src="/cat_demo.svg"
+                                    alt="猫咪绘图"
+                                    width={240}
+                                    height={240}
+                                    className="mx-auto"
+                                />
                            </div>
                        </div>
                    </div>
@@ -168,106 +168,93 @@ export default function AboutJA() {
                    </p>

                    <div className="space-y-8">
-                        {/* ResNet50 Architecture */}
+                        {/* Animated Transformer */}
                        <div className="text-center">
                            <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                ResNet50モデルアーキテクチャアニメーション
+                                アニメーションTransformerコネクタ
                            </h3>
                            <p className="text-gray-600 mb-4">
-                                <strong>Prompt:</strong> Give me an{" "}
-                                <strong>animated</strong> architecture diagram
-                                of the ResNet50 model.
+                                <strong>プロンプト：</strong>{" "}
+                                <strong>アニメーションコネクタ</strong>
+                                付きのTransformerアーキテクチャ図を作成してください。
                            </p>
-                            <div className="bg-neutral-950 rounded-lg p-4 inline-block">
-                                <Image
-                                    src="/resnet50.svg"
-                                    alt="ResNet50モデルアーキテクチャ図"
-                                    width={480}
-                                    height={360}
-                                    className="mx-auto"
-                                />
-                            </div>
+                            <Image
+                                src="/animated_connectors.svg"
+                                alt="アニメーションコネクタ付きTransformerアーキテクチャ"
+                                width={480}
+                                height={360}
+                                className="mx-auto"
+                            />
                        </div>

-                        {/* Diagram Grid */}
+                        {/* Cloud Architecture Grid */}
                        <div className="grid md:grid-cols-2 gap-6">
                            <div className="text-center">
                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    RAG技術ダイアグラム
+                                    GCPアーキテクチャ図
                                </h3>
                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate a RAG
-                                    architecture diagram for{" "}
-                                    <strong>chat application</strong>. Use
-                                    connected diagram for data ingestion
+                                    <strong>プロンプト：</strong>{" "}
+                                    <strong>GCPアイコン</strong>
+                                    を使用してGCPアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
                                </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    <Image
-                                        src="/rag_prod.svg"
-                                        alt="RAGアーキテクチャ図"
-                                        width={480}
-                                        height={360}
-                                        className="max-w-full max-h-full object-contain"
-                                    />
-                                </div>
+                                <Image
+                                    src="/gcp_demo.svg"
+                                    alt="GCPアーキテクチャ図"
+                                    width={400}
+                                    height={300}
+                                    className="mx-auto"
+                                />
                            </div>
                            <div className="text-center">
                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    ReactとAWSによる認証
+                                    AWSアーキテクチャ図
                                </h3>
                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate
-                                    authentication process using React with{" "}
-                                    <strong>AWS</strong>. Use Serverless
-                                    architecture.
+                                    <strong>プロンプト：</strong>{" "}
+                                    <strong>AWSアイコン</strong>
+                                    を使用してAWSアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
                                </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    <Image
-                                        src="/auth.svg"
-                                        alt="認証アーキテクチャ図"
-                                        width={480}
-                                        height={360}
-                                        className="max-w-full max-h-full object-contain"
-                                    />
-                                </div>
+                                <Image
+                                    src="/aws_demo.svg"
+                                    alt="AWSアーキテクチャ図"
+                                    width={400}
+                                    height={300}
+                                    className="mx-auto"
+                                />
                            </div>
                            <div className="text-center">
                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    アジャイルスクラムプロセス
+                                    Azureアーキテクチャ図
                                </h3>
                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate agile
-                                    scrum workflow diagram for software
-                                    development team.
+                                    <strong>プロンプト：</strong>{" "}
+                                    <strong>Azureアイコン</strong>
+                                    を使用してAzureアーキテクチャ図を生成してください。ユーザーがインスタンス上でホストされているフロントエンドに接続します。
                                </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    <Image
-                                        src="/agile_scrum.svg"
-                                        alt="アジャイルスクラム図"
-                                        width={480}
-                                        height={360}
-                                        className="max-w-full max-h-full object-contain"
-                                    />
-                                </div>
+                                <Image
+                                    src="/azure_demo.svg"
+                                    alt="Azureアーキテクチャ図"
+                                    width={400}
+                                    height={300}
+                                    className="mx-auto"
+                                />
                            </div>
                            <div className="text-center">
                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    オープンイノベーション
+                                    猫のスケッチ
                                </h3>
                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Create
-                                    visualization of Henry Chesbrough&apos;s
-                                    Open Innovation model.
+                                    <strong>プロンプト：</strong>{" "}
+                                    かわいい猫を描いてください。
                                </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    <Image
-                                        src="/inno.svg"
-                                        alt="オープンイノベーション図"
-                                        width={480}
-                                        height={360}
-                                        className="max-w-full max-h-full object-contain"
-                                    />
-                                </div>
+                                <Image
+                                    src="/cat_demo.svg"
+                                    alt="猫の絵"
+                                    width={240}
+                                    height={240}
+                                    className="mx-auto"
+                                />
                            </div>
                        </div>
                    </div>
@@ -182,106 +182,96 @@ export default function About() {
                    </p>

                    <div className="space-y-8">
-                        {/* ResNet50 Architecture */}
+                        {/* Animated Transformer */}
                        <div className="text-center">
                            <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                Animated ResNet50 Model Architecture
+                                Animated Transformer Connectors
                            </h3>
                            <p className="text-gray-600 mb-4">
                                <strong>Prompt:</strong> Give me an{" "}
-                                <strong>animated</strong> architecture diagram
-                                of the ResNet50 model.
+                                <strong>animated connector</strong> diagram of
+                                transformer&apos;s architecture.
                            </p>
-                            <div className="bg-neutral-950 rounded-lg p-4 inline-block">
-                                <Image
-                                    src="/resnet50.svg"
-                                    alt="Architecture diagram for ResNet50 model"
-                                    width={480}
-                                    height={360}
-                                    className="mx-auto"
-                                />
-                            </div>
+                            <Image
+                                src="/animated_connectors.svg"
+                                alt="Transformer Architecture with Animated Connectors"
+                                width={480}
+                                height={360}
+                                className="mx-auto"
+                            />
                        </div>

-                        {/* Diagram Grid */}
+                        {/* Cloud Architecture Grid */}
                        <div className="grid md:grid-cols-2 gap-6">
                            <div className="text-center">
                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    RAG Technique Diagram
+                                    GCP Architecture Diagram
                                </h3>
                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate a RAG
-                                    architecture diagram for{" "}
-                                    <strong>chat application</strong>. Use
-                                    connected diagram for data ingestion
+                                    <strong>Prompt:</strong> Generate a GCP
+                                    architecture diagram with{" "}
+                                    <strong>GCP icons</strong>. Users connect to
+                                    a frontend hosted on an instance.
                                </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    <Image
-                                        src="/rag_prod.svg"
-                                        alt="RAG Architecture Diagram"
-                                        width={480}
-                                        height={360}
-                                        className="max-w-full max-h-full object-contain"
-                                    />
-                                </div>
+                                <Image
+                                    src="/gcp_demo.svg"
+                                    alt="GCP Architecture Diagram"
+                                    width={400}
+                                    height={300}
+                                    className="mx-auto"
+                                />
                            </div>
                            <div className="text-center">
                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    Authentication using React and AWS
+                                    AWS Architecture Diagram
                                </h3>
                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate
-                                    authentication process using React with{" "}
-                                    <strong>AWS</strong>. Use Serverless
-                                    architecture.
+                                    <strong>Prompt:</strong> Generate an AWS
+                                    architecture diagram with{" "}
+                                    <strong>AWS icons</strong>. Users connect to
+                                    a frontend hosted on an instance.
                                </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    <Image
-                                        src="/auth.svg"
-                                        alt="Authentication Architecture Diagram"
-                                        width={480}
-                                        height={360}
-                                        className="max-w-full max-h-full object-contain"
-                                    />
-                                </div>
+                                <Image
+                                    src="/aws_demo.svg"
+                                    alt="AWS Architecture Diagram"
+                                    width={400}
+                                    height={300}
+                                    className="mx-auto"
+                                />
                            </div>
                            <div className="text-center">
                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    Agile Scrum Process
+                                    Azure Architecture Diagram
                                </h3>
                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate agile
-                                    scrum workflow diagram for software
-                                    development team.
+                                    <strong>Prompt:</strong> Generate an Azure
+                                    architecture diagram with{" "}
+                                    <strong>Azure icons</strong>. Users connect
+                                    to a frontend hosted on an instance.
                                </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    <Image
-                                        src="/agile_scrum.svg"
-                                        alt="Agile Scrum Diagram"
-                                        width={480}
-                                        height={360}
-                                        className="max-w-full max-h-full object-contain"
-                                    />
-                                </div>
+                                <Image
+                                    src="/azure_demo.svg"
+                                    alt="Azure Architecture Diagram"
+                                    width={400}
+                                    height={300}
+                                    className="mx-auto"
+                                />
                            </div>
                            <div className="text-center">
                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    Open Innovation
+                                    Cat Sketch
                                </h3>
                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Create
-                                    visualization of Henry Chesbrough&apos;s
-                                    Open Innovation model.
+                                    <strong>Prompt:</strong> Draw a cute cat for
+                                    me.
                                </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    <Image
-                                        src="/inno.svg"
-                                        alt="Open Innovation Diagram"
-                                        width={480}
-                                        height={360}
-                                        className="max-w-full max-h-full object-contain"
-                                    />
-                                </div>
+                                <Image
+                                    src="/cat_demo.svg"
+                                    alt="Cat Drawing"
+                                    width={240}
+                                    height={240}
+                                    className="mx-auto"
+                                />
                            </div>
                        </div>
                    </div>
@@ -10,7 +10,6 @@ import {
    ResizablePanelGroup,
 } from "@/components/ui/resizable"
 import { useDiagram } from "@/contexts/diagram-context"
-import { type DrawioTheme, isDrawioTheme } from "@/lib/drawio-themes"
 import { i18n, type Locale } from "@/lib/i18n/config"
 import { isIndexedDBUsable } from "@/lib/session-storage"

@@ -28,7 +27,7 @@ export default function Home() {
    const currentLang = (pathname.split("/")[1] || i18n.defaultLocale) as Locale
    const [isMobile, setIsMobile] = useState(false)
    const [isChatVisible, setIsChatVisible] = useState(true)
-    const [drawioUi, setDrawioUi] = useState<DrawioTheme>("kennedy")
+    const [drawioUi, setDrawioUi] = useState<"min" | "sketch">("min")
    const [darkMode, setDarkMode] = useState(false)
    const [isLoaded, setIsLoaded] = useState(false)
    const [isDrawioReady, setIsDrawioReady] = useState(false)
@@ -57,7 +56,7 @@ export default function Home() {
        }

        const savedUi = localStorage.getItem("drawio-theme")
-        if (isDrawioTheme(savedUi)) {
+        if (savedUi === "min" || savedUi === "sketch") {
            setDrawioUi(savedUi)
        }

@@ -101,8 +100,12 @@ export default function Home() {
    const handleDrawioAutoSave = useCallback(
        (data: { xml?: string }) => {
            handleDiagramAutoSave(data)
+            // Only suppress modified state when persistence is available
+            if (canPersist) {
+                drawioRef.current?.status({ message: "", modified: false })
+            }
        },
-        [handleDiagramAutoSave],
+        [canPersist, drawioRef, handleDiagramAutoSave],
    )

    const handleDarkModeChange = () => {
@@ -114,9 +117,10 @@ export default function Home() {
        resetDrawioReady()
    }

-    const handleDrawioUiChange = (theme: DrawioTheme) => {
-        localStorage.setItem("drawio-theme", theme)
-        setDrawioUi(theme)
+    const handleDrawioUiChange = () => {
+        const newUi = drawioUi === "min" ? "sketch" : "min"
+        localStorage.setItem("drawio-theme", newUi)
+        setDrawioUi(newUi)
        setIsDrawioReady(false)
        resetDrawioReady()
    }
@@ -216,8 +220,7 @@ export default function Home() {
                                            saveAndExit: false,
                                            noSaveBtn: true,
                                            noExitBtn: true,
-                                            dark:
-                                                darkMode || drawioUi === "dark",
+                                            dark: darkMode,
                                            lang: currentLang,
                                            // Enable offline mode in Electron to disable external service calls
                                            ...(isElectron && {
@@ -265,7 +268,7 @@ export default function Home() {
                                isVisible={isChatVisible}
                                onToggleVisibility={toggleChatPanel}
                                drawioUi={drawioUi}
-                                onDrawioUiChange={handleDrawioUiChange}
+                                onToggleDrawioUi={handleDrawioUiChange}
                                darkMode={darkMode}
                                onToggleDarkMode={handleDarkModeChange}
                                isMobile={isMobile}
@@ -1,5 +1,5 @@
 {
-    "$schema": "https://biomejs.dev/schemas/2.4.14/schema.json",
+    "$schema": "https://biomejs.dev/schemas/2.4.4/schema.json",
    "vcs": {
        "enabled": true,
        "clientKind": "git",
@@ -141,6 +141,9 @@ export default function ExamplePanel({
                                    <span className="text-sm font-medium text-foreground group-hover:text-purple-500 transition-colors">
                                        {dict.examples.mcpServer}
                                    </span>
+                                    <span className="px-1.5 py-0.5 text-[10px] font-semibold bg-purple-500 text-white rounded">
+                                        {dict.examples.preview}
+                                    </span>
                                </div>
                                <p className="text-xs text-muted-foreground">
                                    {dict.examples.mcpDescription}
@@ -417,7 +417,6 @@ export function ChatMessageDisplay({

    // Track previous message count to detect bulk loads vs streaming
    const prevMessageCountRef = useRef(0)
-    const scrollThrottleRef = useRef<ReturnType<typeof setTimeout> | null>(null)

    useEffect(() => {
        if (messagesEndRef.current && messages.length > 0) {
@@ -431,17 +430,8 @@ export function ChatMessageDisplay({
                return
            }

-            // Throttle scroll during streaming to avoid layout thrashing
-            // Leading + trailing: scroll immediately, then once more after cooldown
-            if (!scrollThrottleRef.current) {
-                messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
-                scrollThrottleRef.current = setTimeout(() => {
-                    scrollThrottleRef.current = null
-                    messagesEndRef.current?.scrollIntoView({
-                        behavior: "smooth",
-                    })
-                }, 150)
-            }
+            // Single message added - smooth scroll
+            messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
        }
    }, [messages])

@@ -32,7 +32,6 @@ import { useSessionManager } from "@/hooks/use-session-manager"
 import { useValidateDiagram } from "@/hooks/use-validate-diagram"
 import { getApiEndpoint } from "@/lib/base-path"
 import { findCachedResponse } from "@/lib/cached-responses"
-import type { DrawioTheme } from "@/lib/drawio-themes"
 import { formatMessage } from "@/lib/i18n/utils"
 import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
 import { sanitizeMessages } from "@/lib/session-storage"
@@ -69,8 +68,8 @@ interface ChatMessage {
 interface ChatPanelProps {
    isVisible: boolean
    onToggleVisibility: () => void
-    drawioUi: DrawioTheme
-    onDrawioUiChange: (theme: DrawioTheme) => void
+    drawioUi: "min" | "sketch"
+    onToggleDrawioUi: () => void
    darkMode: boolean
    onToggleDarkMode: () => void
    isMobile?: boolean
@@ -111,7 +110,7 @@ export default function ChatPanel({
    isVisible,
    onToggleVisibility,
    drawioUi,
-    onDrawioUiChange,
+    onToggleDrawioUi,
    darkMode,
    onToggleDarkMode,
    isMobile = false,
@@ -1443,7 +1442,7 @@ export default function ChatPanel({
                open={showSettingsDialog}
                onOpenChange={setShowSettingsDialog}
                drawioUi={drawioUi}
-                onDrawioUiChange={onDrawioUiChange}
+                onToggleDrawioUi={onToggleDrawioUi}
                darkMode={darkMode}
                onToggleDarkMode={onToggleDarkMode}
                minimalStyle={minimalStyle}
@@ -107,8 +107,8 @@ export function ChatLobby({
    currentInput = "",
    dict,
 }: ChatLobbyProps) {
-    const [templatesExpanded, setTemplatesExpanded] = useState(true)
-    const [examplesExpanded, setExamplesExpanded] = useState(true)
+    const [templatesExpanded, setTemplatesExpanded] = useState(false)
+    const [examplesExpanded, setExamplesExpanded] = useState(false)
    const [panelVisibility, setPanelVisibility] = useState(getPanelVisibility)
    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
    const [sessionToDelete, setSessionToDelete] = useState<string | null>(null)
@@ -125,25 +125,19 @@ export function ChatLobby({
    const hasHistory = sessions.length > 0

    if (!hasHistory) {
-        if (!panelVisibility.myTemplates && !panelVisibility.quickExamples) {
-            return null
+        if (panelVisibility.myTemplates) {
+            return (
+                <TemplatePanel
+                    setInput={setInput}
+                    onSendTemplate={onSendTemplate}
+                    currentInput={currentInput}
+                />
+            )
        }
-        return (
-            <div className="animate-fade-in">
-                {panelVisibility.myTemplates && (
-                    <TemplatePanel
-                        setInput={setInput}
-                        onSendTemplate={onSendTemplate}
-                        currentInput={currentInput}
-                    />
-                )}
-                {panelVisibility.quickExamples && (
-                    <div className={panelVisibility.myTemplates ? "mt-6" : ""}>
-                        <ExamplePanel setInput={setInput} setFiles={setFiles} />
-                    </div>
-                )}
-            </div>
-        )
+        if (panelVisibility.quickExamples) {
+            return <ExamplePanel setInput={setInput} setFiles={setFiles} />
+        }
+        return null
    }

    // Show history + collapsible examples when there are sessions
@@ -195,22 +195,7 @@ export function ToolCallCard({
            {input && isExpanded && (
                <div className="px-4 py-3 border-t border-border/40 bg-muted/20">
                    {typeof input === "object" && input.xml ? (
-                        state === "input-streaming" ||
-                        state === "input-available" ? (
-                            <pre
-                                className="text-[11px] leading-relaxed overflow-x-auto overflow-y-auto max-h-48 scrollbar-thin break-all whitespace-pre-wrap"
-                                style={{
-                                    fontFamily:
-                                        "var(--font-mono), ui-monospace, monospace",
-                                    margin: 0,
-                                    padding: 0,
-                                }}
-                            >
-                                {input.xml}
-                            </pre>
-                        ) : (
-                            <CodeBlock code={input.xml} language="xml" />
-                        )
+                        <CodeBlock code={input.xml} language="xml" />
                    ) : typeof input === "object" &&
                      input.operations &&
                      Array.isArray(input.operations) ? (
@@ -405,7 +405,7 @@ export function ModelConfigDialog({
                            </span>
                        </div>

-                        <ScrollArea className="flex-1 px-2 min-h-0">
+                        <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">
@@ -25,7 +25,6 @@ import { Switch } from "@/components/ui/switch"
 import { Textarea } from "@/components/ui/textarea"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { getApiEndpoint } from "@/lib/base-path"
-import type { DrawioTheme } from "@/lib/drawio-themes"
 import { i18n, type Locale } from "@/lib/i18n/config"
 import { STORAGE_KEYS } from "@/lib/storage"

@@ -64,8 +63,8 @@ const LANGUAGE_LABELS: Record<Locale, string> = {
 interface SettingsDialogProps {
    open: boolean
    onOpenChange: (open: boolean) => void
-    drawioUi: DrawioTheme
-    onDrawioUiChange: (theme: DrawioTheme) => void
+    drawioUi: "min" | "sketch"
+    onToggleDrawioUi: () => void
    darkMode: boolean
    onToggleDarkMode: () => void
    minimalStyle?: boolean
@@ -91,7 +90,7 @@ function SettingsContent({
    open,
    onOpenChange,
    drawioUi,
-    onDrawioUiChange,
+    onToggleDrawioUi,
    darkMode,
    onToggleDarkMode,
    minimalStyle = false,
@@ -135,11 +134,8 @@ function SettingsContent({
    const [isApplyingProxy, setIsApplyingProxy] = useState(false)

    useEffect(() => {
-        // Re-fetch config whenever the dialog opens to ensure we always show
-        // the access code input if the server requires it. This fixes the case
-        // where a stale localStorage cache (from before ACCESS_CODE_LIST was
-        // configured) would hide the access code input.
-        if (!open) return
+        // Only fetch if not cached in localStorage
+        if (getStoredAccessCodeRequired() !== null) return

        fetch(getApiEndpoint("/api/config"))
            .then((res) => {
@@ -155,9 +151,10 @@ function SettingsContent({
                setAccessCodeRequired(required)
            })
            .catch(() => {
-                // Keep existing cached value on error
+                // Don't cache on error - allow retry on next mount
+                setAccessCodeRequired(false)
            })
-    }, [open])
+    }, [])

    // Detect current language from pathname
    useEffect(() => {
@@ -433,40 +430,23 @@ function SettingsContent({
                    {/* Draw.io Style */}
                    <SettingItem
                        label={dict.settings.drawioStyle}
-                        description={dict.settings.drawioStyleDescription}
+                        description={`${dict.settings.drawioStyleDescription} ${
+                            drawioUi === "min"
+                                ? dict.settings.minimal
+                                : dict.settings.sketch
+                        }`}
                    >
-                        <Select
-                            value={drawioUi}
-                            onValueChange={(v) =>
-                                onDrawioUiChange(v as DrawioTheme)
-                            }
+                        <Button
+                            id="drawio-ui"
+                            variant="outline"
+                            onClick={onToggleDrawioUi}
+                            className="h-9 w-[120px] rounded-xl border-border-subtle hover:bg-interactive-hover font-normal"
                        >
-                            <SelectTrigger
-                                id="drawio-ui-select"
-                                aria-label={dict.settings.drawioStyle}
-                                className="w-[120px] h-9 rounded-xl"
-                            >
-                                <SelectValue />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectItem value="kennedy">
-                                    {dict.settings.themeDefault}
-                                </SelectItem>
-                                <SelectItem value="atlas">Atlas</SelectItem>
-                                <SelectItem value="dark">
-                                    {dict.settings.themeDark}
-                                </SelectItem>
-                                <SelectItem value="min">
-                                    {dict.settings.themeMinimal}
-                                </SelectItem>
-                                <SelectItem value="sketch">
-                                    {dict.settings.themeSketch}
-                                </SelectItem>
-                                <SelectItem value="simple">
-                                    {dict.settings.themeSimple}
-                                </SelectItem>
-                            </SelectContent>
-                        </Select>
+                            {dict.settings.switchTo}{" "}
+                            {drawioUi === "min"
+                                ? dict.settings.sketch
+                                : dict.settings.minimal}
+                        </Button>
                    </SettingItem>

                    {/* Diagram Style */}
@@ -30,7 +30,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
  - [目录](#目录)
  - [示例](#示例)
  - [功能特性](#功能特性)
-  - [MCP服务器](#mcp服务器)
+  - [MCP服务器（预览）](#mcp服务器预览)
    - [Claude Code CLI](#claude-code-cli)
  - [快速开始](#快速开始)
    - [在线试用](#在线试用)
@@ -56,31 +56,31 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
  <tr>
    <td colspan="2" valign="top" align="center">
      <strong>动画Transformer连接器</strong><br />
-      <p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
+      <p><strong>提示词：</strong> 给我一个带有**动画连接器**的Transformer架构图。</p>
      <img src="../../public/animated_connectors.svg" alt="带动画连接器的Transformer架构" width="480" />
    </td>
  </tr>
  <tr>
    <td width="50%" valign="top">
-      <strong>RAG技术图</strong><br />
-      <p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p>
-      <img src="../../public/rag_prod.svg" alt="RAG架构图" width="480" />
+      <strong>GCP架构图</strong><br />
+      <p><strong>提示词：</strong> 使用**GCP图标**生成一个GCP架构图。在这个图中，用户连接到托管在实例上的前端。</p>
+      <img src="../../public/gcp_demo.svg" alt="GCP架构图" width="480" />
    </td>
    <td width="50%" valign="top">
-      <strong>React和AWS认证流程</strong><br />
-      <p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p>
-      <img src="../../public/auth.svg" alt="认证架构图" width="480" />
+      <strong>AWS架构图</strong><br />
+      <p><strong>提示词：</strong> 使用**AWS图标**生成一个AWS架构图。在这个图中，用户连接到托管在实例上的前端。</p>
+      <img src="../../public/aws_demo.svg" alt="AWS架构图" width="480" />
    </td>
  </tr>
  <tr>
    <td width="50%" valign="top">
-      <strong>开放式创新</strong><br />
-      <p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p>
-      <img src="../../public/inno.svg" alt="开放式创新图" width="480" />
+      <strong>Azure架构图</strong><br />
+      <p><strong>提示词：</strong> 使用**Azure图标**生成一个Azure架构图。在这个图中，用户连接到托管在实例上的前端。</p>
+      <img src="../../public/azure_demo.svg" alt="Azure架构图" width="480" />
    </td>
    <td width="50%" valign="top">
      <strong>猫咪素描</strong><br />
-      <p><strong>Prompt:</strong> Draw a cute cat for me.</p>
+      <p><strong>提示词：</strong> 给我画一只可爱的猫。</p>
      <img src="../../public/cat_demo.svg" alt="猫咪绘图" width="240" />
    </td>
  </tr>
@@ -98,7 +98,9 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 -   **云架构图支持**：专门支持生成云架构图（AWS、GCP、Azure）
 -   **动画连接器**：在图表元素之间创建动态动画连接器，实现更好的可视化效果

-## MCP服务器
+## MCP服务器（预览）
+
+> **预览功能**：此功能为实验性功能，可能不稳定。

 通过MCP（模型上下文协议）在Claude Desktop、Cursor和VS Code等AI代理中使用Next AI Draw.io。

@@ -28,7 +28,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
  - [目次](#目次)
  - [例](#例)
  - [機能](#機能)
-  - [MCPサーバー](#mcpサーバー)
+  - [MCPサーバー（プレビュー）](#mcpサーバープレビュー)
    - [Claude Code CLI](#claude-code-cli)
  - [はじめに](#はじめに)
    - [オンラインで試す](#オンラインで試す)
@@ -54,31 +54,31 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
  <tr>
    <td colspan="2" valign="top" align="center">
      <strong>アニメーションTransformerコネクタ</strong><br />
-      <p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
+      <p><strong>プロンプト：</strong> **アニメーションコネクタ**付きのTransformerアーキテクチャ図を作成してください。</p>
      <img src="../../public/animated_connectors.svg" alt="アニメーションコネクタ付きTransformerアーキテクチャ" width="480" />
    </td>
  </tr>
  <tr>
    <td width="50%" valign="top">
-      <strong>RAG技術ダイアグラム</strong><br />
-      <p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p>
-      <img src="../../public/rag_prod.svg" alt="RAGアーキテクチャ図" width="480" />
+      <strong>GCPアーキテクチャ図</strong><br />
+      <p><strong>プロンプト：</strong> **GCPアイコン**を使用してGCPアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
+      <img src="../../public/gcp_demo.svg" alt="GCPアーキテクチャ図" width="480" />
    </td>
    <td width="50%" valign="top">
-      <strong>ReactとAWSによる認証</strong><br />
-      <p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p>
-      <img src="../../public/auth.svg" alt="認証アーキテクチャ図" width="480" />
+      <strong>AWSアーキテクチャ図</strong><br />
+      <p><strong>プロンプト：</strong> **AWSアイコン**を使用してAWSアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
+      <img src="../../public/aws_demo.svg" alt="AWSアーキテクチャ図" width="480" />
    </td>
  </tr>
  <tr>
    <td width="50%" valign="top">
-      <strong>オープンイノベーション</strong><br />
-      <p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p>
-      <img src="../../public/inno.svg" alt="オープンイノベーション図" width="480" />
+      <strong>Azureアーキテクチャ図</strong><br />
+      <p><strong>プロンプト：</strong> **Azureアイコン**を使用してAzureアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
+      <img src="../../public/azure_demo.svg" alt="Azureアーキテクチャ図" width="480" />
    </td>
    <td width="50%" valign="top">
      <strong>猫のスケッチ</strong><br />
-      <p><strong>Prompt:</strong> Draw a cute cat for me.</p>
+      <p><strong>プロンプト：</strong> かわいい猫を描いてください。</p>
      <img src="../../public/cat_demo.svg" alt="猫の絵" width="240" />
    </td>
  </tr>
@@ -96,7 +96,9 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 -   **クラウドアーキテクチャダイアグラムサポート**：クラウドアーキテクチャダイアグラムの生成を専門的にサポート（AWS、GCP、Azure）
 -   **アニメーションコネクタ**：より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成

-## MCPサーバー
+## MCPサーバー（プレビュー）
+
+> **プレビュー機能**：この機能は実験的であり、安定しない可能性があります。

 MCP（Model Context Protocol）を介して、Claude Desktop、Cursor、VS CodeなどのAIエージェントでNext AI Draw.ioを使用できます。

@@ -95,10 +95,6 @@ linux:
      arch:
        - x64
        - arm64
-    - target: rpm
-      arch:
-        - x64
-        - arm64

 # Publish configuration (optional)
 publish:
@@ -101,8 +101,8 @@ declare global {
 }

 export type {
-    ApplyPresetResult,
    ConfigPreset,
+    ApplyPresetResult,
    ProxyConfig,
    SetProxyResult,
    SetUserLocaleResult,
@@ -60,13 +60,6 @@ export function createWindow(serverUrl: string): BrowserWindow {
        mainWindow.webContents.openDevTools()
    }

-    // Override the draw.io iframe's beforeunload handler so the window can
-    // close after the user edits text in a shape (fixes #815). Diagrams are
-    // already persisted via autosave, so the prompt is unnecessary.
-    mainWindow.webContents.on("will-prevent-unload", (event) => {
-        event.preventDefault()
-    })
-
    mainWindow.on("closed", () => {
        mainWindow = null
    })
@@ -1262,6 +1262,7 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
        case "glm":
        case "qwen":
        case "qiniu":
+        case "kimi":
        case "novita": {
            const envVar = PROVIDER_ENV_VARS[provider]
            if (!envVar) {
@@ -1287,23 +1288,6 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
            break
        }

-        case "kimi": {
-            const apiKey = resolveApiKey(overrides, "KIMI_API_KEY")
-            const baseURL = resolveBaseURL(
-                overrides?.apiKey,
-                overrides?.baseUrl,
-                resolveBaseUrlEnv(overrides, "KIMI_BASE_URL"),
-                PROVIDER_INFO["kimi"]?.defaultBaseUrl,
-            )
-            // Use createDeepSeek to properly handle reasoning_content for Kimi
-            // thinking models (e.g., kimi-k2.6). Kimi's API uses the same
-            // reasoning_content field as DeepSeek, so this provider correctly
-            // captures and replays reasoning in multi-turn conversations.
-            const customProvider = createDeepSeek({ apiKey, baseURL })
-            model = customProvider(modelId)
-            break
-        }
-
        default:
            throw new Error(
                `Unknown AI provider: ${provider}. Supported providers: bedrock, openai, anthropic, google, azure, ollama, openrouter, deepseek, siliconflow, sglang, gateway, edgeone, doubao, modelscope, glm, qwen, qiniu, kimi, minimax, novita`,
@@ -1372,13 +1356,12 @@ export function supportsImageInput(modelId: string): boolean {
    }

    // Qwen text models (not vision variants like qwen-vl)
-    // Qwen3.5 series (qwen3.5, qwen3.5-plus, qwen3.5-flash) natively support image input
-    // QvQ (Qwen Visual QA) models are vision models — exclude them even when prefixed with "qwen/"
+    // qwen3.5-plus is a vision model
    if (
        lowerModelId.includes("qwen") &&
        !hasVisionIndicator &&
-        !lowerModelId.includes("qwen3.5") &&
-        !lowerModelId.includes("qvq")
+        !lowerModelId.includes("qwen3.5-plus") &&
+        !lowerModelId.includes("qwen3.5-flash")
    ) {
        return false
    }
@@ -1,17 +0,0 @@
-export const DRAWIO_THEMES = [
-    "kennedy",
-    "atlas",
-    "dark",
-    "min",
-    "sketch",
-    "simple",
-] as const
-
-export type DrawioTheme = (typeof DRAWIO_THEMES)[number]
-
-export function isDrawioTheme(value: unknown): value is DrawioTheme {
-    return (
-        typeof value === "string" &&
-        (DRAWIO_THEMES as readonly string[]).includes(value)
-    )
-}
@@ -76,7 +76,8 @@
        "creativeDescription": "Draw something fun and creative",
        "cachedNote": "Examples are cached for instant response",
        "mcpServer": "MCP Server",
-        "mcpDescription": "Use in Claude Desktop, VS Code & Cursor"
+        "mcpDescription": "Use in Claude Desktop, VS Code & Cursor",
+        "preview": "PREVIEW"
    },
    "settings": {
        "title": "Settings",
@@ -102,12 +103,10 @@
        "theme": "Theme",
        "themeDescription": "Dark/Light mode for interface and DrawIO canvas.",
        "drawioStyle": "DrawIO Style",
-        "drawioStyleDescription": "Canvas style",
-        "themeDefault": "Default",
-        "themeDark": "Dark",
-        "themeMinimal": "Minimal",
-        "themeSketch": "Sketch",
-        "themeSimple": "Simple",
+        "drawioStyleDescription": "Canvas style:",
+        "switchTo": "Switch to",
+        "minimal": "Minimal",
+        "sketch": "Sketch",
        "diagramStyle": "Diagram Style",
        "diagramStyleDescription": "Toggle between minimal and styled diagram output.",
        "sendShortcut": "Send Shortcut",
@@ -76,7 +76,8 @@
        "creativeDescription": "楽しくてクリエイティブなものを描く",
        "cachedNote": "例はキャッシュされ、即座に応答します",
        "mcpServer": "MCP サーバー",
-        "mcpDescription": "Claude Desktop、VS Code、Cursor で使用"
+        "mcpDescription": "Claude Desktop、VS Code、Cursor で使用",
+        "preview": "プレビュー"
    },
    "settings": {
        "title": "設定",
@@ -102,12 +103,10 @@
        "theme": "テーマ",
        "themeDescription": "インターフェースと DrawIO キャンバスのダーク/ライトモード。",
        "drawioStyle": "DrawIO スタイル",
-        "drawioStyleDescription": "キャンバススタイル",
-        "themeDefault": "デフォルト",
-        "themeDark": "ダーク",
-        "themeMinimal": "ミニマル",
-        "themeSketch": "スケッチ",
-        "themeSimple": "シンプル",
+        "drawioStyleDescription": "キャンバススタイル：",
+        "switchTo": "切り替え",
+        "minimal": "ミニマル",
+        "sketch": "スケッチ",
        "diagramStyle": "ダイアグラムスタイル",
        "diagramStyleDescription": "ミニマルとスタイル付きの出力を切り替えます。",
        "sendShortcut": "送信ショートカット",
@@ -76,7 +76,8 @@
        "creativeDescription": "繪製有趣且富有創意的內容",
        "cachedNote": "範例已快取，可即時回應",
        "mcpServer": "MCP 伺服器",
-        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用"
+        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用",
+        "preview": "預覽"
    },
    "settings": {
        "title": "設定",
@@ -102,12 +103,10 @@
        "theme": "主題",
        "themeDescription": "介面和 DrawIO 畫布的深色/淺色模式。",
        "drawioStyle": "DrawIO 樣式",
-        "drawioStyleDescription": "畫布樣式",
-        "themeDefault": "預設",
-        "themeDark": "深色",
-        "themeMinimal": "簡約",
-        "themeSketch": "草圖",
-        "themeSimple": "簡單",
+        "drawioStyleDescription": "畫布樣式：",
+        "switchTo": "切換到",
+        "minimal": "簡約",
+        "sketch": "草圖",
        "diagramStyle": "圖表樣式",
        "diagramStyleDescription": "切換簡約與精緻圖表輸出模式。",
        "sendShortcut": "傳送快捷鍵",
@@ -76,7 +76,8 @@
        "creativeDescription": "绘制有趣且富有创意的内容",
        "cachedNote": "示例已缓存，可即时响应",
        "mcpServer": "MCP 服务器",
-        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用"
+        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用",
+        "preview": "预览"
    },
    "settings": {
        "title": "设置",
@@ -102,12 +103,10 @@
        "theme": "主题",
        "themeDescription": "界面和 DrawIO 画布的深色/浅色模式。",
        "drawioStyle": "DrawIO 样式",
-        "drawioStyleDescription": "画布样式",
-        "themeDefault": "默认",
-        "themeDark": "深色",
-        "themeMinimal": "简约",
-        "themeSketch": "草图",
-        "themeSimple": "简单",
+        "drawioStyleDescription": "画布样式：",
+        "switchTo": "切换到",
+        "minimal": "简约",
+        "sketch": "草图",
        "diagramStyle": "图表样式",
        "diagramStyleDescription": "切换简约与精致图表输出模式。",
        "sendShortcut": "发送快捷键",
@@ -1,12 +1,12 @@
 {
    "name": "next-ai-draw-io",
-    "version": "0.4.15",
+    "version": "0.4.14",
    "lockfileVersion": 3,
    "requires": true,
    "packages": {
        "": {
            "name": "next-ai-draw-io",
-            "version": "0.4.15",
+            "version": "0.4.14",
            "license": "Apache-2.0",
            "dependencies": {
                "@ai-sdk/amazon-bedrock": "^4.0.1",
@@ -50,6 +50,8 @@
                "cmdk": "^1.1.1",
                "idb": "^8.0.3",
                "jsonrepair": "^3.13.1",
+                "lightningcss": "^1.32.0",
+                "lightningcss-linux-x64-gnu": "^1.32.0",
                "lucide-react": "^0.577.0",
                "motion": "^12.23.25",
                "nanoid": "^5.0.0",
@@ -9673,9 +9675,9 @@
            }
        },
        "node_modules/@xmldom/xmldom": {
-            "version": "0.9.10",
-            "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.9.10.tgz",
-            "integrity": "sha512-A9gOqLdi6cV4ibazAjcQufGj0B1y/vDqYrcuP6d/6x8P27gRS8643Dj9o1dEKtB6O7fwxb2FgBmJS2mX7gpvdw==",
+            "version": "0.9.9",
+            "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.9.9.tgz",
+            "integrity": "sha512-qycIHAucxy/LXAYIjmLmtQ8q9GPnMbnjG1KXhWm9o5sCr6pOYDATkMPiTNa6/v8eELyqOQ2FsEqeoFYmgv/gJg==",
            "license": "MIT",
            "engines": {
                "node": ">=14.6"
@@ -1,6 +1,6 @@
 {
    "name": "next-ai-draw-io",
-    "version": "0.4.15",
+    "version": "0.4.14",
    "license": "Apache-2.0",
    "private": true,
    "main": "dist-electron/main/index.js",
@@ -1,12 +1,12 @@
 {
    "name": "@next-ai-drawio/mcp-server",
-    "version": "0.2.0",
+    "version": "0.1.17",
    "lockfileVersion": 3,
    "requires": true,
    "packages": {
        "": {
            "name": "@next-ai-drawio/mcp-server",
-            "version": "0.2.0",
+            "version": "0.1.17",
            "license": "Apache-2.0",
            "dependencies": {
                "@modelcontextprotocol/sdk": "^1.0.4",
@@ -1,6 +1,6 @@
 {
    "name": "@next-ai-drawio/mcp-server",
-    "version": "0.2.0",
+    "version": "0.1.17",
    "description": "MCP server for Next AI Draw.io - AI-powered diagram generation with real-time browser preview",
    "type": "module",
    "main": "dist/index.js",
@@ -4,29 +4,6 @@
 */

 import http from "node:http"
-
-const MAX_BODY_BYTES = 10 * 1024 * 1024 // 10 MiB
-
-function readBody(
-    req: http.IncomingMessage,
-    res: http.ServerResponse,
-    cb: (body: string) => void,
-): void {
-    let body = ""
-    let size = 0
-    req.on("data", (chunk: Buffer) => {
-        size += chunk.length
-        if (size > MAX_BODY_BYTES) {
-            res.writeHead(413, { "Content-Type": "application/json" })
-            res.end(JSON.stringify({ error: "Payload too large" }))
-            req.destroy()
-            return
-        }
-        body += chunk
-    })
-    req.on("end", () => cb(body))
-}
-
 import {
    addHistory,
    clearHistory,
@@ -178,7 +155,7 @@ export function startHttpServer(port = 6002): Promise<number> {
            }
        })

-        server.listen(port, "127.0.0.1", () => {
+        server.listen(port, () => {
            serverPort = port
            log.info(`HTTP server running on http://localhost:${port}`)
            resolve(port)
@@ -289,7 +266,11 @@ function handleStateApi(
            }),
        )
    } else if (req.method === "POST") {
-        readBody(req, res, (body) => {
+        let body = ""
+        req.on("data", (chunk) => {
+            body += chunk
+        })
+        req.on("end", () => {
            try {
                const data = JSON.parse(body)
                const { sessionId } = data
@@ -366,7 +347,11 @@ function handleRestoreApi(
        return
    }

-    readBody(req, res, (body) => {
+    let body = ""
+    req.on("data", (chunk) => {
+        body += chunk
+    })
+    req.on("end", () => {
        try {
            const { sessionId, index } = JSON.parse(body)
            if (!sessionId || index === undefined) {
@@ -408,7 +393,11 @@ function handleHistorySvgApi(
        return
    }

-    readBody(req, res, (body) => {
+    let body = ""
+    req.on("data", (chunk) => {
+        body += chunk
+    })
+    req.on("end", () => {
        try {
            const { sessionId, svg } = JSON.parse(body)
            if (!sessionId || !svg) {
@@ -155,22 +155,19 @@ server.registerTool(
 server.registerTool(
    "create_new_diagram",
    {
-        description: `Create a NEW diagram from mxGraphModel XML. ONLY use this when creating a diagram from scratch.
-
-⚠️ DO NOT use this tool to modify an existing diagram — it will DESTROY all existing content and user changes. Use edit_diagram instead for ANY modifications to an existing diagram.
+        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 (no existing diagram)
- The user explicitly asks to "start over" or "create a new diagram"
+- 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 (ALWAYS prefer edit_diagram if a diagram already exists):
- ANY modifications to an existing diagram
- Adding/removing/moving elements
- Changing labels, colors, styles, or positions
- Restructuring or reorganizing existing content
- Adding new elements to an existing 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>
@@ -12,8 +12,7 @@
        "declaration": true,
        "declarationMap": true,
        "sourceMap": true,
-        "resolveJsonModule": true,
-        "types": ["node"]
+        "resolveJsonModule": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "dist"]
@@ -35,10 +35,8 @@ test.describe("Iframe Interaction", () => {
        await expect(
            frame
                .locator('text="Diagram"')
-                .or(frame.locator('[title*="Diagram"]'))
-                .filter({ visible: true })
-                .first(),
-        ).toBeVisible({ timeout: 30000 })
+                .or(frame.locator('[title*="Diagram"]')),
+        ).toBeVisible({ timeout: 10000 })
    })

    test("diagram XML is rendered in iframe after generation", async ({
@@ -200,21 +200,12 @@ describe("supportsImageInput", () => {

    it("returns true for Qwen vision models", () => {
        expect(supportsImageInput("qwen-vl")).toBe(true)
-        expect(supportsImageInput("Qwen3.5")).toBe(true)
-        expect(supportsImageInput("qwen3.5")).toBe(true)
        expect(supportsImageInput("qwen3.5-plus")).toBe(true)
        expect(supportsImageInput("qwen3.5-flash")).toBe(true)
        expect(supportsImageInput("qwen3-vl-plus")).toBe(true)
        expect(supportsImageInput("qwen3-vl-flash")).toBe(true)
    })

-    it("returns true for QvQ (Qwen Visual QA) models including OpenRouter-prefixed names", () => {
-        expect(supportsImageInput("qvq-72b-preview")).toBe(true)
-        expect(supportsImageInput("qvq-max")).toBe(true)
-        expect(supportsImageInput("qwen/qvq-72b-preview")).toBe(true)
-        expect(supportsImageInput("qwen/qvq-max")).toBe(true)
-    })
-
    it("returns false for GLM text models", () => {
        expect(supportsImageInput("glm-4")).toBe(false)
        expect(supportsImageInput("glm-4-plus")).toBe(false)
@@ -245,67 +236,6 @@ vi.mock("ollama-ai-provider-v2", () => {
    return { createOllama: mockCreateOllama, ollama: mockOllama }
 })

-vi.mock("@ai-sdk/deepseek", () => {
-    const mockModel = { modelId: "test-model" }
-    const mockProviderFn = vi.fn(() => mockModel)
-    const mockCreateDeepSeek = vi.fn(() => mockProviderFn)
-    const mockDeepseek = vi.fn(() => mockModel)
-    return { createDeepSeek: mockCreateDeepSeek, deepseek: mockDeepseek }
-})
-
-describe("Kimi provider uses createDeepSeek for reasoning_content support", () => {
-    let createDeepSeekMock: ReturnType<typeof vi.fn>
-    const savedEnv: Record<string, string | undefined> = {}
-
-    beforeEach(async () => {
-        savedEnv.KIMI_API_KEY = process.env.KIMI_API_KEY
-        savedEnv.KIMI_BASE_URL = process.env.KIMI_BASE_URL
-        delete process.env.KIMI_BASE_URL
-
-        const mod = await import("@ai-sdk/deepseek")
-        createDeepSeekMock = mod.createDeepSeek as ReturnType<typeof vi.fn>
-        createDeepSeekMock.mockClear()
-    })
-
-    afterEach(() => {
-        process.env.KIMI_API_KEY = savedEnv.KIMI_API_KEY
-        process.env.KIMI_BASE_URL = savedEnv.KIMI_BASE_URL
-    })
-
-    it("uses createDeepSeek with Kimi default base URL for reasoning_content support", () => {
-        process.env.KIMI_API_KEY = "test-kimi-key"
-
-        getAIModel({
-            provider: "kimi",
-            apiKey: "test-kimi-key",
-            modelId: "moonshot-v1-8k",
-        })
-
-        expect(createDeepSeekMock).toHaveBeenCalledWith(
-            expect.objectContaining({
-                baseURL: "https://api.moonshot.cn/v1",
-            }),
-        )
-    })
-
-    it("uses custom base URL when provided for kimi provider", () => {
-        process.env.KIMI_API_KEY = "test-kimi-key"
-
-        getAIModel({
-            provider: "kimi",
-            apiKey: "test-kimi-key",
-            baseUrl: "https://custom-kimi-endpoint.com/v1",
-            modelId: "kimi-k2.6",
-        })
-
-        expect(createDeepSeekMock).toHaveBeenCalledWith(
-            expect.objectContaining({
-                baseURL: "https://custom-kimi-endpoint.com/v1",
-            }),
-        )
-    })
-})
-
 describe("Ollama API key security", () => {
    let createOllamaMock: ReturnType<typeof vi.fn>
    const savedEnv: Record<string, string | undefined> = {}
@@ -35,7 +35,6 @@
        "packages",
        "electron",
        "electron-standalone",
-        "dist-electron",
-        "release"
+        "dist-electron"
    ]
 }