fix: prevent flash of example panel and animations on page refresh

- Add isRestored state to track when localStorage restoration completes
- Show example panel only after confirming no saved messages exist
- Skip message animations for restored messages
- Default tool calls and reasoning blocks to collapsed for restored messages

.github/workflows/electron-release.yml

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

components/chat-panel.tsx

@@ -10,13 +10,7 @@ import {
 } from "lucide-react"
 import Image from "next/image"
 import type React from "react"
-import {
-    useCallback,
-    useEffect,
-    useLayoutEffect,
-    useRef,
-    useState,
-} from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { flushSync } from "react-dom"
 import { Toaster, toast } from "sonner"
 import { ButtonWithTooltip } from "@/components/button-with-tooltip"
@@ -34,7 +28,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 { cn, formatXML } from "@/lib/utils"
+import { formatXML } from "@/lib/utils"
 import { ChatMessageDisplay } from "./chat-message-display"
 import { DevXmlSimulator } from "./dev-xml-simulator"
 
@@ -209,17 +203,6 @@ 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(() => {
@@ -447,8 +430,7 @@ export default function ChatPanel({
     const messagesEndRef = useRef<HTMLDivElement>(null)
 
     // Restore messages and XML snapshots from localStorage on mount
-    // useLayoutEffect runs synchronously before browser paint, so messages appear immediately
-    useLayoutEffect(() => {
+    useEffect(() => {
         if (hasRestoredRef.current) return
         hasRestoredRef.current = true
 
@@ -479,7 +461,7 @@ export default function ChatPanel({
         } finally {
             setIsRestored(true)
         }
-    }, [setMessages, dict.errors.sessionCorrupted])
+    }, [setMessages])
 
     // Save messages to localStorage whenever they change (debounced to prevent blocking during streaming)
     useEffect(() => {
@@ -936,12 +918,7 @@ export default function ChatPanel({
 
     // Full view
     return (
-        <div
-            className={cn(
-                "h-full flex flex-col bg-card shadow-soft rounded-xl border border-border/30 relative",
-                shouldAnimatePanel && "animate-slide-in-right",
-            )}
-        >
+        <div className="h-full flex flex-col bg-card shadow-soft animate-slide-in-right rounded-xl border border-border/30 relative">
             <Toaster
                 position="bottom-center"
                 richColors

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "next-ai-draw-io",
-    "version": "0.4.8",
+    "version": "0.4.7",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "next-ai-draw-io",
-            "version": "0.4.8",
+            "version": "0.4.7",
             "license": "Apache-2.0",
             "dependencies": {
                 "@ai-sdk/amazon-bedrock": "^4.0.1",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "next-ai-draw-io",
-    "version": "0.4.8",
+    "version": "0.4.7",
     "license": "Apache-2.0",
     "private": true,
     "main": "dist-electron/main/index.js",