fix(docker): fix invalid YAML syntax in docker-compose.yml (#498)

Empty environment mapping caused validation error:
'services.next-ai-draw-io.environment must be a mapping'

.github/workflows/electron-release.yml

@@ -38,7 +38,7 @@ jobs:
           cache: "npm"
 
       - name: Install dependencies
-        run: npm ci
+        run: npm install
 
       - name: Build and publish Electron app
         run: npm run dist:${{ matrix.platform }}

components/chat-panel.tsx

@@ -10,7 +10,13 @@ import {
 } from "lucide-react"
 import Image from "next/image"
 import type React from "react"
-import { useCallback, useEffect, useRef, useState } from "react"
+import {
+    useCallback,
+    useEffect,
+    useLayoutEffect,
+    useRef,
+    useState,
+} from "react"
 import { flushSync } from "react-dom"
 import { Toaster, toast } from "sonner"
 import { ButtonWithTooltip } from "@/components/button-with-tooltip"
@@ -28,7 +34,7 @@ import { formatMessage } from "@/lib/i18n/utils"
 import { isPdfFile, isTextFile } from "@/lib/pdf-utils"
 import { type FileData, useFileProcessor } from "@/lib/use-file-processor"
 import { useQuotaManager } from "@/lib/use-quota-manager"
-import { formatXML } from "@/lib/utils"
+import { cn, formatXML } from "@/lib/utils"
 import { ChatMessageDisplay } from "./chat-message-display"
 import { DevXmlSimulator } from "./dev-xml-simulator"
 
@@ -203,6 +209,17 @@ export default function ChatPanel({
     const hasRestoredRef = useRef(false)
     const [isRestored, setIsRestored] = useState(false)
 
+    // Track previous isVisible to only animate when toggling (not on page load)
+    const prevIsVisibleRef = useRef(isVisible)
+    const [shouldAnimatePanel, setShouldAnimatePanel] = useState(false)
+    useEffect(() => {
+        // Only animate when visibility changes from false to true (not on initial load)
+        if (!prevIsVisibleRef.current && isVisible) {
+            setShouldAnimatePanel(true)
+        }
+        prevIsVisibleRef.current = isVisible
+    }, [isVisible])
+
     // Ref to track latest chartXML for use in callbacks (avoids stale closure)
     const chartXMLRef = useRef(chartXML)
     useEffect(() => {
@@ -430,7 +447,8 @@ export default function ChatPanel({
     const messagesEndRef = useRef<HTMLDivElement>(null)
 
     // Restore messages and XML snapshots from localStorage on mount
-    useEffect(() => {
+    // useLayoutEffect runs synchronously before browser paint, so messages appear immediately
+    useLayoutEffect(() => {
         if (hasRestoredRef.current) return
         hasRestoredRef.current = true
 
@@ -461,7 +479,7 @@ export default function ChatPanel({
         } finally {
             setIsRestored(true)
         }
-    }, [setMessages])
+    }, [setMessages, dict.errors.sessionCorrupted])
 
     // Save messages to localStorage whenever they change (debounced to prevent blocking during streaming)
     useEffect(() => {
@@ -918,12 +936,16 @@ export default function ChatPanel({
 
     // Full view
     return (
-        <div className="h-full flex flex-col bg-card shadow-soft animate-slide-in-right rounded-xl border border-border/30 relative">
+        <div
+            className={cn(
+                "h-full flex flex-col bg-card shadow-soft rounded-xl border border-border/30 relative",
+                shouldAnimatePanel && "animate-slide-in-right",
+            )}
+        >
             <Toaster
-                position="bottom-center"
+                position="bottom-left"
                 richColors
                 expand
-                style={{ position: "absolute" }}
                 toastOptions={{
                     style: {
                         maxWidth: "480px",

docker-compose.yml

@@ -11,7 +11,7 @@ services:
         # - NEXT_PUBLIC_BASE_PATH=/nextaidrawio
     ports: ["3000:3000"]
     env_file: .env
-    environment:
+    # environment:
-      # For subdirectory deployment, uncomment and set your path:
+    #   # For subdirectory deployment, uncomment and set your path:
-      # NEXT_PUBLIC_BASE_PATH: /nextaidrawio
+    #   NEXT_PUBLIC_BASE_PATH: /nextaidrawio
     depends_on: [drawio]

package.json

@@ -1,6 +1,6 @@
 {
     "name": "next-ai-draw-io",
-    "version": "0.4.7",
+    "version": "0.4.8",
     "license": "Apache-2.0",
     "private": true,
     "main": "dist-electron/main/index.js",
@@ -71,7 +71,7 @@
         "motion": "^12.23.25",
         "negotiator": "^1.0.0",
         "next": "^16.0.7",
-        "ollama-ai-provider-v2": "^1.5.4",
+        "ollama-ai-provider-v2": "^2.0.0",
         "pako": "^2.1.0",
         "prism-react-renderer": "^2.4.1",
         "react": "^19.1.2",

packages/mcp-server/README.md

@@ -64,6 +64,24 @@ Add to Cursor MCP config (`~/.cursor/mcp.json`):
 }
 ```
 
+### Cline (VS Code Extension)
+
+1. Click the **MCP Servers** icon in Cline's top menu bar
+2. Select the **Configure** tab
+3. Click **Configure MCP Servers** to edit `cline_mcp_settings.json`
+4. Add the drawio server:
+
+```json
+{
+  "mcpServers": {
+    "drawio": {
+      "command": "npx",
+      "args": ["@next-ai-drawio/mcp-server@latest"]
+    }
+  }
+}
+```
+
 ### Claude Code CLI
 
 ```bash

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

@@ -29,12 +29,29 @@ function getOrigin(url: string): string {
 
 const DRAWIO_ORIGIN = getOrigin(DRAWIO_BASE_URL)
 
+// Minimal blank diagram used to bootstrap new sessions.
+// This avoids the draw.io embed spinner (spin=1) getting stuck when no `load(xml)` is ever sent.
+const DEFAULT_DIAGRAM_XML = `<mxfile host="app.diagrams.net"><diagram id="blank" name="Page-1"><mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel></diagram></mxfile>`
+
 // Normalize URL for iframe src - ensure no double slashes
 function normalizeUrl(url: string): string {
     // Remove trailing slash to avoid double slashes
     return url.replace(/\/$/, "")
 }
 
+function isLikelyMcpSessionId(sessionId: string): boolean {
+    // Keep this cheap and conservative to avoid creating state for arbitrary IDs.
+    return sessionId.startsWith("mcp-") && sessionId.length <= 128
+}
+
+function ensureSessionStateInitialized(sessionId: string): void {
+    if (!sessionId) return
+    if (!isLikelyMcpSessionId(sessionId)) return
+    if (stateStore.has(sessionId)) return
+
+    setState(sessionId, DEFAULT_DIAGRAM_XML)
+}
+
 interface SessionState {
     xml: string
     version: number
@@ -177,8 +194,11 @@ function handleRequest(
     }
 
     if (url.pathname === "/" || url.pathname === "/index.html") {
+        const sessionId = url.searchParams.get("mcp") || ""
+        ensureSessionStateInitialized(sessionId)
+
         res.writeHead(200, { "Content-Type": "text/html" })
-        res.end(getHtmlPage(url.searchParams.get("mcp") || ""))
+        res.end(getHtmlPage(sessionId))
     } else if (url.pathname === "/api/state") {
         handleStateApi(req, res, url)
     } else if (url.pathname === "/api/history") {
@@ -205,6 +225,7 @@ function handleStateApi(
             res.end(JSON.stringify({ error: "sessionId required" }))
             return
         }
+        ensureSessionStateInitialized(sessionId)
         const state = stateStore.get(sessionId)
         res.writeHead(200, { "Content-Type": "application/json" })
         res.end(