fix: address PR review feedback for auto-update

- Register manual check listeners before checkForUpdates() to avoid race - Strip prerelease/build metadata in version comparison - Add res.setEncoding("utf8") for GitHub API response - Stream file hashing in CI script instead of reading into memory - Add directory existence checks in fix-latest-yml.mjs - Define UpdateStatus type locally in preload to avoid tsconfig scope issues - Show error dialog for manual check failures (parse/network errors)
feat: add automatic update functionality for Electron app
2026-09-01 17:10:24 +08:00 · 2026-04-03 17:59:57 +09:00 · 2026-04-03 17:46:27 +09:00
42 changed files with 1060 additions and 405 deletions
--- a/.github/workflows/electron-release.yml
+++ b/.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 https://github.com/jgraph/drawio.git /tmp/drawio
+          git clone --depth 1 --branch v29.3.5 https://github.com/jgraph/drawio.git /tmp/drawio
          mkdir -p public/drawio
          cp -r /tmp/drawio/src/main/webapp/* public/drawio/
          rm -rf public/drawio/WEB-INF
@@ -70,7 +70,7 @@ jobs:
        shell: bash
        run: |
          rm -rf public/drawio
-          git clone --depth 1 https://github.com/jgraph/drawio.git /tmp/drawio
+          git clone --depth 1 --branch v29.3.5 https://github.com/jgraph/drawio.git /tmp/drawio
          mkdir -p public/drawio
          cp -r /tmp/drawio/src/main/webapp/* public/drawio/
          rm -rf public/drawio/WEB-INF
@@ -105,9 +105,14 @@ jobs:
          wait-for-completion: true
          output-artifact-directory: release-signed

-      - name: Upload signed artifacts to release
+      - name: Fix latest.yml with signed exe hashes
+        run: node scripts/fix-latest-yml.mjs
+
+      - name: Upload signed artifacts and update metadata to release
        uses: softprops/action-gh-release@v2
        with:
-          files: release-signed/*.exe
+          files: |
+            release-signed/*.exe
+            release/latest*.yml
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/README.md
+++ b/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](#mcp-server)
+  - [MCP Server (Preview)](#mcp-server-preview)
    - [Claude Code CLI](#claude-code-cli)
  - [Getting Started](#getting-started)
    - [Try it Online](#try-it-online)
@@ -63,24 +63,24 @@ Here are some example prompts and their generated diagrams:
  </tr>
  <tr>
    <td width="50%" valign="top">
-      <strong>RAG Technique Diagram</strong><br />
-      <p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p>
-      <img src="./public/rag_prod.svg" alt="RAG Architecture Diagram" width="480" />
+      <strong>GCP architecture diagram</strong><br />
+      <p><strong>Prompt:</strong> Generate a GCP architecture diagram with **GCP icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
+      <img src="./public/gcp_demo.svg" alt="GCP Architecture Diagram" width="480" />
    </td>
    <td width="50%" valign="top">
-      <strong>Authentication using React and AWS</strong><br />
-      <p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p>
-      <img src="./public/auth.svg" alt="Authentication Architecture Diagram" width="480" />
+      <strong>AWS architecture diagram</strong><br />
+      <p><strong>Prompt:</strong> Generate a AWS architecture diagram with **AWS icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
+      <img src="./public/aws_demo.svg" alt="AWS Architecture Diagram" width="480" />
    </td>
  </tr>
  <tr>
    <td width="50%" valign="top">
-      <strong>Open Innovation</strong><br />
-      <p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p>
-      <img src="./public/inno.svg" alt="Open Innovation Diagram" width="480" />
+      <strong>Azure architecture diagram</strong><br />
+      <p><strong>Prompt:</strong> Generate a Azure architecture diagram with **Azure icons**. In this diagram, users connect to a frontend hosted on an instance.</p>
+      <img src="./public/azure_demo.svg" alt="Azure Architecture Diagram" width="480" />
    </td>
    <td width="50%" valign="top">
-      <strong>Cat sketch</strong><br />
+      <strong>Cat sketch prompt</strong><br />
      <p><strong>Prompt:</strong> Draw a cute cat for me.</p>
      <img src="./public/cat_demo.svg" alt="Cat Drawing" width="240" />
    </td>
@@ -99,7 +99,9 @@ Here are some example prompts and their generated diagrams:
 -   **Cloud Architecture Diagram Support**: Specialized support for generating cloud architecture diagrams (AWS, GCP, Azure)
 -   **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization

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

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

--- a/app/[lang]/about/cn/page.tsx
+++ b/app/[lang]/about/cn/page.tsx
@@ -175,106 +175,92 @@ export default function AboutCN() {
                    </p>

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

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

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

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

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

-                        {/* Diagram Grid */}
+                        {/* Cloud Architecture Grid */}
                        <div className="grid md:grid-cols-2 gap-6">
                            <div className="text-center">
                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    RAG Technique Diagram
