Feat/save empty conversations (#21)

* fix: resolve TypeScript error in theme-provider test

- Fix 'children' prop missing error by passing undefined instead of empty
- All 11 tests still passing
- Resolves TypeScript compilation error

* test: add tests for empty conversation saving (TDD Red)

TDD Red Phase - Failing tests:
- conversation-title: Edit button should show for new conversations
- page: Should allow editing title without messages
- page: Should save empty conversation when title is changed

These tests expect:
1. Edit button visible on new/empty conversations
2. Title editable before sending first message
3. Conversation saved when title is edited (even with no messages)

Tests currently failing - implementation to follow

* feat: allow saving and editing empty conversations (TDD Green)

TDD Green Phase - Implementation:
- Remove edit button conditional in conversation-title.tsx
- Create conversation ID when title changes on empty conversation
- Save empty conversations to localStorage
- Update auto-save to support conversations without messages

Features:
- Edit button now visible on new conversations
- Title can be changed before sending first message
- Conversations persist even with no messages/files

Testing:
- Updated conversation-title.test.tsx selector to be more specific
- Updated page.test.tsx to check localStorage directly
- All 508 tests passing

* fix: ensure conversation title updates in header when changed

Issue: Title was saving to localStorage but not updating in the header

Root cause: Auto-save useEffect was calling createConversation without
passing the conversationTitle parameter, causing it to overwrite the
user's title with an auto-generated one.

Solution: Pass conversationTitle to createConversation when updating
an existing conversation, ensuring the user's custom title is preserved
in both storage and the UI.

All tests passing.

* fix: remove conversationTitle from auto-save dependencies

Issue: Title would revert to 'New Conversation' after being changed,
even though it saved correctly in localStorage/history.

Root Cause: conversationTitle was in the auto-save useEffect dependency
array, causing it to re-run every time the title changed. This triggered
the auto-save logic which would sometimes overwrite the user's custom
title with an auto-generated one.

Solution: Remove conversationTitle from dependencies since title updates
are already handled by handleTitleChange and updateConversationTitle.
The auto-save should only trigger on content changes (messages, files,
aiTheme), not title changes.

All tests passing.

* fix: use ref to track conversation title and prevent stale closure

Issue: Title would update in localStorage but revert to 'New Conversation'
in the header after being changed.

Root Cause: The auto-save useEffect was using a stale conversationTitle
value from closure. Since conversationTitle was removed from dependencies
to prevent infinite loops, the effect closure captured the old value and
kept using 'New Conversation' instead of the updated title.

Solution: Introduce conversationTitleRef to track the current title value.
This ref is updated immediately when the title changes and is always
current when the auto-save effect runs. The ref bypasses React's batching
and closure staleness issues.

Changes:
- Added conversationTitleRef to track current title
- Update ref in all places where setConversationTitle is called
- Auto-save effect now uses conversationTitleRef.current for latest value
- handleTitleChange also saves full conversation to ensure sync

All tests passing (17 passed, 13 skipped).

* fix: update title ref before setting conversation ID to prevent race condition

Issue: When loading a conversation from history, the title would not
update in the header (e.g., loading 'Test 5' would still show 'New
Conversation').

Root Cause: In handleLoadConversation, conversationTitleRef was being
updated AFTER setCurrentConversationId. This caused the auto-save effect
(triggered by the ID change) to run with the old/stale ref value before
the ref was updated with the new title.

Solution: Update the title and ref BEFORE setting the conversation ID.
This ensures conversationTitleRef.current has the correct value when
the auto-save effect runs.

Order of operations now:
1. Set title state and ref (with new title)
2. Set conversation ID (triggers auto-save)
3. Auto-save uses the already-updated ref value

All tests passing.

* refactor: auto-sync conversationTitle ref with state using useEffect

Simplification: Instead of manually updating conversationTitleRef.current
in multiple places, use a useEffect to automatically keep the ref in sync
with the conversationTitle state. This ensures the ref is always current
and reduces code duplication.

Benefits:
- Single source of truth for title updates
- Eliminates manual ref assignments scattered throughout the code
- Prevents missing ref updates when title state changes
- Cleaner and more maintainable code

The useEffect runs whenever conversationTitle changes, ensuring
conversationTitleRef.current is always up-to-date when the auto-save
effect needs it.

All tests passing (17 passed, 13 skipped).

* docs: add issue documentation for conversation title UI update bug

Issue: Title updates in localStorage and sidebar but not in header until
page refresh. Documented attempted fixes, suspected root causes, and
possible solutions for future debugging.

Status: Open - requires further investigation

Author: flegaspi700

docs/04-development/issues/conversation-title-not-updating-in-ui.md

@@ -0,0 +1,160 @@
+# Issue: Conversation Title Not Updating in UI
+
+**Status:** Open  
+**Priority:** High  
+**Date Reported:** November 2, 2025  
+**Branch:** feat/save-empty-conversations
+
+## Problem Description
+
+When updating a conversation title or loading a conversation from history, the title displays correctly in the sidebar conversation history but does NOT update in the main header until a full page refresh.
+
+## Steps to Reproduce
+
+### Scenario 1: New Conversation Title Update
+1. Click "New Conversation" button
+2. Click "Edit conversation title" button
+3. Change title to "Research 1"
+4. Click save (checkmark button)
+5. **Expected:** Header shows "Research 1"
+6. **Actual:** Header still shows "New Conversation"
+7. Title shows correctly in sidebar history
+8. Full page refresh (Ctrl+R) shows correct title
+
+### Scenario 2: Load Existing Conversation
+1. Have existing conversation titled "Test 5"
+2. Click on "Test 5" in conversation history sidebar
+3. **Expected:** Header shows "Test 5"
+4. **Actual:** Header still shows "New Conversation" (or previous title)
+5. Title shows correctly in sidebar history
+6. Full page refresh (Ctrl+R) shows correct title
+
+## Current Implementation
+
+### State Management
+- `conversationTitle` state is used for the title
+- `conversationTitleRef` ref is used to prevent stale closures in auto-save effect
+- `useEffect` syncs ref with state: `conversationTitleRef.current = conversationTitle`
+
+### Title Display
+```tsx
+<ChatHeader 
+  conversationTitle={conversationTitle}
+  onTitleChange={handleTitleChange}
+  isNewConversation={!currentConversationId || messages.length === 0}
+/>
+```
+
+### What Works
+- Title saves correctly to localStorage ✅
+- Title displays correctly in conversation history sidebar ✅
+- Title displays correctly after full page refresh ✅
+- All tests pass (17 passed, 13 skipped) ✅
+
+### What Doesn't Work
+- Title does not update in header immediately after change ❌
+- Title does not update in header when loading conversation ❌
+
+## Technical Details
+
+### Attempted Fixes
+1. **Removed conversationTitle from auto-save dependencies** - Prevented infinite loops but created stale closure issue
+2. **Added conversationTitleRef** - Helped with auto-save but didn't fix UI update
+3. **Fixed order of state updates** - Set title before conversation ID to prevent race conditions
+4. **Auto-sync ref with useEffect** - Simplified code but didn't fix UI update
+5. **Save full conversation in handleTitleChange** - Ensured localStorage consistency
+
+### Suspected Root Causes
+1. **React State Batching** - Multiple state updates may be batched, causing UI to not reflect latest value
+2. **Component Re-render Issue** - ChatHeader component may not be re-rendering when conversationTitle changes
+3. **State Update Timing** - Auto-save effect may be running and overwriting title after it's set
+4. **Closure Capture** - Some effect or callback may have captured old title value
+
+## Files Involved
+- `src/app/page.tsx` - Main page component with title state management
+- `src/components/chat-header.tsx` - Header component that displays title
+- `src/components/conversation-title.tsx` - Title editing component
+- `src/lib/storage.ts` - localStorage functions for saving conversations
+
+## Debugging Suggestions
+
+1. **Add console logs** to track state changes:
+   ```typescript
+   useEffect(() => {
+     console.log('Title state changed:', conversationTitle);
+   }, [conversationTitle]);
+   ```
+
+2. **Check ChatHeader component** - Ensure it's not memoized incorrectly or has stale props
+
+3. **Verify ConversationTitle component** - Check if it's updating its internal state correctly
+
+4. **Use React DevTools** - Inspect component tree to see if conversationTitle prop is updating
+
+5. **Check for stale closures** - Look for any callbacks or effects that might capture old title
+
+## Possible Solutions to Try
+
+### Solution 1: Force Re-render
+```typescript
+const [, forceUpdate] = useReducer(x => x + 1, 0);
+
+const handleTitleChange = (newTitle: string) => {
+  setConversationTitle(newTitle);
+  forceUpdate(); // Force component re-render
+  // ... rest of logic
+};
+```
+
+### Solution 2: Use Callback Ref Pattern
+```typescript
+const titleRef = useCallback((node) => {
+  if (node) {
+    node.textContent = conversationTitle;
+  }
+}, [conversationTitle]);
+```
+
+### Solution 3: Direct DOM Manipulation (Not Recommended)
+```typescript
+useEffect(() => {
+  const titleElement = document.querySelector('[data-conversation-title]');
+  if (titleElement) {
+    titleElement.textContent = conversationTitle;
+  }
+}, [conversationTitle]);
+```
+
+### Solution 4: Check Component Memoization
+- Ensure ChatHeader is not wrapped in `React.memo()` without proper dependencies
+- Check if ConversationTitle has `useMemo` or `useCallback` issues
+
+### Solution 5: Separate Title State from Auto-Save
+- Completely decouple title updates from auto-save logic
+- Have title updates go through a different path than message/file updates
+
+## Related Code Commits
+
+1. `d36b0b9` - test: add tests for empty conversation saving (TDD Red)
+2. `4452df1` - feat: allow saving and editing empty conversations (TDD Green)
+3. `1c518ae` - fix: ensure conversation title updates in header when changed
+4. `bfedde7` - fix: remove conversationTitle from auto-save dependencies
+5. `1c32e14` - fix: use ref to track conversation title and prevent stale closure
+6. `c3bf9d9` - fix: update title ref before setting conversation ID to prevent race condition
+7. `4719410` - refactor: auto-sync conversationTitle ref with state using useEffect
+
+## Testing Notes
+
+All unit tests pass, but the visual UI update is not happening. This suggests the issue is related to React's rendering cycle rather than the underlying logic.
+
+## Next Steps
+
+1. Add detailed console logging to track state changes
+2. Inspect ChatHeader and ConversationTitle components for rendering issues
+3. Check React DevTools to see if props are updating
+4. Consider if this is a React 19 or Next.js 15 specific issue
+5. Try creating a minimal reproduction case
+
+## Workaround for Users
+
+**Current Workaround:** Refresh the page (F5 or Ctrl+R) after changing title or loading conversation.

src/__tests__/app/page.test.tsx

@@ -400,4 +400,46 @@ describe('Main Page Component', () => {
       expect(screen.getByPlaceholderText(/ask a question/i)).toBeInTheDocument();
     });
   });
