chore: remove dead code from previous #815 fix attempts

PR #840 fixed issue #815 in the Electron main process via
will-prevent-unload + preventDefault. The renderer-side workarounds
introduced by previous fix attempts (#642, #648) are no longer needed
and never had effect for their stated purpose.

Removed:
- configuration={ confirmExit: false } in DrawIoEmbed
  confirmExit is not a recognized draw.io config key (zero matches in
  jgraph/drawio source). This was always dead code.

- modified=0 / keepmodified=0 URL parameters
  Per drawio source (app.min.js:14898), these only suppress the
  post-save modified-flag clearing — they do not prevent edits from
  setting editor.modified=true. They were ineffective for blocking
  beforeunload prompts and actually prevented draw.io from clearing
  its modified flag after save.

- canPersist / canPersistChecked state and isIndexedDBUsable() probe
  Their only purpose was gating the dead config above. Removing them
  also removes a startup delay before the iframe renders.

- handleDrawioAutoSave wrapper
  After PR #780 stripped its body, it was a pure passthrough useCallback.
  Now passes handleDiagramAutoSave directly to onAutoSave.

- withDB / isClosingError / resetDBPromise / onversionchange / onclose
  / terminated handlers in lib/session-storage.ts and lib/template-storage.ts
  PR #648 added these to recover from 'IDBDatabase: connection is closing'
  errors that PR #642's first land caused via db.close() on the shared
  singleton. That bug was already fixed in c5de1a1 (re-land of #642),
  three minutes before PR #648 commits started. The retry handlers
  defend against multi-tab / version-change scenarios that cannot occur
  in this single-instance Electron app (requestSingleInstanceLock).
  template-storage.ts copied the same pattern when introduced by #773.

Verified:
- npx tsc --noEmit passes
- Manual test in dev mode: session save/load works, template create works,
  diagram-only persistence works.

.github/workflows/electron-release.yml

@@ -37,7 +37,7 @@ jobs:
       - name: Download draw.io static files for offline use
         run: |
           rm -rf public/drawio
-          git clone --depth 1 --branch v29.3.5 https://github.com/jgraph/drawio.git /tmp/drawio
+          git clone --depth 1 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 --branch v29.3.5 https://github.com/jgraph/drawio.git /tmp/drawio
+          git clone --depth 1 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
@@ -105,14 +105,9 @@ jobs:
           wait-for-completion: true
           output-artifact-directory: release-signed
 
-      - name: Fix latest.yml with signed exe hashes
+      - name: Upload signed artifacts to release
-        run: node scripts/fix-latest-yml.mjs
-
-      - name: Upload signed artifacts and update metadata to release
         uses: softprops/action-gh-release@v2
         with:
-          files: |
+          files: release-signed/*.exe
-            release-signed/*.exe
-            release/latest*.yml
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -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 (Preview)](#mcp-server-preview)
+  - [MCP Server](#mcp-server)
     - [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>GCP architecture diagram</strong><br />
+      <strong>RAG Technique 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>
+      <p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p>
-      <img src="./public/gcp_demo.svg" alt="GCP Architecture Diagram" width="480" />
+      <img src="./public/rag_prod.svg" alt="RAG Architecture Diagram" width="480" />
     </td>
     <td width="50%" valign="top">
-      <strong>AWS architecture diagram</strong><br />
+      <strong>Authentication using React and AWS</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>
+      <p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p>
-      <img src="./public/aws_demo.svg" alt="AWS Architecture Diagram" width="480" />
+      <img src="./public/auth.svg" alt="Authentication Architecture Diagram" width="480" />
     </td>
   </tr>
   <tr>
     <td width="50%" valign="top">
-      <strong>Azure architecture diagram</strong><br />
+      <strong>Open Innovation</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>
+      <p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p>
-      <img src="./public/azure_demo.svg" alt="Azure Architecture Diagram" width="480" />
+      <img src="./public/inno.svg" alt="Open Innovation Diagram" width="480" />
     </td>
     <td width="50%" valign="top">
-      <strong>Cat sketch prompt</strong><br />
+      <strong>Cat sketch</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,9 +99,7 @@ Here are some example prompts and their generated diagrams:
 -   **Cloud Architecture Diagram Support**: Specialized support for generating cloud architecture diagrams (AWS, GCP, Azure)
 -   **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization
 
-## MCP Server (Preview)
+## MCP Server
-
-> **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).
 

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

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

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

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

app/[lang]/about/page.tsx

@@ -182,96 +182,106 @@ export default function About() {
                     </p>
 
                     <div className="space-y-8">
-                        {/* Animated Transformer */}
+                        {/* ResNet50 Architecture */}
                         <div className="text-center">
                             <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                Animated Transformer Connectors
+                                Animated ResNet50 Model Architecture
                             </h3>
                             <p className="text-gray-600 mb-4">
                                 <strong>Prompt:</strong> Give me an{" "}
-                                <strong>animated connector</strong> diagram of
+                                <strong>animated</strong> architecture diagram
-                                transformer&apos;s architecture.
+                                of the ResNet50 model.
                             </p>
-                            <Image
+                            <div className="bg-neutral-950 rounded-lg p-4 inline-block">
-                                src="/animated_connectors.svg"
+                                <Image
-                                alt="Transformer Architecture with Animated Connectors"
+                                    src="/resnet50.svg"
-                                width={480}
+                                    alt="Architecture diagram for ResNet50 model"
-                                height={360}
+                                    width={480}
-                                className="mx-auto"
+                                    height={360}
-                            />
+                                    className="mx-auto"
+                                />
+                            </div>
                         </div>
 
-                        {/* Cloud Architecture Grid */}
+                        {/* Diagram 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">
-                                    GCP Architecture Diagram
+                                    RAG Technique Diagram
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate a GCP
+                                    <strong>Prompt:</strong> Generate a RAG
-                                    architecture diagram with{" "}
+                                    architecture diagram for{" "}
-                                    <strong>GCP icons</strong>. Users connect to
+                                    <strong>chat application</strong>. Use
-                                    a frontend hosted on an instance.
+                                    connected diagram for data ingestion
                                 </p>
-                                <Image
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    src="/gcp_demo.svg"
+                                    <Image
-                                    alt="GCP Architecture Diagram"
+                                        src="/rag_prod.svg"
-                                    width={400}
+                                        alt="RAG Architecture Diagram"
-                                    height={300}
+                                        width={480}
-                                    className="mx-auto"
+                                        height={360}
-                                />
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
                             </div>
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    AWS Architecture Diagram
+                                    Authentication using React and AWS
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate an AWS
+                                    <strong>Prompt:</strong> Generate
-                                    architecture diagram with{" "}
+                                    authentication process using React with{" "}
-                                    <strong>AWS icons</strong>. Users connect to
+                                    <strong>AWS</strong>. Use Serverless
-                                    a frontend hosted on an instance.
+                                    architecture.
                                 </p>
-                                <Image
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    src="/aws_demo.svg"
+                                    <Image
-                                    alt="AWS Architecture Diagram"
+                                        src="/auth.svg"
-                                    width={400}
+                                        alt="Authentication Architecture Diagram"
-                                    height={300}
+                                        width={480}
-                                    className="mx-auto"
+                                        height={360}
-                                />
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
                             </div>
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    Azure Architecture Diagram
+                                    Agile Scrum Process
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate an Azure
+                                    <strong>Prompt:</strong> Generate agile
-                                    architecture diagram with{" "}
+                                    scrum workflow diagram for software
-                                    <strong>Azure icons</strong>. Users connect
+                                    development team.
-                                    to a frontend hosted on an instance.
                                 </p>
-                                <Image
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    src="/azure_demo.svg"
+                                    <Image
-                                    alt="Azure Architecture Diagram"
+                                        src="/agile_scrum.svg"
-                                    width={400}
+                                        alt="Agile Scrum Diagram"
-                                    height={300}
+                                        width={480}
-                                    className="mx-auto"
+                                        height={360}
-                                />
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
                             </div>
                             <div className="text-center">
                                 <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    Cat Sketch
+                                    Open Innovation
                                 </h3>
                                 <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Draw a cute cat for
+                                    <strong>Prompt:</strong> Create
-                                    me.
+                                    visualization of Henry Chesbrough&apos;s
+                                    Open Innovation model.
                                 </p>
-                                <Image
+                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    src="/cat_demo.svg"
+                                    <Image
-                                    alt="Cat Drawing"
+                                        src="/inno.svg"
-                                    width={240}
+                                        alt="Open Innovation Diagram"
-                                    height={240}
+                                        width={480}
-                                    className="mx-auto"
+                                        height={360}
-                                />
+                                        className="max-w-full max-h-full object-contain"
+                                    />
+                                </div>
                             </div>
                         </div>
                     </div>

app/[lang]/page.tsx

@@ -10,8 +10,8 @@ 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"
 
 export default function Home() {
     const {
@@ -27,13 +27,11 @@ 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<"min" | "sketch">("min")
+    const [drawioUi, setDrawioUi] = useState<DrawioTheme>("kennedy")
     const [darkMode, setDarkMode] = useState(false)
     const [isLoaded, setIsLoaded] = useState(false)
     const [isDrawioReady, setIsDrawioReady] = useState(false)
     const [isElectron, setIsElectron] = useState(false)
-    const [canPersist, setCanPersist] = useState(false)
-    const [canPersistChecked, setCanPersistChecked] = useState(false)
     const [drawioBaseUrl, setDrawioBaseUrl] = useState(
         process.env.NEXT_PUBLIC_DRAWIO_BASE_URL || "https://embed.diagrams.net",
     )
@@ -56,7 +54,7 @@ export default function Home() {
         }
 
         const savedUi = localStorage.getItem("drawio-theme")
-        if (savedUi === "min" || savedUi === "sketch") {
+        if (isDrawioTheme(savedUi)) {
             setDrawioUi(savedUi)
         }
 
@@ -84,11 +82,6 @@ export default function Home() {
             setDrawioBaseUrl(`${window.location.origin}/drawio/index.html`)
         }
 
-        void (async () => {
-            const usable = await isIndexedDBUsable()
-            setCanPersist(usable)
-            setCanPersistChecked(true)
-        })()
         setIsLoaded(true)
     }, [pathname, router])
 
@@ -97,17 +90,6 @@ export default function Home() {
         onDrawioLoad()
     }, [onDrawioLoad])
 
-    const handleDrawioAutoSave = useCallback(
-        (data: { xml?: string }) => {
-            handleDiagramAutoSave(data)
-            // Only suppress modified state when persistence is available
-            if (canPersist) {
-                drawioRef.current?.status({ message: "", modified: false })
-            }
-        },
-        [canPersist, drawioRef, handleDiagramAutoSave],
-    )
-
     const handleDarkModeChange = () => {
         const newValue = !darkMode
         setDarkMode(newValue)
@@ -117,10 +99,9 @@ export default function Home() {
         resetDrawioReady()
     }
 
-    const handleDrawioUiChange = () => {
+    const handleDrawioUiChange = (theme: DrawioTheme) => {
-        const newUi = drawioUi === "min" ? "sketch" : "min"
+        localStorage.setItem("drawio-theme", theme)
-        localStorage.setItem("drawio-theme", newUi)
+        setDrawioUi(theme)
-        setDrawioUi(newUi)
         setIsDrawioReady(false)
         resetDrawioReady()
     }
@@ -191,7 +172,7 @@ export default function Home() {
                         }`}
                     >
                         <div className="h-full rounded-xl overflow-hidden shadow-soft-lg border border-border/30 relative">
-                            {isLoaded && canPersistChecked && (
+                            {isLoaded && (
                                 <div
                                     className={`h-full w-full ${isDrawioReady ? "" : "invisible absolute inset-0"}`}
                                 >
@@ -199,28 +180,19 @@ export default function Home() {
                                         key={`${drawioUi}-${darkMode}-${currentLang}-${isElectron}`}
                                         ref={drawioRef}
                                         autosave
-                                        onAutoSave={handleDrawioAutoSave}
+                                        onAutoSave={handleDiagramAutoSave}
                                         onExport={handleDiagramExport}
                                         onLoad={handleDrawioLoad}
                                         baseUrl={drawioBaseUrl}
-                                        configuration={
-                                            canPersist
-                                                ? { confirmExit: false }
-                                                : undefined
-                                        }
                                         urlParameters={{
                                             ui: drawioUi,
                                             spin: false,
                                             libraries: false,
-                                            // Disable modified tracking only when persistence is available
-                                            ...(canPersist && {
-                                                modified: false,
-                                                keepmodified: false,
-                                            }),
                                             saveAndExit: false,
                                             noSaveBtn: true,
                                             noExitBtn: true,
-                                            dark: darkMode,
+                                            dark:
+                                                darkMode || drawioUi === "dark",
                                             lang: currentLang,
                                             // Enable offline mode in Electron to disable external service calls
                                             ...(isElectron && {
@@ -268,7 +240,7 @@ export default function Home() {
                                 isVisible={isChatVisible}
                                 onToggleVisibility={toggleChatPanel}
                                 drawioUi={drawioUi}
-                                onToggleDrawioUi={handleDrawioUiChange}
+                                onDrawioUiChange={handleDrawioUiChange}
                                 darkMode={darkMode}
                                 onToggleDarkMode={handleDarkModeChange}
                                 isMobile={isMobile}

biome.json

@@ -1,5 +1,5 @@
 {
-    "$schema": "https://biomejs.dev/schemas/2.4.4/schema.json",
+    "$schema": "https://biomejs.dev/schemas/2.4.14/schema.json",
     "vcs": {
         "enabled": true,
         "clientKind": "git",

components/chat-example-panel.tsx

@@ -141,9 +141,6 @@ 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}

components/chat-message-display.tsx

@@ -417,6 +417,7 @@ 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) {
@@ -430,8 +431,17 @@ export function ChatMessageDisplay({
                 return
             }
 
-            // Single message added - smooth scroll
+            // Throttle scroll during streaming to avoid layout thrashing
-            messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
+            // 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)
+            }
         }
     }, [messages])
 

components/chat-panel.tsx

@@ -25,7 +25,6 @@ import Image from "@/components/image-with-basepath"
 import { ModelConfigDialog } from "@/components/model-config-dialog"
 import { SettingsDialog } from "@/components/settings-dialog"
 import { useDiagram } from "@/contexts/diagram-context"
-import { useAutoUpdate } from "@/hooks/use-auto-update"
 import { useDiagramToolHandlers } from "@/hooks/use-diagram-tool-handlers"
 import { useDictionary } from "@/hooks/use-dictionary"
 import { getSelectedAIConfig, useModelConfig } from "@/hooks/use-model-config"
@@ -33,6 +32,7 @@ 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 +69,8 @@ interface ChatMessage {
 interface ChatPanelProps {
     isVisible: boolean
     onToggleVisibility: () => void
-    drawioUi: "min" | "sketch"
+    drawioUi: DrawioTheme
-    onToggleDrawioUi: () => void
+    onDrawioUiChange: (theme: DrawioTheme) => void
     darkMode: boolean
     onToggleDarkMode: () => void
     isMobile?: boolean
@@ -111,7 +111,7 @@ export default function ChatPanel({
     isVisible,
     onToggleVisibility,
     drawioUi,
-    onToggleDrawioUi,
+    onDrawioUiChange,
     darkMode,
     onToggleDarkMode,
     isMobile = false,
@@ -1254,22 +1254,10 @@ export default function ChatPanel({
         sendChatMessage(newParts, savedXml, previousXml, sessionId)
     }
 
-    // Auto-update listener (must be before early return so it's always active)
-    useAutoUpdate()
-
     // Collapsed view (desktop only)
     if (!isVisible && !isMobile) {
         return (
             <div className="h-full flex flex-col items-center pt-4 bg-card border border-border/30 rounded-xl">
-                <Toaster
-                    position="bottom-left"
-                    richColors
-                    expand
-                    toastOptions={{
-                        style: { maxWidth: "480px" },
-                        duration: 2000,
-                    }}
-                />
                 <ButtonWithTooltip
                     tooltipContent={dict.nav.showPanel}
                     variant="ghost"
@@ -1455,7 +1443,7 @@ export default function ChatPanel({
                 open={showSettingsDialog}
                 onOpenChange={setShowSettingsDialog}
                 drawioUi={drawioUi}
-                onToggleDrawioUi={onToggleDrawioUi}
+                onDrawioUiChange={onDrawioUiChange}
                 darkMode={darkMode}
                 onToggleDarkMode={onToggleDarkMode}
                 minimalStyle={minimalStyle}

components/chat/ChatLobby.tsx

@@ -107,8 +107,8 @@ export function ChatLobby({
     currentInput = "",
     dict,
 }: ChatLobbyProps) {
-    const [templatesExpanded, setTemplatesExpanded] = useState(false)
+    const [templatesExpanded, setTemplatesExpanded] = useState(true)
-    const [examplesExpanded, setExamplesExpanded] = useState(false)
+    const [examplesExpanded, setExamplesExpanded] = useState(true)
     const [panelVisibility, setPanelVisibility] = useState(getPanelVisibility)
     const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
     const [sessionToDelete, setSessionToDelete] = useState<string | null>(null)
@@ -125,19 +125,25 @@ export function ChatLobby({
     const hasHistory = sessions.length > 0
 
     if (!hasHistory) {
-        if (panelVisibility.myTemplates) {
+        if (!panelVisibility.myTemplates && !panelVisibility.quickExamples) {
-            return (
+            return null
-                <TemplatePanel
-                    setInput={setInput}
-                    onSendTemplate={onSendTemplate}
-                    currentInput={currentInput}
-                />
-            )
         }
-        if (panelVisibility.quickExamples) {
+        return (
-            return <ExamplePanel setInput={setInput} setFiles={setFiles} />
+            <div className="animate-fade-in">
-        }
+                {panelVisibility.myTemplates && (
-        return null
+                    <TemplatePanel
+                        setInput={setInput}
+                        onSendTemplate={onSendTemplate}
+                        currentInput={currentInput}
+                    />
+                )}
+                {panelVisibility.quickExamples && (
+                    <div className={panelVisibility.myTemplates ? "mt-6" : ""}>
+                        <ExamplePanel setInput={setInput} setFiles={setFiles} />
+                    </div>
+                )}
+            </div>
+        )
     }
 
     // Show history + collapsible examples when there are sessions

components/chat/ToolCallCard.tsx

@@ -195,7 +195,22 @@ export function ToolCallCard({
             {input && isExpanded && (
                 <div className="px-4 py-3 border-t border-border/40 bg-muted/20">
                     {typeof input === "object" && input.xml ? (
-                        <CodeBlock code={input.xml} language="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" />
+                        )
                     ) : typeof input === "object" &&
                       input.operations &&
                       Array.isArray(input.operations) ? (

components/model-config-dialog.tsx

@@ -405,7 +405,7 @@ export function ModelConfigDialog({
                             </span>
                         </div>
 
-                        <ScrollArea className="flex-1 px-2">
+                        <ScrollArea className="flex-1 px-2 min-h-0">
                             <div className="space-y-1 pb-2">
                                 {config.providers.length === 0 ? (
                                     <div className="px-3 py-8 text-center">

components/settings-dialog.tsx

@@ -25,6 +25,7 @@ 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"
 
@@ -63,8 +64,8 @@ const LANGUAGE_LABELS: Record<Locale, string> = {
 interface SettingsDialogProps {
     open: boolean
     onOpenChange: (open: boolean) => void
-    drawioUi: "min" | "sketch"
+    drawioUi: DrawioTheme
-    onToggleDrawioUi: () => void
+    onDrawioUiChange: (theme: DrawioTheme) => void
     darkMode: boolean
     onToggleDarkMode: () => void
     minimalStyle?: boolean
@@ -90,7 +91,7 @@ function SettingsContent({
     open,
     onOpenChange,
     drawioUi,
-    onToggleDrawioUi,
+    onDrawioUiChange,
     darkMode,
     onToggleDarkMode,
     minimalStyle = false,
@@ -134,8 +135,11 @@ function SettingsContent({
     const [isApplyingProxy, setIsApplyingProxy] = useState(false)
 
     useEffect(() => {
-        // Only fetch if not cached in localStorage
+        // Re-fetch config whenever the dialog opens to ensure we always show
-        if (getStoredAccessCodeRequired() !== null) return
+        // 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
 
         fetch(getApiEndpoint("/api/config"))
             .then((res) => {
@@ -151,10 +155,9 @@ function SettingsContent({
                 setAccessCodeRequired(required)
             })
             .catch(() => {
-                // Don't cache on error - allow retry on next mount
+                // Keep existing cached value on error
-                setAccessCodeRequired(false)
             })
-    }, [])
+    }, [open])
 
     // Detect current language from pathname
     useEffect(() => {
@@ -430,23 +433,40 @@ 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
-                        }`}
                     >
-                        <Button
+                        <Select
-                            id="drawio-ui"
+                            value={drawioUi}
-                            variant="outline"
+                            onValueChange={(v) =>
-                            onClick={onToggleDrawioUi}
+                                onDrawioUiChange(v as DrawioTheme)
-                            className="h-9 w-[120px] rounded-xl border-border-subtle hover:bg-interactive-hover font-normal"
+                            }
                         >
-                            {dict.settings.switchTo}{" "}
+                            <SelectTrigger
-                            {drawioUi === "min"
+                                id="drawio-ui-select"
-                                ? dict.settings.sketch
+                                aria-label={dict.settings.drawioStyle}
-                                : dict.settings.minimal}
+                                className="w-[120px] h-9 rounded-xl"
-                        </Button>
+                            >
+                                <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>
                     </SettingItem>
 
                     {/* Diagram Style */}

components/update-toast.tsx

@@ -1,124 +0,0 @@
-"use client"
-
-import type React from "react"
-
-interface UpdateToastAvailableProps {
-    variant: "download"
-    version: string
-    onDownload: () => void
-    onDismiss: () => void
-}
-
-interface UpdateToastManualProps {
-    variant: "manual"
-    version: string
-    url: string
-    onDismiss: () => void
-}
-
-interface UpdateToastDownloadingProps {
-    variant: "downloading"
-    percent: number
-    onDismiss: () => void
-}
-
-type UpdateToastProps =
-    | UpdateToastAvailableProps
-    | UpdateToastManualProps
-    | UpdateToastDownloadingProps
-
-export function UpdateToast(props: UpdateToastProps) {
-    const { variant, onDismiss } = props
-
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === "Escape") {
-            e.preventDefault()
-            onDismiss()
-        }
-    }
-
-    return (
-        <div
-            role="alert"
-            aria-live="polite"
-            tabIndex={0}
-            onKeyDown={handleKeyDown}
-            className="flex items-center gap-3 bg-card border border-border/50 px-4 py-3 rounded-xl shadow-sm"
-        >
-            <div className="flex items-center justify-center w-8 h-8 rounded-full bg-primary/10 flex-shrink-0">
-                <svg
-                    className="w-4 h-4 text-primary"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    aria-hidden="true"
-                >
-                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
-                    <polyline points="7 10 12 15 17 10" />
-                    <line x1="12" y1="15" x2="12" y2="3" />
-                </svg>
-            </div>
-
-            <div className="flex-1 min-w-0">
-                {variant === "downloading" ? (
-                    <span className="text-sm text-foreground">
-                        Downloading update... {Math.round(props.percent)}%
-                    </span>
-                ) : (
-                    <span className="text-sm text-foreground">
-                        Version {props.version} is available
-                    </span>
-                )}
-            </div>
-
-            {variant === "download" && (
-                <button
-                    type="button"
-                    onClick={(e) => {
-                        e.stopPropagation()
-                        props.onDownload()
-                    }}
-                    className="text-xs font-medium px-3 py-1.5 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex-shrink-0"
-                >
-                    Download
-                </button>
-            )}
-
-            {variant === "manual" && (
-                <button
-                    type="button"
-                    onClick={(e) => {
-                        e.stopPropagation()
-                        window.open(props.url, "_blank")
-                    }}
-                    className="text-xs font-medium px-3 py-1.5 rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors flex-shrink-0"
-                >
-                    Download
-                </button>
-            )}
-
-            <button
-                type="button"
-                onClick={onDismiss}
-                className="text-muted-foreground hover:text-foreground transition-colors flex-shrink-0"
-                aria-label="Dismiss"
-            >
-                <svg
-                    className="w-4 h-4"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    aria-hidden="true"
-                >
-                    <path
-                        fillRule="evenodd"
-                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                        clipRule="evenodd"
-                    />
-                </svg>
-            </button>
-        </div>
-    )
-}

