fix: add trailing edge to scroll throttle

Ensures the chat scrolls to the bottom after streaming ends, even if
the last messages update arrives during the 150ms throttle window.

.github/workflows/electron-release.yml

@@ -37,7 +37,7 @@ jobs:
       - name: Download draw.io static files for offline use
         run: |
           rm -rf public/drawio
-          git clone --depth 1 --branch v29.3.5 https://github.com/jgraph/drawio.git /tmp/drawio
+          git clone --depth 1 https://github.com/jgraph/drawio.git /tmp/drawio
           mkdir -p public/drawio
           cp -r /tmp/drawio/src/main/webapp/* public/drawio/
           rm -rf public/drawio/WEB-INF
@@ -70,7 +70,7 @@ jobs:
         shell: bash
         run: |
           rm -rf public/drawio
-          git clone --depth 1 --branch v29.3.5 https://github.com/jgraph/drawio.git /tmp/drawio
+          git clone --depth 1 https://github.com/jgraph/drawio.git /tmp/drawio
           mkdir -p public/drawio
           cp -r /tmp/drawio/src/main/webapp/* public/drawio/
           rm -rf public/drawio/WEB-INF

README.md

@@ -31,7 +31,7 @@ https://github.com/user-attachments/assets/9d60a3e8-4a1c-4b5e-acbb-26af2d3eabd1
   - [Table of Contents](#table-of-contents)
   - [Examples](#examples)
   - [Features](#features)
-  - [MCP Server (Preview)](#mcp-server-preview)
+  - [MCP Server](#mcp-server)
     - [Claude Code CLI](#claude-code-cli)
   - [Getting Started](#getting-started)
     - [Try it Online](#try-it-online)
@@ -99,9 +99,7 @@ Here are some example prompts and their generated diagrams:
 -   **Cloud Architecture Diagram Support**: Specialized support for generating cloud architecture diagrams (AWS, GCP, Azure)
 -   **Animated Connectors**: Create dynamic and animated connectors between diagram elements for better visualization
 
-## MCP Server (Preview)
-
-> **Preview Feature**: This feature is experimental and may not be stable.
+## MCP Server
 
 Use Next AI Draw.io with AI agents like Claude Desktop, Cursor, and VS Code via MCP (Model Context Protocol).
 

app/[lang]/page.tsx

@@ -100,12 +100,8 @@ 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 })
-            }
         },
-        [canPersist, drawioRef, handleDiagramAutoSave],
+        [handleDiagramAutoSave],
     )
 
     const handleDarkModeChange = () => {

components/chat-example-panel.tsx

@@ -141,9 +141,6 @@ export default function ExamplePanel({
                                     <span className="text-sm font-medium text-foreground group-hover:text-purple-500 transition-colors">
                                         {dict.examples.mcpServer}
                                     </span>
-                                    <span className="px-1.5 py-0.5 text-[10px] font-semibold bg-purple-500 text-white rounded">
-                                        {dict.examples.preview}
-                                    </span>
                                 </div>
                                 <p className="text-xs text-muted-foreground">
                                     {dict.examples.mcpDescription}

components/chat-message-display.tsx

@@ -417,6 +417,7 @@ export function ChatMessageDisplay({
 
     // Track previous message count to detect bulk loads vs streaming
     const prevMessageCountRef = useRef(0)
+    const scrollThrottleRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
     useEffect(() => {
         if (messagesEndRef.current && messages.length > 0) {
@@ -430,8 +431,17 @@ export function ChatMessageDisplay({
                 return
             }
 
-            // Single message added - smooth scroll
-            messagesEndRef.current.scrollIntoView({ behavior: "smooth" })
+            // 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)
+            }
         }
     }, [messages])
 

components/chat/ToolCallCard.tsx

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

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)
   - [快速开始](#快速开始)
     - [在线试用](#在线试用)
@@ -98,9 +98,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 -   **云架构图支持**：专门支持生成云架构图（AWS、GCP、Azure）
 -   **动画连接器**：在图表元素之间创建动态动画连接器，实现更好的可视化效果
 
-## MCP服务器（预览）
-
-> **预览功能**：此功能为实验性功能，可能不稳定。
+## MCP服务器
 
 通过MCP（模型上下文协议）在Claude Desktop、Cursor和VS Code等AI代理中使用Next AI Draw.io。
 

docs/ja/README_JA.md

@@ -28,7 +28,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
   - [目次](#目次)
   - [例](#例)
   - [機能](#機能)
-  - [MCPサーバー（プレビュー）](#mcpサーバープレビュー)
+  - [MCPサーバー](#mcpサーバー)
     - [Claude Code CLI](#claude-code-cli)
   - [はじめに](#はじめに)
     - [オンラインで試す](#オンラインで試す)
@@ -96,9 +96,7 @@ https://github.com/user-attachments/assets/b2eef5f3-b335-4e71-a755-dc2e80931979
 -   **クラウドアーキテクチャダイアグラムサポート**：クラウドアーキテクチャダイアグラムの生成を専門的にサポート（AWS、GCP、Azure）
 -   **アニメーションコネクタ**：より良い可視化のためにダイアグラム要素間に動的でアニメーション化されたコネクタを作成
 
-## MCPサーバー（プレビュー）
-
-> **プレビュー機能**：この機能は実験的であり、安定しない可能性があります。
+## MCPサーバー
 
 MCP（Model Context Protocol）を介して、Claude Desktop、Cursor、VS CodeなどのAIエージェントでNext AI Draw.ioを使用できます。
 

lib/ai-providers.ts

@@ -1356,12 +1356,11 @@ export function supportsImageInput(modelId: string): boolean {
     }
 
     // Qwen text models (not vision variants like qwen-vl)
-    // qwen3.5-plus is a vision model
+    // Qwen3.5 series (qwen3.5, qwen3.5-plus, qwen3.5-flash) natively support image input
     if (
         lowerModelId.includes("qwen") &&
         !hasVisionIndicator &&
-        !lowerModelId.includes("qwen3.5-plus") &&
-        !lowerModelId.includes("qwen3.5-flash")
+        !lowerModelId.includes("qwen3.5")
     ) {
         return false
     }

lib/i18n/dictionaries/en.json

@@ -76,8 +76,7 @@
         "creativeDescription": "Draw something fun and creative",
         "cachedNote": "Examples are cached for instant response",
         "mcpServer": "MCP Server",
-        "mcpDescription": "Use in Claude Desktop, VS Code & Cursor",
-        "preview": "PREVIEW"
+        "mcpDescription": "Use in Claude Desktop, VS Code & Cursor"
     },
     "settings": {
         "title": "Settings",

lib/i18n/dictionaries/ja.json

@@ -76,8 +76,7 @@
         "creativeDescription": "楽しくてクリエイティブなものを描く",
         "cachedNote": "例はキャッシュされ、即座に応答します",
         "mcpServer": "MCP サーバー",
-        "mcpDescription": "Claude Desktop、VS Code、Cursor で使用",
-        "preview": "プレビュー"
+        "mcpDescription": "Claude Desktop、VS Code、Cursor で使用"
     },
     "settings": {
         "title": "設定",

lib/i18n/dictionaries/zh-Hant.json

@@ -76,8 +76,7 @@
         "creativeDescription": "繪製有趣且富有創意的內容",
         "cachedNote": "範例已快取，可即時回應",
         "mcpServer": "MCP 伺服器",
-        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用",
-        "preview": "預覽"
+        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用"
     },
     "settings": {
         "title": "設定",

lib/i18n/dictionaries/zh.json

@@ -76,8 +76,7 @@
         "creativeDescription": "绘制有趣且富有创意的内容",
         "cachedNote": "示例已缓存，可即时响应",
         "mcpServer": "MCP 服务器",
-        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用",
-        "preview": "预览"
+        "mcpDescription": "在 Claude Desktop、VS Code 和 Cursor 中使用"
     },
     "settings": {
         "title": "设置",

packages/mcp-server/package.json

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

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

@@ -4,6 +4,29 @@
  */
 
 import http from "node:http"