+                                    GCP Architecture Diagram
                                </h3>
                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate a RAG
-                                    architecture diagram for{" "}
-                                    <strong>chat application</strong>. Use
-                                    connected diagram for data ingestion
+                                    <strong>Prompt:</strong> Generate a GCP
+                                    architecture diagram with{" "}
+                                    <strong>GCP icons</strong>. Users connect to
+                                    a frontend hosted on an instance.
                                </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    <Image
-                                        src="/rag_prod.svg"
-                                        alt="RAG Architecture Diagram"
-                                        width={480}
-                                        height={360}
-                                        className="max-w-full max-h-full object-contain"
-                                    />
-                                </div>
+                                <Image
+                                    src="/gcp_demo.svg"
+                                    alt="GCP Architecture Diagram"
+                                    width={400}
+                                    height={300}
+                                    className="mx-auto"
+                                />
                            </div>
                            <div className="text-center">
                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    Authentication using React and AWS
+                                    AWS Architecture Diagram
                                </h3>
                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate
-                                    authentication process using React with{" "}
-                                    <strong>AWS</strong>. Use Serverless
-                                    architecture.
+                                    <strong>Prompt:</strong> Generate an AWS
+                                    architecture diagram with{" "}
+                                    <strong>AWS icons</strong>. Users connect to
+                                    a frontend hosted on an instance.
                                </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    <Image
-                                        src="/auth.svg"
-                                        alt="Authentication Architecture Diagram"
-                                        width={480}
-                                        height={360}
-                                        className="max-w-full max-h-full object-contain"
-                                    />
-                                </div>
+                                <Image
+                                    src="/aws_demo.svg"
+                                    alt="AWS Architecture Diagram"
+                                    width={400}
+                                    height={300}
+                                    className="mx-auto"
+                                />
                            </div>
                            <div className="text-center">
                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    Agile Scrum Process
+                                    Azure Architecture Diagram
                                </h3>
                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Generate agile
-                                    scrum workflow diagram for software
-                                    development team.
+                                    <strong>Prompt:</strong> Generate an Azure
+                                    architecture diagram with{" "}
+                                    <strong>Azure icons</strong>. Users connect
+                                    to a frontend hosted on an instance.
                                </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    <Image
-                                        src="/agile_scrum.svg"
-                                        alt="Agile Scrum Diagram"
-                                        width={480}
-                                        height={360}
-                                        className="max-w-full max-h-full object-contain"
-                                    />
-                                </div>
+                                <Image
+                                    src="/azure_demo.svg"
+                                    alt="Azure Architecture Diagram"
+                                    width={400}
+                                    height={300}
+                                    className="mx-auto"
+                                />
                            </div>
                            <div className="text-center">
                                <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                                    Open Innovation
+                                    Cat Sketch
                                </h3>
                                <p className="text-gray-600 text-sm mb-4">
-                                    <strong>Prompt:</strong> Create
-                                    visualization of Henry Chesbrough&apos;s
-                                    Open Innovation model.
+                                    <strong>Prompt:</strong> Draw a cute cat for
+                                    me.
                                </p>
-                                <div className="bg-neutral-950 rounded-lg p-4 flex items-center justify-center w-full h-[400px]">
-                                    <Image
-                                        src="/inno.svg"
-                                        alt="Open Innovation Diagram"
-                                        width={480}
-                                        height={360}
-                                        className="max-w-full max-h-full object-contain"
-                                    />
-                                </div>
+                                <Image
+                                    src="/cat_demo.svg"
+                                    alt="Cat Drawing"
+                                    width={240}
+                                    height={240}
+                                    className="mx-auto"
+                                />
                            </div>
                        </div>
                    </div>