docs/cn/README_CN.md

@@ -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>提示词：</strong> 给我一个带有**动画连接器**的Transformer架构图。</p>
+      <p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
       <img src="../../public/animated_connectors.svg" alt="带动画连接器的Transformer架构" width="480" />
     </td>
   </tr>
   <tr>
     <td width="50%" valign="top">
-      <strong>GCP架构图</strong><br />
+      <strong>RAG技术图</strong><br />
-      <p><strong>提示词：</strong> 使用**GCP图标**生成一个GCP架构图。在这个图中，用户连接到托管在实例上的前端。</p>
+      <p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p>
-      <img src="../../public/gcp_demo.svg" alt="GCP架构图" width="480" />
+      <img src="../../public/rag_prod.svg" alt="RAG架构图" width="480" />
     </td>
     <td width="50%" valign="top">
-      <strong>AWS架构图</strong><br />
+      <strong>React和AWS认证流程</strong><br />
-      <p><strong>提示词：</strong> 使用**AWS图标**生成一个AWS架构图。在这个图中，用户连接到托管在实例上的前端。</p>
+      <p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p>
-      <img src="../../public/aws_demo.svg" alt="AWS架构图" width="480" />
+      <img src="../../public/auth.svg" alt="认证架构图" width="480" />
     </td>
   </tr>
   <tr>
     <td width="50%" valign="top">
