fix(tarko-agent-ui): prevent empty state during historical events loading

- Add loadingSessionEventsAtom to track when historical events are being loaded
- Create LoadingState component to show while events are loading
- Update ChatPanel to show LoadingState instead of EmptyState during loading
- Prevent 'Start a conversation' state from showing during session initialization

Author: ulivz

multimodal/tarko/agent-ui/src/common/hooks/useSession.ts

@@ -4,7 +4,7 @@ import { messagesAtom, groupedMessagesAtom } from '../state/atoms/message';
 import { toolResultsAtom } from '../state/atoms/tool';
 
 import { sessionFilesAtom } from '../state/atoms/files';
-import { isProcessingAtom, activePanelContentAtom, connectionStatusAtom } from '../state/atoms/ui';
+import { isProcessingAtom, activePanelContentAtom, connectionStatusAtom, loadingSessionEventsAtom } from '../state/atoms/ui';
 import { replayStateAtom } from '../state/atoms/replay';
 import {
   loadSessionsAction,
@@ -35,6 +35,7 @@ export function useSession() {
   const [isProcessing, setIsProcessing] = useAtom(isProcessingAtom);
   const [activePanelContent, setActivePanelContent] = useAtom(activePanelContentAtom);
   const [connectionStatus, setConnectionStatus] = useAtom(connectionStatusAtom);
+  const [loadingSessionEvents, setLoadingSessionEvents] = useAtom(loadingSessionEventsAtom);
 
   const [replayState, setReplayState] = useAtom(replayStateAtom);
 
@@ -91,6 +92,7 @@ export function useSession() {
       isProcessing,
       activePanelContent,
       connectionStatus,
+      loadingSessionEvents,
 
       replayState,
       sessionMetadata,
@@ -122,6 +124,7 @@ export function useSession() {
       isProcessing,
       activePanelContent,
       connectionStatus,
+      loadingSessionEvents,
       replayState,
       sessionMetadata,
       loadSessions,

multimodal/tarko/agent-ui/src/common/state/actions/sessionActions.ts

@@ -7,7 +7,7 @@ import { toolResultsAtom, toolCallResultMap } from '../atoms/tool';
 import { sessionPanelContentAtom, isProcessingAtom } from '../atoms/ui';
 import { processEventAction } from './eventProcessors';
 import { Message, SessionInfo } from '@/common/types';
-import { connectionStatusAtom } from '../atoms/ui';
+import { connectionStatusAtom, loadingSessionEventsAtom } from '../atoms/ui';
 import { replayStateAtom } from '../atoms/replay';
 import { sessionFilesAtom, FileItem } from '../atoms/files';
 import { ChatCompletionContentPart, AgentEventStream } from '@tarko/agent-interface';
@@ -160,12 +160,28 @@ export const setActiveSessionAction = atom(null, async (get, set, sessionId: str
 
     if (!hasExistingMessages) {
       console.log(`Loading events for session ${sessionId}`);
-      const events = await apiService.getSessionEvents(sessionId);
+      
+      // Set loading state
+      set(loadingSessionEventsAtom, (prev) => ({
+        ...prev,
+        [sessionId]: true,
+      }));
 
-      const processedEvents = preprocessStreamingEvents(events);
+      try {
+        const events = await apiService.getSessionEvents(sessionId);
 
-      for (const event of processedEvents) {
-        await set(processEventAction, { sessionId, event });
+        const processedEvents = preprocessStreamingEvents(events);
+
+        for (const event of processedEvents) {
+          await set(processEventAction, { sessionId, event });
+        }
+      } finally {
+        // Clear loading state
+        set(loadingSessionEventsAtom, (prev) => {
+          const newState = { ...prev };
+          delete newState[sessionId];
+          return newState;
+        });
       }
     }
 

multimodal/tarko/agent-ui/src/common/state/atoms/ui.ts

@@ -60,6 +60,11 @@ export const workspacePanelCollapsedAtom = atom<boolean>(false);
  */
 export const isProcessingAtom = atom<boolean>(false);
 
+/**
+ * Atom for tracking when historical events are being loaded for a session
+ */
+export const loadingSessionEventsAtom = atom<Record<string, boolean>>({});
+
 /**
  * Atom for offline mode state (view-only when disconnected)
  */

multimodal/tarko/agent-ui/src/standalone/chat/ChatPanel.tsx

@@ -10,14 +10,15 @@ import { useReplayMode } from '@/common/hooks/useReplayMode';
 import { useScrollToBottom } from './hooks/useScrollToBottom';
 import { ScrollToBottomButton } from './components/ScrollToBottomButton';
 import { EmptyState } from './components/EmptyState';
+import { LoadingState } from './components/LoadingState';
 import { OfflineBanner } from './components/OfflineBanner';
 import { SessionCreatingState } from './components/SessionCreatingState';
 
 import './ChatPanel.css';
 
 export const ChatPanel: React.FC = () => {
   const { sessionId: urlSessionId } = useParams<{ sessionId: string }>();
-  const { activeSessionId, isProcessing, connectionStatus, checkServerStatus, sendMessage } =
+  const { activeSessionId, isProcessing, connectionStatus, checkServerStatus, sendMessage, loadingSessionEvents } =
     useSession();
 
   const currentSessionId = urlSessionId || activeSessionId;
@@ -41,7 +42,8 @@ export const ChatPanel: React.FC = () => {
 
   const isCreatingSession = !currentSessionId || currentSessionId === 'creating';
   const hasMessages = activeMessages.length > 0;
-  const showEmptyState = !isCreatingSession && !hasMessages;
+  const isLoadingEvents = currentSessionId && loadingSessionEvents[currentSessionId];
+  const showEmptyState = !isCreatingSession && !hasMessages && !isLoadingEvents;
 
   if (isCreatingSession) {
     return <SessionCreatingState isCreating={currentSessionId === 'creating'} />;
@@ -60,7 +62,9 @@ export const ChatPanel: React.FC = () => {
           onReconnect={checkServerStatus}
         />
 
-        {showEmptyState ? (
+        {isLoadingEvents ? (
+          <LoadingState />
+        ) : showEmptyState ? (
           <EmptyState replayState={replayState} isReplayMode={isReplayMode} />
         ) : (
           <div className="space-y-4 pb-2">

multimodal/tarko/agent-ui/src/standalone/chat/components/LoadingState.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { FiMessageSquare } from 'react-icons/fi';
+
+/**
+ * LoadingState component - Shows loading state while historical events are being loaded
+ */
+export const LoadingState: React.FC = () => {
+  return (
+    <div className="flex items-center justify-center h-full min-h-[400px] animate-in fade-in duration-600">
+      <div className="text-center p-8 max-w-lg">
+        {/* Loading icon with animation */}
+        <div className="relative mb-8 animate-in zoom-in duration-700">
+          {/* Background glow */}
+          <div className="absolute inset-0 bg-gradient-to-r from-blue-500/15 via-purple-500/15 to-green-500/15 rounded-full blur-xl animate-pulse" />
+
+          {/* Main icon container */}
+          <div className="relative w-20 h-20 bg-gradient-to-br from-white via-gray-50 to-white dark:from-gray-800 dark:via-gray-750 dark:to-gray-800 rounded-3xl flex items-center justify-center mx-auto shadow-lg border border-gray-200/60 dark:border-gray-700/60 backdrop-blur-sm">
+            {/* Animated icon */}
+            <motion.div
+              animate={{
+                rotate: 360,
+              }}
+              transition={{
+                duration: 2,
+                repeat: Infinity,
+                ease: 'linear',
+              }}
+              className="text-blue-600 dark:text-blue-400"
+            >
+              <FiMessageSquare size={28} />
+            </motion.div>
+          </div>
+        </div>
+
+        {/* Loading title */}
+        <h3 className="text-2xl font-semibold mb-4 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 dark:from-gray-100 dark:via-white dark:to-gray-100 text-transparent bg-clip-text tracking-tight animate-in slide-in-from-bottom-4 fade-in duration-600">
+          Loading conversation
+        </h3>
+
+        {/* Loading description */}
+        <p className="text-gray-600 dark:text-gray-400 leading-relaxed max-w-sm mx-auto animate-in slide-in-from-bottom-4 fade-in duration-600 delay-150">
+          Loading historical events for this conversation...
+        </p>
+      </div>
+    </div>
+  );
+};