+
+  describe('Empty Conversation Saving', () => {
+    it('should allow editing title on new conversation without messages', async () => {
+      const user = userEvent.setup();
+      renderPage();
+      
+      // Find and click the edit title button
+      const editButton = screen.getByRole('button', { name: /edit conversation title/i });
+      expect(editButton).toBeInTheDocument();
+      
+      await user.click(editButton);
+      
+      // Input should appear - use getByDisplayValue to be more specific
+      const titleInput = screen.getByDisplayValue('New Conversation');
+      expect(titleInput).toBeInTheDocument();
+    });
+
+    it('should save empty conversation when title is changed', async () => {
+      const user = userEvent.setup();
+      renderPage();
+      
+      // Edit title on empty conversation
+      const editButton = screen.getByRole('button', { name: /edit conversation title/i });
+      await user.click(editButton);
+      
+      const titleInput = screen.getByDisplayValue('New Conversation');
+      await user.clear(titleInput);
+      await user.type(titleInput, 'My Empty Conversation');
+      
+      // Save the title
+      const saveButton = screen.getByRole('button', { name: /save title/i });
+      await user.click(saveButton);
+      
+      // Conversation should be saved even without messages
+      await waitFor(() => {
+        const conversations = JSON.parse(localStorage.getItem('notechat-conversations') || '[]');
+        expect(conversations.length).toBeGreaterThan(0);
+        expect(conversations[0].title).toBe('My Empty Conversation');
+        expect(conversations[0].messages).toEqual([]);
+      });
+    });
+  });
 });

