fix(studio): address code review feedback for AI Chat panel

- Fix stale closure in toggle/keyboard handler using functional state updates
- Memoize loadMessages() to avoid running on every render
- Remove `as any` casts in tests by properly typing makeMsg helper

Agent-Logs-Url: https://github.com/objectstack-ai/spec/sessions/2f8d08c4-2f0a-4f27-998c-b4c4a8805883

Co-authored-by: xuyushun441-sys <255036401+xuyushun441-sys@users.noreply.github.com>

Author: Copilot

apps/studio/src/components/AiChatPanel.tsx

@@ -32,14 +32,16 @@ export function AiChatPanel() {
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const baseUrl = getApiBaseUrl();
 
+  const initialMessages = useMemo(() => loadMessages() as UIMessage[], []);
+
   const transport = useMemo(
     () => new DefaultChatTransport({ api: `${baseUrl}/api/v1/ai/chat` }),
     [baseUrl],
   );
 
   const { messages, sendMessage, setMessages, status, error } = useChat({
     transport,
-    messages: loadMessages() as UIMessage[],
+    messages: initialMessages,
   });
 
   const isStreaming = status === 'streaming' || status === 'submitted';

apps/studio/src/hooks/use-ai-chat-panel.ts

@@ -62,20 +62,28 @@ export function useAiChatPanel() {
   }, []);
 
   const toggle = useCallback(() => {
-    setOpen(!isOpen);
-  }, [isOpen, setOpen]);
+    setIsOpen((prev) => {
+      const next = !prev;
+      try {
+        localStorage.setItem(PANEL_STATE_KEY, String(next));
+      } catch {
+        // silently ignore
+      }
+      return next;
+    });
+  }, []);
 
   // Global keyboard shortcut: Ctrl+Shift+I / Cmd+Shift+I
   useEffect(() => {
     function handleKeyDown(e: KeyboardEvent) {
       if (e.shiftKey && (e.ctrlKey || e.metaKey) && e.key === 'I') {
         e.preventDefault();
-        setOpen(!isOpen);
+        toggle();
       }
     }
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [isOpen, setOpen]);
+  }, [toggle]);
 
   return { isOpen, setOpen, toggle };
 }

apps/studio/test/ai-chat-panel.test.tsx

@@ -2,12 +2,13 @@
 // Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
 
 import { describe, it, expect, beforeEach } from 'vitest';
+import type { UIMessage } from 'ai';
 import {
   loadMessages,
   saveMessages,
 } from '../src/hooks/use-ai-chat-panel';
 
-function makeMsg(overrides: { id: string; role: 'user' | 'assistant'; content: string }) {
+function makeMsg(overrides: { id: string; role: 'user' | 'assistant'; content: string }): UIMessage {
   return {
     id: overrides.id,
     role: overrides.role,
@@ -48,15 +49,15 @@ describe('use-ai-chat-panel', () => {
   describe('saveMessages', () => {
     it('persists messages to localStorage', () => {
       const msgs = [makeMsg({ id: '1', role: 'user', content: 'Hello' })];
-      saveMessages(msgs as any);
+      saveMessages(msgs);
       const stored = JSON.parse(localStorage.getItem('objectstack:ai-chat-messages') || '[]');
       expect(stored).toHaveLength(1);
       expect(stored[0].parts[0].text).toBe('Hello');
     });
 
     it('overwrites previous messages', () => {
-      saveMessages([makeMsg({ id: '1', role: 'user', content: 'A' })] as any);
-      saveMessages([makeMsg({ id: '2', role: 'user', content: 'B' })] as any);
+      saveMessages([makeMsg({ id: '1', role: 'user', content: 'A' })]);
+      saveMessages([makeMsg({ id: '2', role: 'user', content: 'B' })]);
       const stored = JSON.parse(localStorage.getItem('objectstack:ai-chat-messages') || '[]');
       expect(stored).toHaveLength(1);
       expect(stored[0].parts[0].text).toBe('B');
@@ -65,7 +66,7 @@ describe('use-ai-chat-panel', () => {
     it('does not throw when localStorage is unavailable', () => {
       const originalSetItem = Storage.prototype.setItem;
       Storage.prototype.setItem = () => { throw new Error('QuotaExceeded'); };
-      expect(() => saveMessages([makeMsg({ id: '1', role: 'user', content: 'A' })] as any)).not.toThrow();
+      expect(() => saveMessages([makeMsg({ id: '1', role: 'user', content: 'A' })])).not.toThrow();
       Storage.prototype.setItem = originalSetItem;
     });
   });
@@ -89,7 +90,7 @@ describe('AiChatPanel constants', () => {
   it('uses correct localStorage keys', () => {
     // Validate the keys used by the module match expectations
     const msgs = [makeMsg({ id: '1', role: 'user', content: 'test' })];
-    saveMessages(msgs as any);
+    saveMessages(msgs);
     expect(localStorage.getItem('objectstack:ai-chat-messages')).toBeTruthy();
   });
 });