--- a/app/[lang]/page.tsx
+++ b/app/[lang]/page.tsx
@@ -100,8 +100,12 @@ export default function Home() {
    const handleDrawioAutoSave = useCallback(
        (data: { xml?: string }) => {
            handleDiagramAutoSave(data)
+            // Only suppress modified state when persistence is available
+            if (canPersist) {
+                drawioRef.current?.status({ message: "", modified: false })
+            }
        },
-        [handleDiagramAutoSave],
+        [canPersist, drawioRef, handleDiagramAutoSave],
    )

    const handleDarkModeChange = () => {
--- a/components/chat-example-panel.tsx
+++ b/components/chat-example-panel.tsx
@@ -141,6 +141,9 @@ export default function ExamplePanel({
                                    <span className="text-sm font-medium text-foreground group-hover:text-purple-500 transition-colors">
                                        {dict.examples.mcpServer}
                                    </span>
+                                    <span className="px-1.5 py-0.5 text-[10px] font-semibold bg-purple-500 text-white rounded">
+                                        {dict.examples.preview}
+                                    </span>
                                </div>
                                <p className="text-xs text-muted-foreground">
                                    {dict.examples.mcpDescription}
--- a/components/chat-message-display.tsx
+++ b/components/chat-message-display.tsx
@@ -417,7 +417,6 @@ export function ChatMessageDisplay({

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

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

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

--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -25,6 +25,7 @@ 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"
@@ -1253,10 +1254,22 @@ 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"
--- a/components/chat/ChatLobby.tsx
+++ b/components/chat/ChatLobby.tsx
@@ -107,8 +107,8 @@ export function ChatLobby({
    currentInput = "",
    dict,
 }: ChatLobbyProps) {
-    const [templatesExpanded, setTemplatesExpanded] = useState(true)
-    const [examplesExpanded, setExamplesExpanded] = useState(true)
+    const [templatesExpanded, setTemplatesExpanded] = useState(false)
+    const [examplesExpanded, setExamplesExpanded] = useState(false)
    const [panelVisibility, setPanelVisibility] = useState(getPanelVisibility)
    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
    const [sessionToDelete, setSessionToDelete] = useState<string | null>(null)
@@ -125,25 +125,19 @@ export function ChatLobby({
    const hasHistory = sessions.length > 0

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

    // Show history + collapsible examples when there are sessions
--- a/components/chat/ToolCallCard.tsx
+++ b/components/chat/ToolCallCard.tsx
@@ -195,22 +195,7 @@ export function ToolCallCard({
            {input && isExpanded && (
                <div className="px-4 py-3 border-t border-border/40 bg-muted/20">
                    {typeof input === "object" && input.xml ? (
-                        state === "input-streaming" ||
-                        state === "input-available" ? (
-                            <pre
-                                className="text-[11px] leading-relaxed overflow-x-auto overflow-y-auto max-h-48 scrollbar-thin break-all whitespace-pre-wrap"
-                                style={{
-                                    fontFamily:
-                                        "var(--font-mono), ui-monospace, monospace",
-                                    margin: 0,
-                                    padding: 0,
-                                }}
-                            >
-                                {input.xml}
-                            </pre>
-                        ) : (
-                            <CodeBlock code={input.xml} language="xml" />
-                        )
+                        <CodeBlock code={input.xml} language="xml" />
                    ) : typeof input === "object" &&
                      input.operations &&
                      Array.isArray(input.operations) ? (
--- a/components/update-toast.tsx
+++ b/components/update-toast.tsx
@@ -0,0 +1,124 @@
+"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>
+    )
+}
--- a/docs/cn/README_CN.md
+++ b/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>Prompt:</strong> Give me a **animated connector** diagram of transformer's architecture.</p>
+      <p><strong>提示词：</strong> 给我一个带有**动画连接器**的Transformer架构图。</p>
      <img src="../../public/animated_connectors.svg" alt="带动画连接器的Transformer架构" width="480" />
    </td>
  </tr>
  <tr>
    <td width="50%" valign="top">
-      <strong>RAG技术图</strong><br />
-      <p><strong>Prompt:</strong> Generate a RAG architecture diagram for **chat application**. Use connected diagram for data ingestion</p>
-      <img src="../../public/rag_prod.svg" alt="RAG架构图" width="480" />
+      <strong>GCP架构图</strong><br />
+      <p><strong>提示词：</strong> 使用**GCP图标**生成一个GCP架构图。在这个图中，用户连接到托管在实例上的前端。</p>
+      <img src="../../public/gcp_demo.svg" alt="GCP架构图" width="480" />
    </td>
    <td width="50%" valign="top">
-      <strong>React和AWS认证流程</strong><br />
-      <p><strong>Prompt:</strong> Generate authentication process using React with **AWS**. Use Serverless architecture.</p>
-      <img src="../../public/auth.svg" alt="认证架构图" width="480" />
+      <strong>AWS架构图</strong><br />
+      <p><strong>提示词：</strong> 使用**AWS图标**生成一个AWS架构图。在这个图中，用户连接到托管在实例上的前端。</p>
+      <img src="../../public/aws_demo.svg" alt="AWS架构图" width="480" />
    </td>
  </tr>
  <tr>
    <td width="50%" valign="top">
-      <strong>开放式创新</strong><br />
-      <p><strong>Prompt:</strong> Create visualization of Henry Chesbrough's Open Innovation model.</p>
-      <img src="../../public/inno.svg" alt="开放式创新图" width="480" />
+      <strong>Azure架构图</strong><br />
+      <p><strong>提示词：</strong> 使用**Azure图标**生成一个Azure架构图。在这个图中，用户连接到托管在实例上的前端。</p>
+      <img src="../../public/azure_demo.svg" alt="Azure架构图" width="480" />
    </td>
    <td width="50%" valign="top">
      <strong>猫咪素描</strong><br />
-      <p><strong>Prompt:</strong> Draw a cute cat for me.</p>
+      <p><strong>提示词：</strong> 给我画一只可爱的猫。</p>
      <img src="../../public/cat_demo.svg" alt="猫咪绘图" width="240" />
    </td>
  </tr>
@@ -98,7 +98,9 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 -   **云架构图支持**：专门支持生成云架构图（AWS、GCP、Azure）
 -   **动画连接器**：在图表元素之间创建动态动画连接器，实现更好的可视化效果

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

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

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

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

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

--- a/electron/electron-builder.yml
+++ b/electron/electron-builder.yml
@@ -95,10 +95,6 @@ linux:
      arch:
        - x64
        - arm64
-    - target: rpm
-      arch:
-        - x64
-        - arm64

 # Publish configuration (optional)
 publish:
--- a/electron/electron.d.ts
+++ b/electron/electron.d.ts
@@ -2,6 +2,14 @@
 * 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
@@ -74,6 +82,12 @@ 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 */
--- a/electron/main/app-menu.ts
+++ b/electron/main/app-menu.ts
@@ -6,6 +6,7 @@ import {
    type MenuItemConstructorOptions,
    shell,
 } from "electron"
+import { checkForUpdatesManual } from "./auto-updater"
 import {
    applyPresetToEnv,
    getAllPresets,
@@ -156,6 +157,11 @@ function getMenuTemplate(): MenuItemConstructorOptions[] {
    template.push({
        label: t.help,
        submenu: [
+            {
+                label: t.checkForUpdates,
+                click: () => checkForUpdatesManual(),
+            },
+            { type: "separator" },
            {
                label: t.documentation,
                click: async () => {
--- a/electron/main/auto-updater.ts
+++ b/electron/main/auto-updater.ts
@@ -0,0 +1,282 @@
+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)
+}
--- a/electron/main/index.ts
+++ b/electron/main/index.ts
@@ -1,5 +1,6 @@
 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"
@@ -58,6 +59,11 @@ 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(
--- a/electron/main/menu-i18n.ts
+++ b/electron/main/menu-i18n.ts
@@ -33,6 +33,7 @@ export interface MenuTranslations {
    help: string
    documentation: string
    reportIssue: string
+    checkForUpdates: string
 }

 const translations: Record<MenuLocale, MenuTranslations> = {
@@ -62,6 +63,7 @@ const translations: Record<MenuLocale, MenuTranslations> = {
        help: "Help",
        documentation: "Documentation",
        reportIssue: "Report Issue",
+        checkForUpdates: "Check for Updates...",
    },

    zh: {
@@ -90,6 +92,7 @@ const translations: Record<MenuLocale, MenuTranslations> = {
        help: "帮助",
        documentation: "文档",
        reportIssue: "报告问题",
+        checkForUpdates: "检查更新...",
    },

    ja: {
@@ -118,6 +121,7 @@ const translations: Record<MenuLocale, MenuTranslations> = {
        help: "ヘルプ",
        documentation: "ドキュメント",
        reportIssue: "問題を報告",
+        checkForUpdates: "アップデートを確認...",
    },

    "zh-Hant": {
@@ -146,6 +150,7 @@ const translations: Record<MenuLocale, MenuTranslations> = {
        help: "說明",
        documentation: "文件",
        reportIssue: "回報問題",
+        checkForUpdates: "檢查更新...",
    },
 }

--- a/electron/preload/index.ts
+++ b/electron/preload/index.ts
@@ -1,4 +1,12 @@
-import { contextBridge, ipcRenderer } from "electron"
+import { contextBridge, type IpcRendererEvent, 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
@@ -31,4 +39,13 @@ 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"),
 })
--- a/hooks/use-auto-update.ts
+++ b/hooks/use-auto-update.ts
@@ -0,0 +1,86 @@
+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
+    }, [])
+}
--- a/lib/ai-providers.ts
+++ b/lib/ai-providers.ts
@@ -1356,13 +1356,12 @@ export function supportsImageInput(modelId: string): boolean {
    }

    // Qwen text models (not vision variants like qwen-vl)
-    // Qwen3.5 series (qwen3.5, qwen3.5-plus, qwen3.5-flash) natively support image input
-    // QvQ (Qwen Visual QA) models are vision models — exclude them even when prefixed with "qwen/"
+    // qwen3.5-plus is a vision model
    if (
        lowerModelId.includes("qwen") &&
        !hasVisionIndicator &&
-        !lowerModelId.includes("qwen3.5") &&
-        !lowerModelId.includes("qvq")
+        !lowerModelId.includes("qwen3.5-plus") &&
+        !lowerModelId.includes("qwen3.5-flash")
    ) {
        return false
    }
--- a/lib/i18n/dictionaries/en.json
+++ b/lib/i18n/dictionaries/en.json
@@ -76,7 +76,8 @@
        "creativeDescription": "Draw something fun and creative",
        "cachedNote": "Examples are cached for instant response",
        "mcpServer": "MCP Server",
-        "mcpDescription": "Use in Claude Desktop, VS Code & Cursor"
+        "mcpDescription": "Use in Claude Desktop, VS Code & Cursor",
+        "preview": "PREVIEW"
    },
    "settings": {
        "title": "Settings",
--- a/lib/i18n/dictionaries/ja.json
+++ b/lib/i18n/dictionaries/ja.json
@@ -76,7 +76,8 @@
        "creativeDescription": "楽しくてクリエイティブなものを描く",
        "cachedNote": "例はキャッシュされ、即座に応答します",
        "mcpServer": "MCP サーバー",
-        "mcpDescription": "Claude Desktop、VS Code、Cursor で使用"
+        "mcpDescription": "Claude Desktop、VS Code、Cursor で使用",
+        "preview": "プレビュー"
    },
    "settings": {
        "title": "設定",
--- a/lib/i18n/dictionaries/zh-Hant.json
+++ b/lib/i18n/dictionaries/zh-Hant.json
@@ -76,7 +76,8 @@
        "creativeDescription": "繪製有趣且富有創意的內容",
        "cachedNote": "範例已快取，可即時回應",
        "mcpServer": "MCP 伺服器",
-        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用"
+        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用",
+        "preview": "預覽"
    },
    "settings": {
        "title": "設定",
--- a/lib/i18n/dictionaries/zh.json
+++ b/lib/i18n/dictionaries/zh.json
@@ -76,7 +76,8 @@
        "creativeDescription": "绘制有趣且富有创意的内容",
        "cachedNote": "示例已缓存，可即时响应",
        "mcpServer": "MCP 服务器",
-        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用"
+        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用",
+        "preview": "预览"
    },
    "settings": {
        "title": "设置",
--- a/package-lock.json
+++ b/package-lock.json
@@ -48,10 +48,9 @@
                "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",
-                "lightningcss": "^1.32.0",
-                "lightningcss-linux-x64-gnu": "^1.32.0",
                "lucide-react": "^0.577.0",
                "motion": "^12.23.25",
                "nanoid": "^5.0.0",
@@ -2226,9 +2225,6 @@
                "arm64"
            ],
            "dev": true,
-            "libc": [
-                "glibc"
-            ],
            "license": "MIT OR Apache-2.0",
            "optional": true,
            "os": [
@@ -2246,9 +2242,6 @@
                "arm64"
            ],
            "dev": true,
-            "libc": [
-                "musl"
-            ],
            "license": "MIT OR Apache-2.0",
            "optional": true,
            "os": [
@@ -2266,9 +2259,6 @@
                "x64"
            ],
            "dev": true,
-            "libc": [
-                "glibc"
-            ],
            "license": "MIT OR Apache-2.0",
            "optional": true,
            "os": [
@@ -2286,9 +2276,6 @@
                "x64"
            ],
            "dev": true,
-            "libc": [
-                "musl"
-            ],
            "license": "MIT OR Apache-2.0",
            "optional": true,
            "os": [
@@ -8259,9 +8246,6 @@
                "x64"
            ],
            "dev": true,
-            "libc": [
-                "glibc"
-            ],
            "license": "MPL-2.0",
            "optional": true,
            "os": [
@@ -10062,7 +10046,6 @@
            "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": {
@@ -10698,7 +10681,6 @@
            "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",
@@ -12797,6 +12779,69 @@
            "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",
@@ -14915,7 +14960,6 @@
            "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": {
@@ -16148,7 +16192,6 @@
            "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"
@@ -16366,7 +16409,6 @@
            "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": {
@@ -16567,9 +16609,6 @@
            "cpu": [
                "x64"
            ],
-            "libc": [
-                "glibc"
-            ],
            "license": "MPL-2.0",
            "optional": true,
            "os": [
@@ -16753,9 +16792,6 @@
            "cpu": [
                "arm64"
            ],
-            "libc": [
-                "glibc"
-            ],
            "license": "MPL-2.0",
            "optional": true,
            "os": [
@@ -16776,9 +16812,6 @@
            "cpu": [
                "arm64"
            ],
-            "libc": [
-                "musl"
-            ],
            "license": "MPL-2.0",
            "optional": true,
            "os": [
@@ -16799,9 +16832,6 @@
            "cpu": [
                "x64"
            ],
-            "libc": [
-                "musl"
-            ],
            "license": "MPL-2.0",
            "optional": true,
            "os": [
@@ -17069,6 +17099,19 @@
            "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",
@@ -21055,7 +21098,6 @@
            "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"
@@ -22475,6 +22517,12 @@
                "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",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "next-ai-draw-io",
-    "version": "0.4.15",
+    "version": "0.4.14",
    "license": "Apache-2.0",
    "private": true,
    "main": "dist-electron/main/index.js",
@@ -70,6 +70,7 @@
        "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",
--- a/packages/mcp-server/package-lock.json
+++ b/packages/mcp-server/package-lock.json
@@ -1,12 +1,12 @@
 {
    "name": "@next-ai-drawio/mcp-server",
-    "version": "0.2.0",
+    "version": "0.1.17",
    "lockfileVersion": 3,
    "requires": true,
    "packages": {
        "": {
            "name": "@next-ai-drawio/mcp-server",
-            "version": "0.2.0",
+            "version": "0.1.17",
            "license": "Apache-2.0",
            "dependencies": {
                "@modelcontextprotocol/sdk": "^1.0.4",
--- a/packages/mcp-server/package.json
+++ b/packages/mcp-server/package.json
@@ -1,6 +1,6 @@
 {
    "name": "@next-ai-drawio/mcp-server",
-    "version": "0.2.0",
+    "version": "0.1.17",
    "description": "MCP server for Next AI Draw.io - AI-powered diagram generation with real-time browser preview",
    "type": "module",
    "main": "dist/index.js",
--- a/packages/mcp-server/src/http-server.ts
+++ b/packages/mcp-server/src/http-server.ts
@@ -4,29 +4,6 @@
 */

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

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

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

-    readBody(req, res, (body) => {
+    let body = ""
+    req.on("data", (chunk) => {
+        body += chunk
+    })
+    req.on("end", () => {
        try {
            const { sessionId, svg } = JSON.parse(body)
            if (!sessionId || !svg) {
--- a/packages/mcp-server/src/index.ts
+++ b/packages/mcp-server/src/index.ts
@@ -155,22 +155,19 @@ server.registerTool(
 server.registerTool(
    "create_new_diagram",
    {
-        description: `Create a NEW diagram from mxGraphModel XML. ONLY use this when creating a diagram from scratch.
-
-⚠️ DO NOT use this tool to modify an existing diagram — it will DESTROY all existing content and user changes. Use edit_diagram instead for ANY modifications to an existing diagram.
+        description: `Create a NEW diagram from mxGraphModel XML. Use this when creating a diagram from scratch or replacing the current diagram entirely.

 CRITICAL: You MUST provide the 'xml' argument in EVERY call. Do NOT call this tool without xml.

 When to use this tool:
- Creating a new diagram from scratch (no existing diagram)
- The user explicitly asks to "start over" or "create a new diagram"
+- Creating a new diagram from scratch
+- Replacing the current diagram with a completely different one
+- Major structural changes that require regenerating the diagram

-When to use edit_diagram instead (ALWAYS prefer edit_diagram if a diagram already exists):
- ANY modifications to an existing diagram
- Adding/removing/moving elements
- Changing labels, colors, styles, or positions
- Restructuring or reorganizing existing content
- Adding new elements to an existing diagram
+When to use edit_diagram instead:
+- Small modifications to existing diagram
+- Adding/removing individual elements
+- Changing labels, colors, or positions

 XML FORMAT - Full mxGraphModel structure:
 <mxGraphModel>
--- a/packages/mcp-server/tsconfig.json
+++ b/packages/mcp-server/tsconfig.json
@@ -12,8 +12,7 @@
        "declaration": true,
        "declarationMap": true,
        "sourceMap": true,
-        "resolveJsonModule": true,
-        "types": ["node"]
+        "resolveJsonModule": true
    },
    "include": ["src/**/*"],
    "exclude": ["node_modules", "dist"]
--- a/public/agile_scrum.svg
+++ b/public/agile_scrum.svg
--- a/public/auth.svg
+++ b/public/auth.svg
--- a/public/inno.svg
+++ b/public/inno.svg
--- a/public/rag_prod.svg
+++ b/public/rag_prod.svg
--- a/public/resnet50.svg
+++ b/public/resnet50.svg
--- a/scripts/fix-latest-yml.mjs
+++ b/scripts/fix-latest-yml.mjs
@@ -0,0 +1,134 @@
+/**
+ * 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!")
--- a/tests/unit/ai-providers.test.ts
+++ b/tests/unit/ai-providers.test.ts
@@ -200,21 +200,12 @@ describe("supportsImageInput", () => {

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

-    it("returns true for QvQ (Qwen Visual QA) models including OpenRouter-prefixed names", () => {
-        expect(supportsImageInput("qvq-72b-preview")).toBe(true)
-        expect(supportsImageInput("qvq-max")).toBe(true)
-        expect(supportsImageInput("qwen/qvq-72b-preview")).toBe(true)
-        expect(supportsImageInput("qwen/qvq-max")).toBe(true)
-    })
-
    it("returns false for GLM text models", () => {
        expect(supportsImageInput("glm-4")).toBe(false)
        expect(supportsImageInput("glm-4-plus")).toBe(false)
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -35,7 +35,6 @@
        "packages",
        "electron",
        "electron-standalone",
-        "dist-electron",
-        "release"
+        "dist-electron"
    ]
 }