fix: preserve new chats created before history loading finishes

src/frontend/components/layout/AppLayout.test.tsx

@@ -8,9 +8,11 @@ import { createTestStore } from '../../test-utils/createTestStore';
 import { addChat } from '../../redux/slices/chats';
 import { setProjects } from '../../redux/slices/projects';
 import { AppLayout } from './AppLayout';
+import { HomePage } from '../../pages/HomePage';
 import { chatStorage } from '../../services/chatStorage';
 import { getAllThreadsByUserId } from '../../services/agent-rest';
 import { getProjects, getThreadsByProject } from '../../services/projects-api';
+import { markChatAsClientCreated, unmarkChatAsClientCreated } from '../../services/newChatTracker';
 
 const mocks = vi.hoisted(() => ({
   deleteProject: vi.fn(),
@@ -67,13 +69,16 @@ vi.mock('../../lib/streaming/streamingManagerRegistry', () => ({
 
 vi.mock('../Sidebar', () => ({
   Sidebar: ({
+    onNewChat,
     onDeleteProject,
     onDeleteChat,
   }: {
+    onNewChat: () => void;
     onDeleteProject: (id: string, options?: { keepThreads?: boolean }) => Promise<boolean>;
     onDeleteChat: (id: string) => void;
   }) => (
     <>
+      <button type="button" onClick={() => onNewChat()}>new-chat</button>
       <button type="button" onClick={() => { void onDeleteProject('p1'); }}>
         delete-project
       </button>
@@ -136,6 +141,75 @@ describe('AppLayout — project delete and chat count', () => {
     mocks.getThreadsByProject.mockResolvedValue([]);
   });
 
+  it.each([
+    ['quick prompt', false],
+    ['quick prompt', true],
+    ['typed prompt', true],
+    ['sidebar', true],
+  ] as const)('preserves a %s chat through delayed startup history (stream connected: %s)', async (entry, streamConnected) => {
+    let resolveHistory!: (history: []) => void;
+    vi.mocked(getAllThreadsByUserId).mockReturnValueOnce(
+      new Promise((resolve) => { resolveHistory = resolve; }),
+    );
+    const store = createTestStore();
+    render(
+      <Provider store={store}>
+        <MemoryRouter>
+          <AppLayout><HomePage /></AppLayout>
+        </MemoryRouter>
+      </Provider>,
+    );
+
+    const user = userEvent.setup();
+    if (entry === 'sidebar') {
+      await user.click(screen.getByRole('button', { name: 'new-chat' }));
+    } else if (entry === 'typed prompt') {
+      await user.type(screen.getByRole('textbox'), 'Hello');
+      await user.click(screen.getByRole('button', { name: 'Send message' }));
+    } else {
+      await user.click(screen.getByRole('button', { name: 'Start chat: What can you do for me?' }));
+    }
+    const chatId = store.getState().chats.chats[0].id;
+
+    // A successful stream response clears this marker before history settles.
+    if (streamConnected) unmarkChatAsClientCreated(chatId);
+    resolveHistory([]);
+
+    await waitFor(() => {
+      expect(store.getState().chats.threadsListHydrated).toBe(true);
+    });
+    expect(store.getState().chats.chats.map((chat) => chat.id)).toContain(chatId);
+  });
+
+  it('preserves a chat already connecting at mount when its marker clears before history returns', async () => {
+    let resolveHistory!: (history: []) => void;
+    vi.mocked(getAllThreadsByUserId).mockReturnValueOnce(
+      new Promise((resolve) => { resolveHistory = resolve; }),
+    );
+    const store = seedStore();
+    markChatAsClientCreated('c1');
+    renderLayout(store);
+
+    unmarkChatAsClientCreated('c1');
+    resolveHistory([]);
+
+    await waitFor(() => {
+      expect(store.getState().chats.threadsListHydrated).toBe(true);
+    });
+    expect(store.getState().chats.chats.map((chat) => chat.id)).toContain('c1');
+  });
+
+  it('still removes pre-existing local chats absent from startup history', async () => {
+    vi.mocked(getAllThreadsByUserId).mockResolvedValueOnce([]);
+    const store = seedStore();
+    renderLayout(store);
+
+    await waitFor(() => {
+      expect(store.getState().chats.threadsListHydrated).toBe(true);
+    });
+    expect(store.getState().chats.chats).toEqual([]);
+  });
+
   it('does not wipe local chats when the project is already gone', async () => {
     const user = userEvent.setup();
     mocks.deleteProject.mockResolvedValue({

src/frontend/components/layout/AppLayout.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useMemo, useCallback, useEffect, useRef } from 'react';
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
+import { useStore } from 'react-redux';
 import { useNavigate, useLocation, Link } from 'react-router-dom';
 import { v4 as uuidv4 } from 'uuid';
 import {
@@ -115,8 +116,7 @@ export function AppLayout({ children }: AppLayoutProps) {
   const navigate = useNavigate();
   const location = useLocation();
 
-  const chatsRef = useRef(chats);
-  useEffect(() => { chatsRef.current = chats; }, [chats]);
+  const store = useStore<RootState>();
 
   useEffect(() => {
     setAuthExpiredCallback(() => {
@@ -153,17 +153,20 @@ export function AppLayout({ children }: AppLayoutProps) {
 
   useEffect(() => {
     async function loadUserHistory() {
+      const initialChatIds = new Set(store.getState().chats.chats.map((c) => c.id));
+      const initialClientCreatedIds = new Set([...initialChatIds].filter(isClientCreatedChat));
       try {
         dispatch(setLoadingThreads(true));
         const history = await withProjectThreads(
           await getAllThreadsByUserId(window.USER_DATA.preferred_username || window.USER_DATA.sub),
         );
 
         const backendIds = new Set(history.map((t) => t.id));
-        const local = chatsRef.current;
+        const local = store.getState().chats.chats;
 
         const surviving = local.filter(
-          (c) => backendIds.has(c.id) || isClientCreatedChat(c.id),
+          (c) => backendIds.has(c.id) || isClientCreatedChat(c.id) ||
+            initialClientCreatedIds.has(c.id) || !initialChatIds.has(c.id),
         );
 
         const backendTitleMap = new Map(
@@ -254,7 +257,7 @@ export function AppLayout({ children }: AppLayoutProps) {
     }
 
     loadUserHistory();
-  }, [dispatch]);
+  }, [dispatch, store]);
 
   useEffect(() => {
     if (chats.length > 0) {

src/frontend/pages/HomePage.tsx

@@ -4,6 +4,7 @@ import { v4 as uuidv4 } from 'uuid';
 import { Send } from 'lucide-react';
 import { useAppDispatch } from '../redux/hooks';
 import { addChat, ChatItem } from '../redux/slices/chats';
+import { markChatAsClientCreated } from '../services/newChatTracker';
 
 function builtinQuickPrompts(): string[] {
   return [
@@ -35,6 +36,7 @@ export function HomePage() {
   const startChat = useCallback(
     (initialPrompt?: string) => {
       const newChatId = uuidv4();
+      markChatAsClientCreated(newChatId);
       const newChat: ChatItem = {
         id: newChatId,
         title: initialPrompt?.substring(0, 40) || 'New Chat',