src/__tests__/components/conversation-title.test.tsx

@@ -30,9 +30,10 @@ describe('ConversationTitle', () => {
       expect(editButton).toBeInTheDocument();
     });
 
-    it('hides edit button for new conversations', () => {
+    it('shows edit button for new conversations (allows early title editing)', () => {
       render(<ConversationTitle {...defaultProps} isNewConversation={true} />);
-      expect(screen.queryByRole('button', { name: /edit conversation title/i })).not.toBeInTheDocument();
+      const editButton = screen.getByRole('button', { name: /edit conversation title/i });
+      expect(editButton).toBeInTheDocument();
     });
 
     it('updates displayed title when prop changes', () => {

src/app/page.tsx

@@ -52,10 +52,16 @@ export default function Home() {
   const [editingMessageId, setEditingMessageId] = useState<string | null>(null);
   const [editedContent, setEditedContent] = useState<string>('');
   const searchInputRef = useRef<HTMLInputElement>(null);
+  const conversationTitleRef = useRef<string>('New Conversation');
   const { toast } = useToast();
   const { setTheme } = useTheme();
   const { streamingText, isStreaming, streamResponse, reset } = useStreamingResponse();
 
+  // Keep ref in sync with state
+  useEffect(() => {
+    conversationTitleRef.current = conversationTitle;
+  }, [conversationTitle]);
+
   // Load persisted data on mount
   useEffect(() => {
     const savedMessages = loadMessages();
@@ -113,23 +119,27 @@ export default function Home() {
 
   // Auto-save conversation when messages or sources change
   useEffect(() => {
-    if (messages.length > 0 && isLoaded) {
-      const conversation = createConversation(messages, files, aiTheme || undefined);
-      
-      // If we don't have a current conversation ID, set it
-      if (!currentConversationId) {
-        setCurrentConversationIdState(conversation.id);
-        setCurrentConversationId(conversation.id);
-        setConversationTitle(conversation.title); // Set auto-generated title
-      } else {
-        // Update existing conversation with current ID and title
-        conversation.id = currentConversationId;
-        conversation.title = conversationTitle; // Preserve user's title
+    if (isLoaded) {
+      // Save if we have messages OR if we have a conversation ID (empty conversation with title)
+      if (messages.length > 0 || currentConversationId) {
+        // If we don't have a current conversation ID, create new one with auto-generated title
+        if (!currentConversationId) {
+          const conversation = createConversation(messages, files, aiTheme || undefined);
+          setCurrentConversationIdState(conversation.id);
+          setCurrentConversationId(conversation.id);
+          setConversationTitle(conversation.title); // Set auto-generated title
+          saveConversation(conversation);
+        } else {
+          // Update existing conversation with current ID and title from ref
+          const conversation = createConversation(messages, files, aiTheme || undefined, conversationTitleRef.current);
+          conversation.id = currentConversationId;
+          saveConversation(conversation);
+        }
       }
-      
-      saveConversation(conversation);
     }
-  }, [messages, files, aiTheme, currentConversationId, conversationTitle, isLoaded]);
+    // Note: conversationTitle is NOT in dependencies because title updates are handled by handleTitleChange
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [messages, files, aiTheme, currentConversationId, isLoaded]);
 
   const handleNewConversation = () => {
     // Save current conversation before creating new one
@@ -174,9 +184,10 @@ export default function Home() {
     setMessages(conversation.messages);
     setFiles(conversation.sources);
     setAiTheme(conversation.aiTheme || null);
+    // Update title BEFORE setting conversation ID to avoid stale ref in auto-save effect
+    setConversationTitle(conversation.title);
     setCurrentConversationIdState(conversation.id);
     setCurrentConversationId(conversation.id);
-    setConversationTitle(conversation.title);
 
     toast({
       title: 'Conversation Loaded',
@@ -187,10 +198,26 @@ export default function Home() {
   const handleTitleChange = (newTitle: string) => {
     setConversationTitle(newTitle);
 
-    // Update in storage if we have a conversation ID
-    if (currentConversationId) {
+    // If we don't have a conversation ID yet, create one and save the empty conversation
+    if (!currentConversationId) {
+      const conversation = createConversation(messages, files, aiTheme || undefined, newTitle);
+      setCurrentConversationIdState(conversation.id);
+      setCurrentConversationId(conversation.id);
+      saveConversation(conversation);
+      
+      toast({
+        title: 'Conversation Created',
+        description: `Created "${newTitle}"`,
+      });
+    } else {
+      // Update existing conversation title in storage
       updateConversationTitle(currentConversationId, newTitle);
 
+      // Also update the full conversation to ensure title is synced
+      const conversation = createConversation(messages, files, aiTheme || undefined, newTitle);
+      conversation.id = currentConversationId;
+      saveConversation(conversation);
+      
       toast({
         title: 'Title Updated',
         description: `Conversation renamed to "${newTitle}"`,

src/components/conversation-title.tsx

@@ -98,23 +98,21 @@ export function ConversationTitle({ title, onTitleChange, isNewConversation }: C
         <h2 className="text-sm font-medium truncate" title={displayTitle}>
           {displayTitle}
         </h2>
-        {!isNewConversation && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
-                onClick={() => setIsEditing(true)}
-                className="h-7 w-7 shrink-0 inline-flex items-center justify-center rounded-md opacity-0 group-hover:opacity-100 hover:bg-accent hover:text-accent-foreground transition-opacity"
-                aria-label="Edit conversation title"
-              >
-                <Pencil className="h-3 w-3" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="right">
-              <p>Edit conversation title</p>
-            </TooltipContent>
-          </Tooltip>
-        )}
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={() => setIsEditing(true)}
+              className="h-7 w-7 shrink-0 inline-flex items-center justify-center rounded-md opacity-0 group-hover:opacity-100 hover:bg-accent hover:text-accent-foreground transition-opacity"
+              aria-label="Edit conversation title"
+            >
+              <Pencil className="h-3 w-3" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            <p>Edit conversation title</p>
+          </TooltipContent>
+        </Tooltip>
       </div>
     </TooltipProvider>
   );