feat(playground): threaded chat with sidebar, LLM titles, star/rename/delete, and scroll persistence (#1915)

* fix(layout): set relative positioning on Main for overlay child layouts

* feat(db): add title_edited_by_user column to threads (migration 002)

* feat(db): add starred column to threads (migration 003)

* feat(db): persist and hydrate titleEditedByUser and starred on threads

* feat(ipc): add generate-thread-title handler and expose via preload chat API

* feat(playground): add usePlaygroundThreads hook for thread CRUD, star, and rename

* feat(chat): add useAutoScroll hook with per-thread scroll position persistence

* feat(playground): add PlaygroundSidebar with thread list, star, rename, and delete

* feat(chat): add ThreadTitleBar with inline rename, star toggle, and delete confirm

* refactor(chat): replace TitlePage with ThreadTitleBar in ChatInterface

* feat(playground): add thread sidebar layout with per-thread ChatInterface routing

* test(db): cover migrations 002-003 and titleEditedByUser/starred round-trips

* test(chat): cover generateThreadTitle success, failure paths, and provider branches

* test(playground): add tests for useAutoScroll, usePlaygroundThreads, PlaygroundSidebar, ThreadTitleBar, ChatInterface, and Playground route

* refactor: fine tuning

* refactor: update thread title after messages

* fix(chat): use valid ScrollBehavior 'auto' instead of 'instant' in useAutoScroll

* fix(a11y): add aria-label and title to scroll-to-bottom button

* fix(playground): re-sort thread list by lastEditTimestamp after mutations

* fix(chat): re-check titleEditedByUser before writing LLM-generated title

* refactor: adjust types

* test: e2e adjustment

* fix(playground): use opacity instead of display:none for sidebar dropdown trigger

Replace hidden/group-hover:flex with opacity-0/pointer-events-none so
getBoundingClientRect() always returns valid coordinates for floating-ui
positioning. Change dropdown side to bottom and remove fixed positioning
from the sidebar aside element.

* feat(playground): show sidebar immediately when first message is sent

Publish a threadStarted query cache signal on status=submitted so
usePlaygroundThreads picks up the new thread before streaming finishes.
Unify the playground layout into a single tree so ChatInterface stays
mounted across the no-threads to has-threads transition, preserving the
active streaming session.

* test: e2e adjustment

* refactor: auto-scroll

Author: samuv

e2e-tests/playground.spec.ts

@@ -39,11 +39,15 @@ async function warmupOllamaModel(): Promise<void> {
 }
 
 async function waitForPlaygroundReady(window: Page): Promise<void> {
-  const loadingText = window.getByText(/loading chat history/i)
-  // May never appear if already loaded
-  await loadingText
-    .waitFor({ state: 'hidden', timeout: 10_000 })
-    .catch(() => {})
+  // Wait past both the thread-list spinner (dots, no text) and the
+  // "Loading chat history..." phase by waiting for any interactive element
+  // that is visible in every possible ready state.
+  const readyLocator = window
+    .getByRole('button', { name: /configure your providers/i })
+    .or(window.getByTestId('model-selector'))
+    .or(window.getByPlaceholder(/type your message/i))
+
+  await readyLocator.first().waitFor({ state: 'visible', timeout: 15_000 })
 }
 
 async function openProviderSettingsDialog(window: Page): Promise<void> {
@@ -105,18 +109,7 @@ async function selectOllamaModel(window: Page): Promise<void> {
 
 async function clearPlaygroundState(window: Page): Promise<void> {
   await window.getByRole('link', { name: 'Playground' }).click()
-  await expect(
-    window.getByRole('heading', { name: 'Playground', level: 1 })
-  ).toBeVisible()
-
   await waitForPlaygroundReady(window)
-
-  const clearChatButton = window.getByRole('button', { name: /clear chat/i })
-  if (await clearChatButton.isVisible().catch(() => false)) {
-    await clearChatButton.click()
-    await window.getByRole('button', { name: /delete/i }).click()
-  }
-
   await removeOllamaProvider(window)
 }
 
@@ -189,9 +182,7 @@ test.describe('Playground chat with Ollama', () => {
     ).toBeVisible({ timeout: 30_000 })
 
     await window.getByRole('link', { name: 'Playground' }).click()
-    await expect(
-      window.getByRole('heading', { name: 'Playground', level: 1 })
-    ).toBeVisible()
+    await waitForPlaygroundReady(window)
 
     await openProviderSettingsDialog(window)
 

main/src/chat/__tests__/generate-thread-title.test.ts

@@ -0,0 +1,301 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+// ---------------------------------------------------------------------------
+// Hoisted mock factories — must be defined before vi.mock() calls
+// ---------------------------------------------------------------------------
+const mockGenerateText = vi.hoisted(() => vi.fn())
+const mockConvertToModelMessages = vi.hoisted(() => vi.fn())
+const mockGetThread = vi.hoisted(() => vi.fn())
+const mockUpdateThread = vi.hoisted(() => vi.fn())
+const mockReadSelectedModel = vi.hoisted(() => vi.fn())
+const mockReadChatProvider = vi.hoisted(() => vi.fn())
+const mockCreateModelFromRequest = vi.hoisted(() => vi.fn())
+
+// ---------------------------------------------------------------------------
+// Module mocks
+// ---------------------------------------------------------------------------
+
+vi.mock('ai', () => ({
+  generateText: mockGenerateText,
+  convertToModelMessages: mockConvertToModelMessages,
+}))
+
+vi.mock('../threads-storage', () => ({
+  getThread: mockGetThread,
+  updateThread: mockUpdateThread,
+}))
+
+vi.mock('../../db/readers/chat-settings-reader', () => ({
+  readSelectedModel: mockReadSelectedModel,
+  readChatProvider: mockReadChatProvider,
+}))
+
+vi.mock('../utils', () => ({
+  createModelFromRequest: mockCreateModelFromRequest,
+}))
+
+vi.mock('../providers', () => ({
+  CHAT_PROVIDERS: [
+    { id: 'openai', name: 'OpenAI' },
+    { id: 'ollama', name: 'Ollama' },
+  ],
+}))
+
+vi.mock('../constants', () => ({
+  LOCAL_PROVIDER_IDS: ['ollama', 'lmstudio'],
+}))
+
+vi.mock('../../logger', () => ({
+  default: { debug: vi.fn(), info: vi.fn(), warn: vi.fn(), error: vi.fn() },
+}))
+
+// ---------------------------------------------------------------------------
+// Subject under test (imported after mocks)
+// ---------------------------------------------------------------------------
+import { generateThreadTitle } from '../generate-thread-title'
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const fakeModel = { id: 'fake-model' }
+const fakeConvertedMessages = [{ role: 'user', content: 'hello' }]
+
+function makeThread(overrides: Record<string, unknown> = {}) {
+  return {
+    id: 'thread-1',
+    title: 'Old title',
+    titleEditedByUser: false,
+    messages: [
+      { id: 'm1', role: 'user', parts: [{ type: 'text', text: 'Hello' }] },
+      {
+        id: 'm2',
+        role: 'assistant',
+        parts: [{ type: 'text', text: 'Hi there' }],
+      },
+    ],
+    ...overrides,
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('generateThreadTitle', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockGetThread.mockReturnValue(makeThread())
+    mockReadSelectedModel.mockReturnValue({
+      provider: 'openai',
+      model: 'gpt-4o',
+    })
+    mockReadChatProvider.mockReturnValue({ apiKey: 'sk-test' })
+    mockCreateModelFromRequest.mockReturnValue(fakeModel)
+    mockConvertToModelMessages.mockResolvedValue(fakeConvertedMessages)
+    mockGenerateText.mockResolvedValue({ text: 'Great Title' })
+  })
+
+  describe('failure paths', () => {
+    it('returns failure when thread is not found', async () => {
+      mockGetThread.mockReturnValue(null)
+      const result = await generateThreadTitle('thread-1')
+      expect(result).toMatchObject({
+        success: false,
+        error: 'Thread not found',
+      })
+      expect(mockUpdateThread).not.toHaveBeenCalled()
+    })
+
+    it('returns failure when thread has no user message', async () => {
+      mockGetThread.mockReturnValue(makeThread({ messages: [] }))
+      const result = await generateThreadTitle('thread-1')
+      expect(result).toMatchObject({
+        success: false,
+        error: 'No user message in thread',
+      })
+    })
+
+    it('returns failure when no model is selected', async () => {
+      mockReadSelectedModel.mockReturnValue({ provider: '', model: '' })
+      const result = await generateThreadTitle('thread-1')
+      expect(result).toMatchObject({
+        success: false,
+        error: 'No model selected',
+      })
+    })
+
+    it('returns failure when provider is unknown', async () => {
+      mockReadSelectedModel.mockReturnValue({
+        provider: 'unknown-provider',
+        model: 'x',
+      })
+      const result = await generateThreadTitle('thread-1')
+      expect(result).toMatchObject({ success: false })
+      expect(result.error).toContain('Unknown provider')
+    })
+
+    it('returns failure when provider settings are not found', async () => {
+      mockReadChatProvider.mockReturnValue(null)
+      const result = await generateThreadTitle('thread-1')
+      expect(result).toMatchObject({
+        success: false,
+        error: 'Provider settings not found',
+      })
+    })
+
+    it('returns failure when LLM returns only whitespace', async () => {
+      mockGenerateText.mockResolvedValue({ text: '   ' })
+      const result = await generateThreadTitle('thread-1')
+      expect(result).toMatchObject({
+        success: false,
+        error: 'Empty title generated',
+      })
+      expect(mockUpdateThread).not.toHaveBeenCalled()
+    })
+
+    it('returns failure with error message when generateText throws', async () => {
+      mockGenerateText.mockRejectedValue(new Error('API timeout'))
+      const result = await generateThreadTitle('thread-1')
+      expect(result).toMatchObject({ success: false, error: 'API timeout' })
+    })
+
+    it('returns failure with "Unknown error" for non-Error throws', async () => {
+      mockGenerateText.mockRejectedValue('some string error')
+      const result = await generateThreadTitle('thread-1')
+      expect(result).toMatchObject({ success: false, error: 'Unknown error' })
+    })
+  })
+
+  describe('success path', () => {
+    it('returns success with the generated title', async () => {
+      mockGenerateText.mockResolvedValue({
+        text: 'Patching Security Vulnerabilities',
+      })
+      const result = await generateThreadTitle('thread-1')
+      expect(result).toMatchObject({
+        success: true,
+        title: 'Patching Security Vulnerabilities',
+      })
+    })
+
+    it('calls updateThread with title and titleEditedByUser: false', async () => {
+      mockGenerateText.mockResolvedValue({ text: 'Auto Title' })
+      await generateThreadTitle('thread-1')
+      expect(mockUpdateThread).toHaveBeenCalledWith('thread-1', {
+        title: 'Auto Title',
+        titleEditedByUser: false,
+      })
+    })
+
+    it('strips trailing punctuation from the title', async () => {
+      mockGenerateText.mockResolvedValue({ text: 'Deploy to Production.' })
+      const result = await generateThreadTitle('thread-1')
+      expect(result.title).toBe('Deploy to Production')
+    })
+
+    it('strips trailing question marks', async () => {
+      mockGenerateText.mockResolvedValue({ text: 'How To Deploy?' })
+      const result = await generateThreadTitle('thread-1')
+      expect(result.title).toBe('How To Deploy')
+    })
+
+    it('calls convertToModelMessages with the context messages', async () => {
+      await generateThreadTitle('thread-1')
+      expect(mockConvertToModelMessages).toHaveBeenCalledWith(
+        expect.arrayContaining([expect.objectContaining({ role: 'user' })])
+      )
+    })
+
+    it('calls generateText with the correct system prompt and maxOutputTokens', async () => {
+      await generateThreadTitle('thread-1')
+      expect(mockGenerateText).toHaveBeenCalledWith(
+        expect.objectContaining({
+          model: fakeModel,
+          messages: fakeConvertedMessages,
+          maxOutputTokens: 20,
+          system: expect.stringContaining('6 words or fewer'),
+        })
+      )
+    })
+
+    it('works when thread has only a user message (no assistant reply yet)', async () => {
+      mockGetThread.mockReturnValue(
+        makeThread({
+          messages: [
+            {
+              id: 'm1',
+              role: 'user',
+              parts: [{ type: 'text', text: 'Hello' }],
+            },
+          ],
+        })
+      )
+      mockGenerateText.mockResolvedValue({ text: 'Solo User Message' })
+      const result = await generateThreadTitle('thread-1')
+      expect(result).toMatchObject({
+        success: true,
+        title: 'Solo User Message',
+      })
+    })
+  })
+
+  describe('remote provider (apiKey path)', () => {
+    it('passes apiKey in the request for a non-local provider', async () => {
+      mockReadSelectedModel.mockReturnValue({
+        provider: 'openai',
+        model: 'gpt-4o',
+      })
+      mockReadChatProvider.mockReturnValue({ apiKey: 'sk-remote-key' })
+
+      await generateThreadTitle('thread-1')
+
+      expect(mockCreateModelFromRequest).toHaveBeenCalledWith(
+        expect.objectContaining({ id: 'openai' }),
+        expect.objectContaining({ apiKey: 'sk-remote-key' })
+      )
+      expect(mockCreateModelFromRequest).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.not.objectContaining({ endpointURL: expect.anything() })
+      )
+    })
+  })
+
+  describe('local provider (endpointURL path)', () => {
+    it('passes endpointURL in the request for a local provider', async () => {
+      mockReadSelectedModel.mockReturnValue({
+        provider: 'ollama',
+        model: 'llama3',
+      })
+      mockReadChatProvider.mockReturnValue({
+        endpointURL: 'http://localhost:11434',
+      })
+
+      await generateThreadTitle('thread-1')
+
+      expect(mockCreateModelFromRequest).toHaveBeenCalledWith(
+        expect.objectContaining({ id: 'ollama' }),
+        expect.objectContaining({ endpointURL: 'http://localhost:11434' })
+      )
+      expect(mockCreateModelFromRequest).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.not.objectContaining({ apiKey: expect.anything() })
+      )
+    })
+
+    it('uses empty string for endpointURL when not configured', async () => {
+      mockReadSelectedModel.mockReturnValue({
+        provider: 'ollama',
+        model: 'llama3',
+      })
+      mockReadChatProvider.mockReturnValue({}) // no endpointURL
+
+      await generateThreadTitle('thread-1')
+
+      expect(mockCreateModelFromRequest).toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({ endpointURL: '' })
+      )
+    })
+  })
+})