-      <strong>Azure架构图</strong><br />
+      <strong>开放式创新</strong><br />
-      <p><strong>提示词：</strong> 使用**Azure图标**生成一个Azure架构图。在这个图中，用户连接到托管在实例上的前端。</p>
+      <p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p>
-      <img src="../../public/azure_demo.svg" alt="Azure架构图" width="480" />
+      <img src="../../public/inno.svg" alt="开放式创新图" width="480" />
     </td>
     <td width="50%" valign="top">
       <strong>猫咪素描</strong><br />
-      <p><strong>提示词：</strong> 给我画一只可爱的猫。</p>
+      <p><strong>Prompt:</strong> Draw a cute cat for me.</p>
       <img src="../../public/cat_demo.svg" alt="猫咪绘图" width="240" />
     </td>
   </tr>
@@ -98,9 +98,7 @@ 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。
 

docs/ja/README_JA.md

@@ -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>プロンプト：</strong> **アニメーションコネクタ**付きのTransformerアーキテクチャ図を作成してください。</p>
+      <p><strong>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
       <img src="../../public/animated_connectors.svg" alt="アニメーションコネクタ付きTransformerアーキテクチャ" width="480" />
     </td>
   </tr>
   <tr>
     <td width="50%" valign="top">
-      <strong>GCPアーキテクチャ図</strong><br />
+      <strong>RAG技術ダイアグラム</strong><br />
-      <p><strong>プロンプト：</strong> **GCPアイコン**を使用してGCPアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
+      <p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p>
-      <img src="../../public/gcp_demo.svg" alt="GCPアーキテクチャ図" width="480" />
+      <img src="../../public/rag_prod.svg" alt="RAGアーキテクチャ図" width="480" />
     </td>
     <td width="50%" valign="top">
-      <strong>AWSアーキテクチャ図</strong><br />
+      <strong>ReactとAWSによる認証</strong><br />
-      <p><strong>プロンプト：</strong> **AWSアイコン**を使用してAWSアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
+      <p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p>
-      <img src="../../public/aws_demo.svg" alt="AWSアーキテクチャ図" width="480" />
+      <img src="../../public/auth.svg" alt="認証アーキテクチャ図" width="480" />
     </td>
   </tr>
   <tr>
     <td width="50%" valign="top">
-      <strong>Azureアーキテクチャ図</strong><br />
+      <strong>オープンイノベーション</strong><br />
-      <p><strong>プロンプト：</strong> **Azureアイコン**を使用してAzureアーキテクチャ図を生成してください。この図では、ユーザーがインスタンス上でホストされているフロントエンドに接続します。</p>
+      <p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p>
-      <img src="../../public/azure_demo.svg" alt="Azureアーキテクチャ図" width="480" />
+      <img src="../../public/inno.svg" alt="オープンイノベーション図" width="480" />
     </td>
     <td width="50%" valign="top">
       <strong>猫のスケッチ</strong><br />
-      <p><strong>プロンプト：</strong> かわいい猫を描いてください。</p>
+      <p><strong>Prompt:</strong> Draw a cute cat for me.</p>
       <img src="../../public/cat_demo.svg" alt="猫の絵" width="240" />
     </td>
   </tr>
@@ -96,9 +96,7 @@ 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を使用できます。
 

electron/electron-builder.yml

@@ -95,6 +95,10 @@ linux:
       arch:
         - x64
         - arm64
+    - target: rpm
+      arch:
+        - x64
+        - arm64
 
 # Publish configuration (optional)
 publish:

electron/electron.d.ts

@@ -2,14 +2,6 @@
  * Type declarations for Electron API exposed via preload script
  */
 