+
+const MAX_BODY_BYTES = 10 * 1024 * 1024 // 10 MiB
+
+function readBody(
+    req: http.IncomingMessage,
+    res: http.ServerResponse,
+    cb: (body: string) => void,
+): void {
+    let body = ""
+    let size = 0
+    req.on("data", (chunk: Buffer) => {
+        size += chunk.length
+        if (size > MAX_BODY_BYTES) {
+            res.writeHead(413, { "Content-Type": "application/json" })
+            res.end(JSON.stringify({ error: "Payload too large" }))
+            req.destroy()
+            return
+        }
+        body += chunk
+    })
+    req.on("end", () => cb(body))
+}
+
 import {
     addHistory,
     clearHistory,
@@ -266,11 +289,7 @@ function handleStateApi(
             }),
         )
     } else if (req.method === "POST") {
-        let body = ""
-        req.on("data", (chunk) => {
-            body += chunk
-        })
-        req.on("end", () => {
+        readBody(req, res, (body) => {
             try {
                 const data = JSON.parse(body)
                 const { sessionId } = data
@@ -347,11 +366,7 @@ function handleRestoreApi(
         return
     }
 
-    let body = ""
-    req.on("data", (chunk) => {
-        body += chunk
-    })
-    req.on("end", () => {
+    readBody(req, res, (body) => {
         try {
             const { sessionId, index } = JSON.parse(body)
             if (!sessionId || index === undefined) {
@@ -393,11 +408,7 @@ function handleHistorySvgApi(
         return
     }
 
-    let body = ""
-    req.on("data", (chunk) => {
-        body += chunk
-    })
-    req.on("end", () => {
+    readBody(req, res, (body) => {
         try {
             const { sessionId, svg } = JSON.parse(body)
             if (!sessionId || !svg) {

tests/unit/ai-providers.test.ts

@@ -200,6 +200,8 @@ 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)