-/** Update status data sent from main process */
-type UpdateStatusData =
-    | { status: "available"; version: string }
-    | { status: "available-manual"; version: string; url: string }
-    | { status: "downloading"; percent: number }
-    | { status: "downloaded" }
-    | { status: "error"; message: string }
-
 /** Configuration preset interface */
 interface ConfigPreset {
     id: string
@@ -82,12 +74,6 @@ declare global {
             >
             /** Set user's preferred locale */
             setUserLocale: (locale: string) => Promise<SetUserLocaleResult>
-            /** Listen for update status events from main process */
-            onUpdateStatus: (
-                callback: (data: UpdateStatusData) => void,
-            ) => () => void
-            /** Start downloading the available update */
-            startDownload: () => Promise<void>
         }
 
         /** Settings window Electron API */
@@ -115,8 +101,8 @@ declare global {
 }
 
 export type {
-    ConfigPreset,
     ApplyPresetResult,
+    ConfigPreset,
     ProxyConfig,
     SetProxyResult,
     SetUserLocaleResult,

electron/main/app-menu.ts

@@ -6,7 +6,6 @@ import {
     type MenuItemConstructorOptions,
     shell,
 } from "electron"
-import { checkForUpdatesManual } from "./auto-updater"
 import {
     applyPresetToEnv,
     getAllPresets,
@@ -157,11 +156,6 @@ function getMenuTemplate(): MenuItemConstructorOptions[] {
     template.push({
         label: t.help,
         submenu: [
-            {
-                label: t.checkForUpdates,
-                click: () => checkForUpdatesManual(),
-            },
-            { type: "separator" },
             {
                 label: t.documentation,
                 click: async () => {

electron/main/auto-updater.ts

@@ -1,282 +0,0 @@
-import https from "node:https"
-import { app, dialog, ipcMain } from "electron"
-import electronUpdater from "electron-updater"
-import { getMainWindow } from "./window-manager"
-
-const { autoUpdater } = electronUpdater
-
-const CHECK_INTERVAL = 4 * 60 * 60 * 1000 // 4 hours
-const STARTUP_DELAY = 10_000 // 10 seconds
-const GITHUB_API_URL =
-    "https://api.github.com/repos/DayuanJiang/next-ai-draw-io/releases/latest"
-
-let isChecking = false
-let updateDownloaded = false
-
-/**
- * Whether this platform supports electron-updater auto-update.
- * macOS: disabled because builds are ad-hoc signed (no Apple Developer cert).
- */
-function supportsAutoUpdate(): boolean {
-    if (process.platform === "darwin") return false
-    if (process.platform === "win32" && process.env.PORTABLE_EXECUTABLE_DIR)
-        return false
-    if (process.platform === "linux" && !process.env.APPIMAGE) return false
-    return true
-}
-
-/**
- * Compare two semver-like version strings numerically.
- * Returns true if remote > local.
- * Strips prerelease/build metadata (e.g., "1.2.3-beta.1" → "1.2.3").
- */
-function isNewerVersion(remote: string, local: string): boolean {
-    const strip = (v: string) => v.replace(/^v/, "").split("-")[0].split("+")[0]
-    const r = strip(remote).split(".").map(Number)
-    const l = strip(local).split(".").map(Number)
-    const len = Math.max(r.length, l.length)
-    for (let i = 0; i < len; i++) {
-        const rv = r[i] || 0
-        const lv = l[i] || 0
-        if (rv > lv) return true
-        if (rv < lv) return false
-    }
-    return false
-}
-
-/**
- * Send update status to the renderer via IPC
- */
-function sendStatus(data: Record<string, unknown>) {
-    const win = getMainWindow()
-    if (win && !win.isDestroyed()) {
-        win.webContents.send("update-status", data)
-    }
-}
-
-/**
- * Check GitHub API for latest release (used on macOS and Linux DEB)
- */
-function checkGitHubRelease(manual: boolean) {
-    const req = https.get(
-        GITHUB_API_URL,
-        {
-            headers: { "User-Agent": "next-ai-draw-io" },
-            timeout: 15000,
-        },
-        (res) => {
-            if (res.statusCode !== 200) {
-                console.error(`GitHub API returned status ${res.statusCode}`)
-                if (manual) {
-                    dialog.showMessageBox({
-                        type: "error",
-                        title: "Update Check Failed",
-                        message:
-                            "Could not check for updates. Please try again later.",
-                    })
-                }
-                isChecking = false
-                return
-            }
-
-            res.setEncoding("utf8")
-            let body = ""
-            res.on("data", (chunk: string) => {
-                body += chunk
-            })
-            res.on("end", () => {
-                try {
-                    const data = JSON.parse(body)
-                    const remoteVersion = data.tag_name || ""
-                    const localVersion = app.getVersion()
-
-                    if (isNewerVersion(remoteVersion, localVersion)) {
-                        sendStatus({
-                            status: "available-manual",
-                            version: remoteVersion.replace(/^v/, ""),
-                            url: data.html_url,
-                        })
-                    } else if (manual) {
-                        dialog.showMessageBox({
-                            type: "info",
-                            title: "No Updates",
-                            message: "You're up to date!",
-                            detail: `Version ${localVersion} is the latest version.`,
-                        })
-                    }
-                } catch (err) {
-                    console.error("Failed to parse GitHub release:", err)
-                    if (manual) {
-                        dialog.showMessageBox({
-                            type: "error",
-                            title: "Update Check Failed",
-                            message:
-                                "Could not check for updates. Please try again later.",
-                        })
-                    }
-                }
-                isChecking = false
-            })
-        },
-    )
-    req.on("timeout", () => {
-        req.destroy()
-        isChecking = false
-    })
-    req.on("error", (err) => {
-        console.error("GitHub API request failed:", err)
-        if (manual) {
-            dialog.showMessageBox({
-                type: "error",
-                title: "Update Check Failed",
-                message: "Could not check for updates. Please try again later.",
-            })
-        }
-        isChecking = false
-    })
-    req.end()
-}
-
-/**
- * Set up electron-updater event handlers (Windows NSIS / Linux AppImage)
- */
-function setupAutoUpdater() {
-    autoUpdater.autoDownload = false
-    autoUpdater.autoInstallOnAppQuit = true
-
-    autoUpdater.on("update-available", (info) => {
-        console.log("Update available:", info.version)
-        sendStatus({ status: "available", version: info.version })
-        isChecking = false
-    })
-
-    autoUpdater.on("update-not-available", () => {
-        console.log("No update available")
-        isChecking = false
-    })
-
-    autoUpdater.on("download-progress", (progress) => {
-        sendStatus({
-            status: "downloading",
-            percent: progress.percent,
-        })
-    })
-
-    autoUpdater.on("update-downloaded", () => {
-        updateDownloaded = true
-        console.log("Update downloaded")
-        sendStatus({ status: "downloaded" })
-        showRestartDialog()
-    })
-
-    autoUpdater.on("error", (err) => {
-        console.error("Auto-update error:", err)
-        sendStatus({ status: "error", message: String(err) })
-        isChecking = false
-    })
-
-    // IPC: renderer requests download
-    ipcMain.handle("updater:start-download", () => {
-        return autoUpdater.downloadUpdate()
-    })
-}
-
-/**
- * Show restart dialog after update downloaded
- */
-async function showRestartDialog() {
-    const result = await dialog.showMessageBox({
-        type: "info",
-        buttons: ["Restart Now", "Later"],
-        defaultId: 0,
-        cancelId: 1,
-        title: "Update Ready",
-        message: "A new version has been downloaded.",
-        detail: "Restart the app to install the update.",
-    })
-    if (result.response === 0) {
-        autoUpdater.quitAndInstall()
-    }
-}
-
-/**
- * Run a single update check
- */
-function doCheck(manual: boolean) {
-    if (isChecking) return
-    isChecking = true
-
-    // If update already downloaded, just re-show restart dialog
-    if (updateDownloaded && supportsAutoUpdate()) {
-        isChecking = false
-        showRestartDialog()
-        return
-    }
-
-    if (supportsAutoUpdate()) {
-        // For manual check, register listeners BEFORE triggering check
-        // to avoid race where event fires before listeners are attached
-        if (manual) {
-            const onNotAvailable = () => {
-                dialog.showMessageBox({
-                    type: "info",
-                    title: "No Updates",
-                    message: "You're up to date!",
-                    detail: `Version ${app.getVersion()} is the latest version.`,
-                })
-                cleanup()
-            }
-            const onAvailable = () => cleanup()
-            const onError = () => cleanup()
-            const cleanup = () => {
-                autoUpdater.off("update-not-available", onNotAvailable)
-                autoUpdater.off("update-available", onAvailable)
-                autoUpdater.off("error", onError)
-            }
-            autoUpdater.once("update-not-available", onNotAvailable)
-            autoUpdater.once("update-available", onAvailable)
-            autoUpdater.once("error", onError)
-        }
-        autoUpdater.checkForUpdates().catch((err) => {
-            console.error("checkForUpdates failed:", err)
-            isChecking = false
-        })
-    } else {
-        checkGitHubRelease(manual)
-    }
-}
-
-/**
- * Initialize auto-updater. Call once after createWindow().
- */
-export function initAutoUpdater() {
-    if (!app.isPackaged) return
-
-    if (supportsAutoUpdate()) {
-        setupAutoUpdater()
-    } else {
-        // Register no-op handler so renderer doesn't get an unhandled error
-        ipcMain.handle("updater:start-download", () => {})
-    }
-
-    // First check after startup delay
-    setTimeout(() => doCheck(false), STARTUP_DELAY)
-
-    // Periodic checks
-    setInterval(() => doCheck(false), CHECK_INTERVAL)
-}
-
-/**
- * Manual update check from menu item
- */
-export function checkForUpdatesManual() {
-    if (!app.isPackaged) {
-        dialog.showMessageBox({
-            type: "info",
-            title: "Development Mode",
-            message: "Auto-update is not available in development mode.",
-        })
-        return
-    }
-    doCheck(true)
-}

electron/main/index.ts

@@ -1,6 +1,5 @@
 import { app, BrowserWindow, dialog, shell } from "electron"
 import { buildAppMenu } from "./app-menu"
-import { initAutoUpdater } from "./auto-updater"
 import { getCurrentPresetEnv } from "./config-manager"
 import { loadEnvFile } from "./env-loader"
 import { registerIpcHandlers } from "./ipc-handlers"
@@ -59,11 +58,6 @@ if (!gotTheLock) {
 
             // Create main window
             createWindow(serverUrl)
-
-            // Initialize auto-updater (production only)
-            if (!isDev) {
-                initAutoUpdater()
-            }
         } catch (error) {
             console.error("Failed to start application:", error)
             dialog.showErrorBox(

electron/main/menu-i18n.ts

@@ -33,7 +33,6 @@ export interface MenuTranslations {
     help: string
     documentation: string
     reportIssue: string
-    checkForUpdates: string
 }
 
 const translations: Record<MenuLocale, MenuTranslations> = {
@@ -63,7 +62,6 @@ const translations: Record<MenuLocale, MenuTranslations> = {
         help: "Help",
         documentation: "Documentation",
         reportIssue: "Report Issue",
-        checkForUpdates: "Check for Updates...",
     },
 
     zh: {
@@ -92,7 +90,6 @@ const translations: Record<MenuLocale, MenuTranslations> = {
         help: "帮助",
         documentation: "文档",
         reportIssue: "报告问题",
-        checkForUpdates: "检查更新...",
     },
 
     ja: {
@@ -121,7 +118,6 @@ const translations: Record<MenuLocale, MenuTranslations> = {
         help: "ヘルプ",
         documentation: "ドキュメント",
         reportIssue: "問題を報告",
-        checkForUpdates: "アップデートを確認...",
     },
 
     "zh-Hant": {
@@ -150,7 +146,6 @@ const translations: Record<MenuLocale, MenuTranslations> = {
         help: "說明",
         documentation: "文件",
         reportIssue: "回報問題",
-        checkForUpdates: "檢查更新...",
     },
 }
 

electron/main/window-manager.ts

@@ -60,6 +60,13 @@ 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
     })

electron/preload/index.ts

@@ -1,12 +1,4 @@
-import { contextBridge, type IpcRendererEvent, ipcRenderer } from "electron"
+import { contextBridge, ipcRenderer } from "electron"
-
-// Locally defined to avoid dependency on electron.d.ts compilation scope
-type UpdateStatus =
-    | { status: "available"; version: string }
-    | { status: "available-manual"; version: string; url: string }
-    | { status: "downloading"; percent: number }
-    | { status: "downloaded" }
-    | { status: "error"; message: string }
 
 /**
  * Expose safe APIs to the renderer process
@@ -39,13 +31,4 @@ contextBridge.exposeInMainWorld("electronAPI", {
     getUserLocale: () => ipcRenderer.invoke("get-user-locale"),
     setUserLocale: (locale: string) =>
         ipcRenderer.invoke("set-user-locale", locale),
-
-    // Auto-update
-    onUpdateStatus: (callback: (data: UpdateStatus) => void) => {
-        const handler = (_event: IpcRendererEvent, data: UpdateStatus) =>
-            callback(data)
-        ipcRenderer.on("update-status", handler)
-        return () => ipcRenderer.removeListener("update-status", handler)
-    },
-    startDownload: () => ipcRenderer.invoke("updater:start-download"),
 })

hooks/use-auto-update.ts

@@ -1,86 +0,0 @@
-import { createElement, useEffect, useRef } from "react"
-import { toast } from "sonner"
-import { UpdateToast } from "@/components/update-toast"
-
-export function useAutoUpdate() {
-    const downloadToastId = useRef<string | number | null>(null)
-
-    useEffect(() => {
-        const api = (window as Window).electronAPI
-        if (!api?.onUpdateStatus) return
-
-        const cleanup = api.onUpdateStatus((data) => {
-            switch (data.status) {
-                case "available":
-                    toast.custom(
-                        (t) =>
-                            createElement(UpdateToast, {
-                                variant: "download",
-                                version: data.version,
-                                onDownload: () => {
-                                    toast.dismiss(t)
-                                    api.startDownload().catch(() => {
-                                        // Error will come through update-status channel
-                                    })
-                                },
-                                onDismiss: () => toast.dismiss(t),
-                            }),
-                        { duration: 15000 },
-                    )
-                    break
-
-                case "available-manual":
-                    toast.custom(
-                        (t) =>
-                            createElement(UpdateToast, {
-                                variant: "manual",
-                                version: data.version,
-                                url: data.url,
-                                onDismiss: () => toast.dismiss(t),
-                            }),
-                        { duration: Number.POSITIVE_INFINITY },
-                    )
-                    break
-
-                case "downloading": {
-                    const id =
-                        downloadToastId.current ??
-                        `download-progress-${Date.now()}`
-                    downloadToastId.current = id
-                    toast.custom(
-                        (t) =>
-                            createElement(UpdateToast, {
-                                variant: "downloading",
-                                percent: data.percent,
-                                onDismiss: () => toast.dismiss(t),
-                            }),
-                        { id, duration: Number.POSITIVE_INFINITY },
-                    )
-                    break
-                }
-
-                case "downloaded":
-                    // Dismiss progress toast — native restart dialog handles the rest
-                    if (downloadToastId.current) {
-                        toast.dismiss(downloadToastId.current)
-                        downloadToastId.current = null
-                    }
-                    break
-
-                case "error":
-                    if (downloadToastId.current) {
-                        // Error during active download — inform the user
-                        toast.dismiss(downloadToastId.current)
-                        downloadToastId.current = null
-                        toast.error(
-                            "Update download failed. Please try again later.",
-                        )
-                    }
-                    // Otherwise: silent — background check failure, logged in main process
-                    break
-            }
-        })
-
-        return cleanup
-    }, [])
-}

lib/ai-providers.ts

@@ -1262,7 +1262,6 @@ export function getAIModel(overrides?: ClientOverrides): ModelConfig {
         case "glm":
         case "qwen":
         case "qiniu":
-        case "kimi":
         case "novita": {
             const envVar = PROVIDER_ENV_VARS[provider]
             if (!envVar) {
@@ -1288,6 +1287,23 @@ 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`,
@@ -1356,12 +1372,13 @@ export function supportsImageInput(modelId: string): boolean {
     }
 
     // Qwen text models (not vision variants like qwen-vl)
-    // qwen3.5-plus is a vision model
+    // 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/"
     if (
         lowerModelId.includes("qwen") &&
         !hasVisionIndicator &&
-        !lowerModelId.includes("qwen3.5-plus") &&
+        !lowerModelId.includes("qwen3.5") &&
-        !lowerModelId.includes("qwen3.5-flash")
+        !lowerModelId.includes("qvq")
     ) {
         return false
     }

lib/drawio-themes.ts

@@ -0,0 +1,17 @@
+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)
+    )
+}

lib/i18n/dictionaries/en.json

@@ -76,8 +76,7 @@
         "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",
@@ -103,10 +102,12 @@
         "theme": "Theme",
         "themeDescription": "Dark/Light mode for interface and DrawIO canvas.",
         "drawioStyle": "DrawIO Style",
-        "drawioStyleDescription": "Canvas style:",
+        "drawioStyleDescription": "Canvas style",
-        "switchTo": "Switch to",
+        "themeDefault": "Default",
-        "minimal": "Minimal",
+        "themeDark": "Dark",
-        "sketch": "Sketch",
+        "themeMinimal": "Minimal",
+        "themeSketch": "Sketch",
+        "themeSimple": "Simple",
         "diagramStyle": "Diagram Style",
         "diagramStyleDescription": "Toggle between minimal and styled diagram output.",
         "sendShortcut": "Send Shortcut",

lib/i18n/dictionaries/ja.json

@@ -76,8 +76,7 @@
         "creativeDescription": "楽しくてクリエイティブなものを描く",
         "cachedNote": "例はキャッシュされ、即座に応答します",
         "mcpServer": "MCP サーバー",
-        "mcpDescription": "Claude Desktop、VS Code、Cursor で使用",
+        "mcpDescription": "Claude Desktop、VS Code、Cursor で使用"
-        "preview": "プレビュー"
     },
     "settings": {
         "title": "設定",
@@ -103,10 +102,12 @@
         "theme": "テーマ",
         "themeDescription": "インターフェースと DrawIO キャンバスのダーク/ライトモード。",
         "drawioStyle": "DrawIO スタイル",
-        "drawioStyleDescription": "キャンバススタイル：",
+        "drawioStyleDescription": "キャンバススタイル",
-        "switchTo": "切り替え",
+        "themeDefault": "デフォルト",
-        "minimal": "ミニマル",
+        "themeDark": "ダーク",
-        "sketch": "スケッチ",
+        "themeMinimal": "ミニマル",
+        "themeSketch": "スケッチ",
+        "themeSimple": "シンプル",
         "diagramStyle": "ダイアグラムスタイル",
         "diagramStyleDescription": "ミニマルとスタイル付きの出力を切り替えます。",
         "sendShortcut": "送信ショートカット",

lib/i18n/dictionaries/zh-Hant.json

@@ -76,8 +76,7 @@
         "creativeDescription": "繪製有趣且富有創意的內容",
         "cachedNote": "範例已快取，可即時回應",
         "mcpServer": "MCP 伺服器",
-        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用",
+        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用"
-        "preview": "預覽"
     },
     "settings": {
         "title": "設定",
@@ -103,10 +102,12 @@
         "theme": "主題",
         "themeDescription": "介面和 DrawIO 畫布的深色/淺色模式。",
         "drawioStyle": "DrawIO 樣式",
-        "drawioStyleDescription": "畫布樣式：",
+        "drawioStyleDescription": "畫布樣式",
-        "switchTo": "切換到",
+        "themeDefault": "預設",
-        "minimal": "簡約",
+        "themeDark": "深色",
-        "sketch": "草圖",
+        "themeMinimal": "簡約",
+        "themeSketch": "草圖",
+        "themeSimple": "簡單",
         "diagramStyle": "圖表樣式",
         "diagramStyleDescription": "切換簡約與精緻圖表輸出模式。",
         "sendShortcut": "傳送快捷鍵",

lib/i18n/dictionaries/zh.json

@@ -76,8 +76,7 @@
         "creativeDescription": "绘制有趣且富有创意的内容",
         "cachedNote": "示例已缓存，可即时响应",
         "mcpServer": "MCP 服务器",
-        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用",
+        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用"
-        "preview": "预览"
     },
     "settings": {
         "title": "设置",
@@ -103,10 +102,12 @@
         "theme": "主题",
         "themeDescription": "界面和 DrawIO 画布的深色/浅色模式。",
         "drawioStyle": "DrawIO 样式",
-        "drawioStyleDescription": "画布样式：",
+        "drawioStyleDescription": "画布样式",
-        "switchTo": "切换到",
+        "themeDefault": "默认",
-        "minimal": "简约",
+        "themeDark": "深色",
-        "sketch": "草图",
+        "themeMinimal": "简约",
+        "themeSketch": "草图",
+        "themeSimple": "简单",
         "diagramStyle": "图表样式",
         "diagramStyleDescription": "切换简约与精致图表输出模式。",
         "sendShortcut": "发送快捷键",

lib/session-storage.ts

@@ -58,33 +58,6 @@ interface ChatSessionDB extends DBSchema {
 
 // Database singleton
 let dbPromise: Promise<IDBPDatabase<ChatSessionDB>> | null = null
-const resetDBPromise = () => {
-    dbPromise = null
-}
-
-const isClosingError = (error: unknown): boolean => {
-    return (
-        error instanceof DOMException &&
-        error.name === "InvalidStateError" &&
-        /closing/i.test(error.message)
-    )
-}
-
-const withDB = async <T>(
-    action: (db: IDBPDatabase<ChatSessionDB>) => Promise<T>,
-): Promise<T> => {
-    try {
-        const db = await getDB()
-        return await action(db)
-    } catch (error) {
-        if (isClosingError(error)) {
-            resetDBPromise()
-            const db = await getDB()
-            return await action(db)
-        }
-        throw error
-    }
-}
 
 async function getDB(): Promise<IDBPDatabase<ChatSessionDB>> {
     if (!dbPromise) {
@@ -115,23 +88,7 @@ async function getDB(): Promise<IDBPDatabase<ChatSessionDB>> {
                     }
                 }
             },
-            terminated() {
-                resetDBPromise()
-            },
         })
-        dbPromise
-            .then((db) => {
-                db.onversionchange = () => {
-                    db.close()
-                    resetDBPromise()
-                }
-                db.onclose = () => {
-                    resetDBPromise()
-                }
-            })
-            .catch(() => {
-                resetDBPromise()
-            })
     }
     return dbPromise
 }
@@ -146,46 +103,31 @@ export function isIndexedDBAvailable(): boolean {
     }
 }
 
-// Check if IndexedDB is actually usable (not just present).
-// Note: Do NOT close the db here - getDB() returns a shared singleton connection
-// that other code depends on.
-export async function isIndexedDBUsable(): Promise<boolean> {
-    if (!isIndexedDBAvailable()) return false
-    try {
-        await getDB()
-        return true
-    } catch {
-        return false
-    }
-}
-
 // CRUD Operations
 export async function getAllSessionMetadata(): Promise<SessionMetadata[]> {
     if (!isIndexedDBAvailable()) return []
     try {
-        return await withDB(async (db) => {
+        const db = await getDB()
-            const tx = db.transaction(STORE_NAME, "readonly")
+        const tx = db.transaction(STORE_NAME, "readonly")
-            const index = tx.store.index("by-updated")
+        const index = tx.store.index("by-updated")
-            const metadata: SessionMetadata[] = []
+        const metadata: SessionMetadata[] = []
 
-            // Use cursor to read only metadata fields (avoids loading full messages/XML)
+        // Use cursor to read only metadata fields (avoids loading full messages/XML)
-            let cursor = await index.openCursor(null, "prev") // newest first
+        let cursor = await index.openCursor(null, "prev") // newest first
-            while (cursor) {
+        while (cursor) {
-                const s = cursor.value
+            const s = cursor.value
-                metadata.push({
+            metadata.push({
-                    id: s.id,
+                id: s.id,
-                    title: s.title,
+                title: s.title,
-                    createdAt: s.createdAt,
+                createdAt: s.createdAt,
-                    updatedAt: s.updatedAt,
+                updatedAt: s.updatedAt,
-                    messageCount: s.messages.length,
+                messageCount: s.messages.length,
-                    hasDiagram:
+                hasDiagram: !!s.diagramXml && s.diagramXml.trim().length > 0,
-                        !!s.diagramXml && s.diagramXml.trim().length > 0,
+                thumbnailDataUrl: s.thumbnailDataUrl,
-                    thumbnailDataUrl: s.thumbnailDataUrl,
+            })
-                })
+            cursor = await cursor.continue()
-                cursor = await cursor.continue()
+        }
-            }
+        return metadata
-            return metadata
-        })
     } catch (error) {
         console.error("Failed to get session metadata:", error)
         return []
@@ -195,9 +137,8 @@ export async function getAllSessionMetadata(): Promise<SessionMetadata[]> {
 export async function getSession(id: string): Promise<ChatSession | null> {
     if (!isIndexedDBAvailable()) return null
     try {
-        return await withDB(async (db) => {
+        const db = await getDB()
-            return (await db.get(STORE_NAME, id)) || null
+        return (await db.get(STORE_NAME, id)) || null
-        })
     } catch (error) {
         console.error("Failed to get session:", error)
         return null
@@ -207,9 +148,8 @@ export async function getSession(id: string): Promise<ChatSession | null> {
 export async function saveSession(session: ChatSession): Promise<boolean> {
     if (!isIndexedDBAvailable()) return false
     try {
-        await withDB(async (db) => {
+        const db = await getDB()
-            await db.put(STORE_NAME, session)
+        await db.put(STORE_NAME, session)
-        })
         return true
     } catch (error) {
         // Handle quota exceeded
@@ -221,9 +161,8 @@ export async function saveSession(session: ChatSession): Promise<boolean> {
             await deleteOldestSession()
             // Retry once
             try {
-                await withDB(async (db) => {
+                const db = await getDB()
-                    await db.put(STORE_NAME, session)
+                await db.put(STORE_NAME, session)
-                })
                 return true
             } catch (retryError) {
                 console.error(
@@ -242,9 +181,8 @@ export async function saveSession(session: ChatSession): Promise<boolean> {
 export async function deleteSession(id: string): Promise<void> {
     if (!isIndexedDBAvailable()) return
     try {
-        await withDB(async (db) => {
+        const db = await getDB()
-            await db.delete(STORE_NAME, id)
+        await db.delete(STORE_NAME, id)
-        })
     } catch (error) {
         console.error("Failed to delete session:", error)
     }
@@ -253,9 +191,8 @@ export async function deleteSession(id: string): Promise<void> {
 export async function getSessionCount(): Promise<number> {
     if (!isIndexedDBAvailable()) return 0
     try {
-        return await withDB(async (db) => {
+        const db = await getDB()
-            return await db.count(STORE_NAME)
+        return await db.count(STORE_NAME)
-        })
     } catch (error) {
         console.error("Failed to get session count:", error)
         return 0
@@ -265,15 +202,14 @@ export async function getSessionCount(): Promise<number> {
 export async function deleteOldestSession(): Promise<void> {
     if (!isIndexedDBAvailable()) return
     try {
-        await withDB(async (db) => {
+        const db = await getDB()
-            const tx = db.transaction(STORE_NAME, "readwrite")
+        const tx = db.transaction(STORE_NAME, "readwrite")
-            const index = tx.store.index("by-updated")
+        const index = tx.store.index("by-updated")
-            const cursor = await index.openCursor()
+        const cursor = await index.openCursor()
-            if (cursor) {
+        if (cursor) {
-                await cursor.delete()
+            await cursor.delete()
-            }
+        }
-            await tx.done
+        await tx.done
-        })
     } catch (error) {
         console.error("Failed to delete oldest session:", error)
     }

lib/template-storage.ts

@@ -57,33 +57,6 @@ export function generateDefaultTitle(prompt: string): string {
 
 // Database singleton
 let dbPromise: Promise<IDBPDatabase<TemplateDB>> | null = null
-const resetDBPromise = () => {
-    dbPromise = null
-}
-
-const isClosingError = (error: unknown): boolean => {
-    return (
-        error instanceof DOMException &&
-        error.name === "InvalidStateError" &&
-        /closing/i.test(error.message)
-    )
-}
-
-const withDB = async <T>(
-    action: (db: IDBPDatabase<TemplateDB>) => Promise<T>,
-): Promise<T> => {
-    try {
-        const db = await getDB()
-        return await action(db)
-    } catch (error) {
-        if (isClosingError(error)) {
-            resetDBPromise()
-            const db = await getDB()
-            return await action(db)
-        }
-        throw error
-    }
-}
 
 async function getDB(): Promise<IDBPDatabase<TemplateDB>> {
     if (!dbPromise) {
@@ -101,23 +74,7 @@ async function getDB(): Promise<IDBPDatabase<TemplateDB>> {
                     }
                 }
             },
-            terminated() {
-                resetDBPromise()
-            },
         })
-        dbPromise
-            .then((db) => {
-                db.onversionchange = () => {
-                    db.close()
-                    resetDBPromise()
-                }
-                db.onclose = () => {
-                    resetDBPromise()
-                }
-            })
-            .catch(() => {
-                resetDBPromise()
-            })
     }
     return dbPromise
 }
@@ -137,10 +94,9 @@ export function isIndexedDBAvailable(): boolean {
 export async function getAllTemplates(): Promise<Template[]> {
     if (!isIndexedDBAvailable()) return []
     try {
-        return await withDB(async (db) => {
+        const db = await getDB()
-            const templates = await db.getAll(STORE_NAME)
+        const templates = await db.getAll(STORE_NAME)
-            return sortTemplates(templates)
+        return sortTemplates(templates)
-        })
     } catch (error) {
         console.error("Failed to get templates:", error)
         return []
@@ -150,9 +106,8 @@ export async function getAllTemplates(): Promise<Template[]> {
 export async function getTemplate(id: string): Promise<Template | null> {
     if (!isIndexedDBAvailable()) return null
     try {
-        return await withDB(async (db) => {
+        const db = await getDB()
-            return (await db.get(STORE_NAME, id)) || null
+        return (await db.get(STORE_NAME, id)) || null
-        })
     } catch (error) {
         console.error("Failed to get template:", error)
         return null
@@ -182,9 +137,8 @@ export async function createTemplate(
     }
 
     try {
-        await withDB(async (db) => {
+        const db = await getDB()
-            await db.put(STORE_NAME, template)
+        await db.put(STORE_NAME, template)
-        })
         return template
     } catch (error) {
         console.error("Failed to create template:", error)
@@ -198,20 +152,19 @@ export async function updateTemplate(
 ): Promise<Template | null> {
     if (!isIndexedDBAvailable()) return null
     try {
-        return await withDB(async (db) => {
+        const db = await getDB()
-            const existing = await db.get(STORE_NAME, id)
+        const existing = await db.get(STORE_NAME, id)
-            if (!existing) return null
+        if (!existing) return null
 
-            const updated: Template = {
+        const updated: Template = {
-                ...existing,
+            ...existing,
-                ...updates,
+            ...updates,
-                id: existing.id,
+            id: existing.id,
-                createdAt: existing.createdAt,
+            createdAt: existing.createdAt,
-                updatedAt: Date.now(),
+            updatedAt: Date.now(),
-            }
+        }
-            await db.put(STORE_NAME, updated)
+        await db.put(STORE_NAME, updated)
-            return updated
+        return updated
-        })
     } catch (error) {
         console.error("Failed to update template:", error)
         return null
@@ -221,9 +174,8 @@ export async function updateTemplate(
 export async function deleteTemplate(id: string): Promise<boolean> {
     if (!isIndexedDBAvailable()) return false
     try {
-        await withDB(async (db) => {
+        const db = await getDB()
-            await db.delete(STORE_NAME, id)
+        await db.delete(STORE_NAME, id)
-        })
         return true
     } catch (error) {
         console.error("Failed to delete template:", error)
@@ -237,25 +189,24 @@ export async function duplicateTemplate(
 ): Promise<Template | null> {
     if (!isIndexedDBAvailable()) return null
     try {
-        return await withDB(async (db) => {
+        const db = await getDB()
-            const existing = await db.get(STORE_NAME, id)
+        const existing = await db.get(STORE_NAME, id)
-            if (!existing) return null
+        if (!existing) return null
 
-            const now = Date.now()
+        const now = Date.now()
-            const duplicate: Template = {
+        const duplicate: Template = {
-                ...existing,
+            ...existing,
-                id: nanoid(),
+            id: nanoid(),
-                title: `${existing.title} ${copySuffix}`,
+            title: `${existing.title} ${copySuffix}`,
-                createdAt: now,
+            createdAt: now,
-                updatedAt: now,
+            updatedAt: now,
-                clickCount: 0,
+            clickCount: 0,
-                runCount: 0,
+            runCount: 0,
-                lastUsedAt: 0,
+            lastUsedAt: 0,
-                pinned: false,
+            pinned: false,
-            }
+        }
-            await db.put(STORE_NAME, duplicate)
+        await db.put(STORE_NAME, duplicate)
-            return duplicate
+        return duplicate
-        })
     } catch (error) {
         console.error("Failed to duplicate template:", error)
         return null
@@ -267,13 +218,12 @@ export async function duplicateTemplate(
 export async function incrementClickCount(id: string): Promise<void> {
     if (!isIndexedDBAvailable()) return
     try {
-        await withDB(async (db) => {
+        const db = await getDB()
-            const template = await db.get(STORE_NAME, id)
+        const template = await db.get(STORE_NAME, id)
-            if (!template) return
+        if (!template) return
-            template.clickCount += 1
+        template.clickCount += 1
-            template.updatedAt = Date.now()
+        template.updatedAt = Date.now()
-            await db.put(STORE_NAME, template)
+        await db.put(STORE_NAME, template)
-        })
     } catch (error) {
         console.error("Failed to increment click count:", error)
     }
@@ -282,15 +232,14 @@ export async function incrementClickCount(id: string): Promise<void> {
 export async function incrementRunCount(id: string): Promise<void> {
     if (!isIndexedDBAvailable()) return
     try {
-        await withDB(async (db) => {
+        const db = await getDB()
-            const template = await db.get(STORE_NAME, id)
+        const template = await db.get(STORE_NAME, id)
-            if (!template) return
+        if (!template) return
-            const now = Date.now()
+        const now = Date.now()
-            template.runCount += 1
+        template.runCount += 1
-            template.lastUsedAt = now
+        template.lastUsedAt = now
-            template.updatedAt = now
+        template.updatedAt = now
-            await db.put(STORE_NAME, template)
+        await db.put(STORE_NAME, template)
-        })
     } catch (error) {
         console.error("Failed to increment run count:", error)
     }
@@ -423,9 +372,8 @@ export async function importTemplates(
             pinned: typeof t.pinned === "boolean" ? t.pinned : false,
         }
         try {
-            await withDB(async (db) => {
+            const db = await getDB()
-                await db.put(STORE_NAME, newTemplate)
+            await db.put(STORE_NAME, newTemplate)
-            })
             existingKeys.add(key)
             imported++
         } catch (error) {

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "next-ai-draw-io",
-    "version": "0.4.14",
+    "version": "0.4.15",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "next-ai-draw-io",
-            "version": "0.4.14",
+            "version": "0.4.15",
             "license": "Apache-2.0",
             "dependencies": {
                 "@ai-sdk/amazon-bedrock": "^4.0.1",
@@ -48,7 +48,6 @@
                 "class-variance-authority": "^0.7.1",
                 "clsx": "^2.1.1",
                 "cmdk": "^1.1.1",
-                "electron-updater": "^6.8.3",
                 "idb": "^8.0.3",
                 "jsonrepair": "^3.13.1",
                 "lucide-react": "^0.577.0",
@@ -2225,6 +2224,9 @@
                 "arm64"
             ],
             "dev": true,
+            "libc": [
+                "glibc"
+            ],
             "license": "MIT OR Apache-2.0",
             "optional": true,
             "os": [
@@ -2242,6 +2244,9 @@
                 "arm64"
             ],
             "dev": true,
+            "libc": [
+                "musl"
+            ],
             "license": "MIT OR Apache-2.0",
             "optional": true,
             "os": [
@@ -2259,6 +2264,9 @@
                 "x64"
             ],
             "dev": true,
+            "libc": [
+                "glibc"
+            ],
             "license": "MIT OR Apache-2.0",
             "optional": true,
             "os": [
@@ -2276,6 +2284,9 @@
                 "x64"
             ],
             "dev": true,
+            "libc": [
+                "musl"
+            ],
             "license": "MIT OR Apache-2.0",
             "optional": true,
             "os": [
@@ -8246,6 +8257,9 @@
                 "x64"
             ],
             "dev": true,
+            "libc": [
+                "glibc"
+            ],
             "license": "MPL-2.0",
             "optional": true,
             "os": [
@@ -9659,9 +9673,9 @@
             }
         },
         "node_modules/@xmldom/xmldom": {
-            "version": "0.9.9",
+            "version": "0.9.10",
-            "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.9.9.tgz",
+            "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.9.10.tgz",
-            "integrity": "sha512-qycIHAucxy/LXAYIjmLmtQ8q9GPnMbnjG1KXhWm9o5sCr6pOYDATkMPiTNa6/v8eELyqOQ2FsEqeoFYmgv/gJg==",
+            "integrity": "sha512-A9gOqLdi6cV4ibazAjcQufGj0B1y/vDqYrcuP6d/6x8P27gRS8643Dj9o1dEKtB6O7fwxb2FgBmJS2mX7gpvdw==",
             "license": "MIT",
             "engines": {
                 "node": ">=14.6"
@@ -10046,6 +10060,7 @@
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
             "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+            "dev": true,
             "license": "Python-2.0"
         },
         "node_modules/aria-hidden": {
@@ -10681,6 +10696,7 @@
             "version": "9.5.1",
             "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-9.5.1.tgz",
             "integrity": "sha512-qt41tMfgHTllhResqM5DcnHyDIWNgzHvuY2jDcYP9iaGpkWxTUzV6GQjDeLnlR1/DtdlcsWQbA7sByMpmJFTLQ==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "debug": "^4.3.4",
@@ -12779,69 +12795,6 @@
             "dev": true,
             "license": "ISC"
         },
-        "node_modules/electron-updater": {
-            "version": "6.8.3",
-            "resolved": "https://registry.npmjs.org/electron-updater/-/electron-updater-6.8.3.tgz",
-            "integrity": "sha512-Z6sgw3jgbikWKXei1ENdqFOxBP0WlXg3TtKfz0rgw2vIZFJUyI4pD7ZN7jrkm7EoMK+tcm/qTnPUdqfZukBlBQ==",
-            "license": "MIT",
-            "dependencies": {
-                "builder-util-runtime": "9.5.1",
-                "fs-extra": "^10.1.0",
-                "js-yaml": "^4.1.0",
-                "lazy-val": "^1.0.5",
-                "lodash.escaperegexp": "^4.1.2",
-                "lodash.isequal": "^4.5.0",
-                "semver": "~7.7.3",
-                "tiny-typed-emitter": "^2.1.0"
-            }
-        },
-        "node_modules/electron-updater/node_modules/fs-extra": {
-            "version": "10.1.0",
-            "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
-            "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
-            "license": "MIT",
-            "dependencies": {
-                "graceful-fs": "^4.2.0",
-                "jsonfile": "^6.0.1",
-                "universalify": "^2.0.0"
-            },
-            "engines": {
-                "node": ">=12"
-            }
-        },
-        "node_modules/electron-updater/node_modules/jsonfile": {
-            "version": "6.2.0",
-            "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.0.tgz",
-            "integrity": "sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==",
-            "license": "MIT",
-            "dependencies": {
-                "universalify": "^2.0.0"
-            },
-            "optionalDependencies": {
-                "graceful-fs": "^4.1.6"
-            }
-        },
-        "node_modules/electron-updater/node_modules/semver": {
-            "version": "7.7.4",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
-            "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
-            "license": "ISC",
-            "bin": {
-                "semver": "bin/semver.js"
-            },
-            "engines": {
-                "node": ">=10"
-            }
-        },
-        "node_modules/electron-updater/node_modules/universalify": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-            "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-            "license": "MIT",
-            "engines": {
-                "node": ">= 10.0.0"
-            }
-        },
         "node_modules/electron-winstaller": {
             "version": "5.4.0",
             "resolved": "https://registry.npmjs.org/electron-winstaller/-/electron-winstaller-5.4.0.tgz",
@@ -14960,6 +14913,7 @@
             "version": "4.2.11",
             "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
             "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+            "dev": true,
             "license": "ISC"
         },
         "node_modules/gzip-size": {
@@ -16192,6 +16146,7 @@
             "version": "4.1.1",
             "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.1.tgz",
             "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+            "dev": true,
             "license": "MIT",
             "dependencies": {
                 "argparse": "^2.0.1"
@@ -16409,6 +16364,7 @@
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/lazy-val/-/lazy-val-1.0.5.tgz",
             "integrity": "sha512-0/BnGCCfyUMkBpeDgWihanIAF9JmZhHBgUhEqzvf+adhNGLoP6TaiI5oF8oyb3I45P+PcnrqihSf01M0l0G5+Q==",
+            "dev": true,
             "license": "MIT"
         },
         "node_modules/levn": {
@@ -16609,6 +16565,9 @@
             "cpu": [
                 "x64"
             ],
+            "libc": [
+                "glibc"
+            ],
             "license": "MPL-2.0",
             "optional": true,
             "os": [
@@ -16792,6 +16751,9 @@
             "cpu": [
                 "arm64"
             ],
+            "libc": [
+                "glibc"
+            ],
             "license": "MPL-2.0",
             "optional": true,
             "os": [
@@ -16812,6 +16774,9 @@
             "cpu": [
                 "arm64"
             ],
+            "libc": [
+                "musl"
+            ],
             "license": "MPL-2.0",
             "optional": true,
             "os": [
@@ -16832,6 +16797,9 @@
             "cpu": [
                 "x64"
             ],
+            "libc": [
+                "musl"
+            ],
             "license": "MPL-2.0",
             "optional": true,
             "os": [
@@ -17099,19 +17067,6 @@
             "dev": true,
             "license": "MIT"
         },
-        "node_modules/lodash.escaperegexp": {
-            "version": "4.1.2",
-            "resolved": "https://registry.npmjs.org/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz",
-            "integrity": "sha512-TM9YBvyC84ZxE3rgfefxUWiQKLilstD6k7PTGt6wfbtXF8ixIJLOL3VYyV/z+ZiPLsVxAsKAFVwWlWeb2Y8Yyw==",
-            "license": "MIT"
-        },
-        "node_modules/lodash.isequal": {
-            "version": "4.5.0",
-            "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-            "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
-            "deprecated": "This package is deprecated. Use require('node:util').isDeepStrictEqual instead.",
-            "license": "MIT"
-        },
         "node_modules/lodash.merge": {
             "version": "4.6.2",
             "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -21098,6 +21053,7 @@
             "version": "1.4.4",
             "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.4.tgz",
             "integrity": "sha512-1n3r/tGXO6b6VXMdFT54SHzT9ytu9yr7TaELowdYpMqY/Ao7EnlQGmAQ1+RatX7Tkkdm6hONI2owqNx2aZj5Sw==",
+            "dev": true,
             "license": "BlueOak-1.0.0",
             "engines": {
                 "node": ">=11.0.0"
@@ -22517,12 +22473,6 @@
                 "semver": "bin/semver"
             }
         },
-        "node_modules/tiny-typed-emitter": {
-            "version": "2.1.0",
-            "resolved": "https://registry.npmjs.org/tiny-typed-emitter/-/tiny-typed-emitter-2.1.0.tgz",
-            "integrity": "sha512-qVtvMxeXbVej0cQWKqVSSAHmKZEHAvxdF8HEUBFWts8h+xEo5m/lEiPakuyZ3BnCBjOD8i24kzNOiOLLgsSxhA==",
-            "license": "MIT"
-        },
         "node_modules/tinybench": {
             "version": "2.9.0",
             "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "next-ai-draw-io",
-    "version": "0.4.14",
+    "version": "0.4.15",
     "license": "Apache-2.0",
     "private": true,
     "main": "dist-electron/main/index.js",
@@ -70,7 +70,6 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
-        "electron-updater": "^6.8.3",
         "idb": "^8.0.3",
         "jsonrepair": "^3.13.1",
         "lucide-react": "^0.577.0",

packages/mcp-server/package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "@next-ai-drawio/mcp-server",
-    "version": "0.1.17",
+    "version": "0.2.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@next-ai-drawio/mcp-server",
-            "version": "0.1.17",
+            "version": "0.2.0",
             "license": "Apache-2.0",
             "dependencies": {
                 "@modelcontextprotocol/sdk": "^1.0.4",

packages/mcp-server/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@next-ai-drawio/mcp-server",
-    "version": "0.1.17",
+    "version": "0.2.0",
     "description": "MCP server for Next AI Draw.io - AI-powered diagram generation with real-time browser preview",
     "type": "module",
     "main": "dist/index.js",

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

@@ -4,6 +4,29 @@
  */
 
 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,
@@ -155,7 +178,7 @@ export function startHttpServer(port = 6002): Promise<number> {
             }
         })
 
-        server.listen(port, () => {
+        server.listen(port, "127.0.0.1", () => {
             serverPort = port
             log.info(`HTTP server running on http://localhost:${port}`)
             resolve(port)
@@ -266,11 +289,7 @@ function handleStateApi(
             }),
         )
     } else if (req.method === "POST") {
-        let body = ""
+        readBody(req, res, (body) => {
-        req.on("data", (chunk) => {
-            body += chunk
-        })
-        req.on("end", () => {
             try {
                 const data = JSON.parse(body)
                 const { sessionId } = data
@@ -347,11 +366,7 @@ function handleRestoreApi(
         return
     }
 
-    let body = ""
+    readBody(req, res, (body) => {
-    req.on("data", (chunk) => {
-        body += chunk
-    })
-    req.on("end", () => {
         try {
             const { sessionId, index } = JSON.parse(body)
             if (!sessionId || index === undefined) {
@@ -393,11 +408,7 @@ function handleHistorySvgApi(
         return
     }
 
-    let body = ""
+    readBody(req, res, (body) => {
-    req.on("data", (chunk) => {
-        body += chunk
-    })
-    req.on("end", () => {
         try {
             const { sessionId, svg } = JSON.parse(body)
             if (!sessionId || !svg) {

packages/mcp-server/src/index.ts

@@ -155,19 +155,22 @@ server.registerTool(
 server.registerTool(
     "create_new_diagram",
     {
-        description: `Create a NEW diagram from mxGraphModel XML. Use this when creating a diagram from scratch or replacing the current diagram entirely.
+        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.
 
 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
+- Creating a new diagram from scratch (no existing diagram)
-- Replacing the current diagram with a completely different one
+- The user explicitly asks to "start over" or "create a new diagram"
-- Major structural changes that require regenerating the diagram
 
-When to use edit_diagram instead:
+When to use edit_diagram instead (ALWAYS prefer edit_diagram if a diagram already exists):
-- Small modifications to existing diagram
+- ANY modifications to an existing diagram
-- Adding/removing individual elements
+- Adding/removing/moving elements
-- Changing labels, colors, or positions
+- Changing labels, colors, styles, or positions
+- Restructuring or reorganizing existing content
+- Adding new elements to an existing diagram
 
 XML FORMAT - Full mxGraphModel structure:
 <mxGraphModel>

packages/mcp-server/tsconfig.json

@@ -12,7 +12,8 @@
         "declaration": true,
         "declarationMap": true,
         "sourceMap": true,
-        "resolveJsonModule": true
+        "resolveJsonModule": true,
+        "types": ["node"]
     },
     "include": ["src/**/*"],
     "exclude": ["node_modules", "dist"]

scripts/fix-latest-yml.mjs

@@ -1,134 +0,0 @@
-/**
- * Fix latest.yml metadata after Windows code signing.
- *
- * electron-builder generates latest.yml with hashes of unsigned executables.
- * After SignPath signs them, the hashes change. This script reads each
- * latest*.yml in release/, finds the matching signed exe in release-signed/,
- * and rewrites the sha512 and size fields.
- *
- * Usage: node scripts/fix-latest-yml.mjs
- */
-
-import { createHash } from "node:crypto"
-import {
-    createReadStream,
-    existsSync,
-    readdirSync,
-    readFileSync,
-    statSync,
-    writeFileSync,
-} from "node:fs"
-import { join } from "node:path"
-
-const RELEASE_DIR = "release"
-const SIGNED_DIR = "release-signed"
-
-// Verify directories exist
-if (!existsSync(RELEASE_DIR)) {
-    console.error(`Error: ${RELEASE_DIR}/ directory does not exist`)
-    process.exit(1)
-}
-if (!existsSync(SIGNED_DIR)) {
-    console.error(`Error: ${SIGNED_DIR}/ directory does not exist`)
-    process.exit(1)
-}
-
-// Find all latest*.yml files
-const ymlFiles = readdirSync(RELEASE_DIR).filter(
-    (f) => f.startsWith("latest") && f.endsWith(".yml"),
-)
-
-if (ymlFiles.length === 0) {
-    console.log("No latest*.yml files found in release/")
-    process.exit(0)
-}
-
-/**
- * Compute SHA-512 hash of a file using streaming (avoids loading large exe into memory)
- */
-function hashFile(filePath) {
-    return new Promise((resolve, reject) => {
-        const hash = createHash("sha512")
-        const stream = createReadStream(filePath)
-        stream.on("data", (chunk) => hash.update(chunk))
-        stream.on("end", () => resolve(hash.digest("base64")))
-        stream.on("error", reject)
-    })
-}
-
-// Build a map of signed exe filenames to their hash and size
-const signedFiles = new Map()
-for (const f of readdirSync(SIGNED_DIR)) {
-    if (!f.endsWith(".exe")) continue
-    const filePath = join(SIGNED_DIR, f)
-    const sha512 = await hashFile(filePath)
-    const size = statSync(filePath).size
-    signedFiles.set(f, { sha512, size })
-}
-
-if (signedFiles.size === 0) {
-    console.error("No signed .exe files found in release-signed/")
-    process.exit(1)
-}
-
-console.log(
-    `Found ${signedFiles.size} signed exe(s):`,
-    [...signedFiles.keys()].join(", "),
-)
-
-for (const ymlFile of ymlFiles) {
-    const ymlPath = join(RELEASE_DIR, ymlFile)
-    const content = readFileSync(ymlPath, "utf-8")
-    const lines = content.split("\n")
-    const outputLines = []
-
-    // Track the current file entry being processed (by url field)
-    let currentExeName = null
-
-    for (const line of lines) {
-        // Match "  url: SomeFile.exe" inside the files array
-        const urlMatch = line.match(/^\s+url:\s+(.+\.exe)\s*$/)
-        if (urlMatch) {
-            currentExeName = urlMatch[1]
-            outputLines.push(line)
-            continue
-        }
-
-        // Match top-level "path: SomeFile.exe"
-        const pathMatch = line.match(/^path:\s+(.+\.exe)\s*$/)
-        if (pathMatch) {
-            currentExeName = pathMatch[1]
-            outputLines.push(line)
-            continue
-        }
-
-        // Replace sha512 lines
-        const sha512Match = line.match(/^(\s*)sha512:\s+/)
-        if (sha512Match && currentExeName && signedFiles.has(currentExeName)) {
-            const indent = sha512Match[1]
-            outputLines.push(
-                `${indent}sha512: ${signedFiles.get(currentExeName).sha512}`,
-            )
-            continue
-        }
-
-        // Replace size lines
-        const sizeMatch = line.match(/^(\s*)size:\s+\d+/)
-        if (sizeMatch && currentExeName && signedFiles.has(currentExeName)) {
-            const indent = sizeMatch[1]
-            outputLines.push(
-                `${indent}size: ${signedFiles.get(currentExeName).size}`,
-            )
-            // Reset current exe after processing both sha512 and size
-            currentExeName = null
-            continue
-        }
-
-        outputLines.push(line)
-    }
-
-    writeFileSync(ymlPath, outputLines.join("\n"))
-    console.log(`Updated ${ymlFile}`)
-}
-
-console.log("Done!")

tests/e2e/iframe-interaction.spec.ts

@@ -35,8 +35,10 @@ test.describe("Iframe Interaction", () => {
         await expect(
             frame
                 .locator('text="Diagram"')
-                .or(frame.locator('[title*="Diagram"]')),
+                .or(frame.locator('[title*="Diagram"]'))
-        ).toBeVisible({ timeout: 10000 })
+                .filter({ visible: true })
+                .first(),
+        ).toBeVisible({ timeout: 30000 })
     })
 
     test("diagram XML is rendered in iframe after generation", async ({

tests/unit/ai-providers.test.ts

@@ -200,12 +200,21 @@ 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)
@@ -236,6 +245,67 @@ 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> = {}

tsconfig.json

@@ -35,6 +35,7 @@
         "packages",
         "electron",
         "electron-standalone",
-        "dist-electron"
+        "dist-electron",
+        "release"
     ]
 }