draft: feat: Add multi-conversation support (multi chats in worktree)

src/main/ipc/dbIpc.ts

@@ -102,6 +102,19 @@ export function registerDatabaseIpc() {
     }
   });
 
+  ipcMain.handle(
+    'db:updateConversation',
+    async (_, conversationId: string, updates: Partial<{ title: string }>) => {
+      try {
+        await databaseService.updateConversation(conversationId, updates);
+        return { success: true };
+      } catch (error) {
+        log.error('Failed to update conversation:', error);
+        return { success: false, error: (error as Error).message };
+      }
+    }
+  );
+
   ipcMain.handle('db:deleteConversation', async (_, conversationId: string) => {
     try {
       await databaseService.deleteConversation(conversationId);

src/main/preload.ts

@@ -47,6 +47,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
     rows?: number;
     autoApprove?: boolean;
     initialPrompt?: string;
+    skipResume?: boolean;
   }) => ipcRenderer.invoke('pty:start', opts),
   ptyInput: (args: { id: string; data: string }) => ipcRenderer.send('pty:input', args),
   ptyResize: (args: { id: string; cols: number; rows: number }) =>
@@ -286,10 +287,12 @@ contextBridge.exposeInMainWorld('electronAPI', {
   getConversations: (workspaceId: string) => ipcRenderer.invoke('db:getConversations', workspaceId),
   getOrCreateDefaultConversation: (workspaceId: string) =>
     ipcRenderer.invoke('db:getOrCreateDefaultConversation', workspaceId),
-  saveMessage: (message: any) => ipcRenderer.invoke('db:saveMessage', message),
-  getMessages: (conversationId: string) => ipcRenderer.invoke('db:getMessages', conversationId),
+  updateConversation: (conversationId: string, updates: Partial<{ title: string }>) =>
+    ipcRenderer.invoke('db:updateConversation', conversationId, updates),
   deleteConversation: (conversationId: string) =>
     ipcRenderer.invoke('db:deleteConversation', conversationId),
+  saveMessage: (message: any) => ipcRenderer.invoke('db:saveMessage', message),
+  getMessages: (conversationId: string) => ipcRenderer.invoke('db:getMessages', conversationId),
 
   // Debug helpers
   debugAppendLog: (filePath: string, content: string, options?: { reset?: boolean }) =>
@@ -639,11 +642,15 @@ export interface ElectronAPI {
   getOrCreateDefaultConversation: (
     workspaceId: string
   ) => Promise<{ success: boolean; conversation?: any; error?: string }>;
+  updateConversation: (
+    conversationId: string,
+    updates: Partial<{ title: string }>
+  ) => Promise<{ success: boolean; error?: string }>;
+  deleteConversation: (conversationId: string) => Promise<{ success: boolean; error?: string }>;
   saveMessage: (message: any) => Promise<{ success: boolean; error?: string }>;
   getMessages: (
     conversationId: string
   ) => Promise<{ success: boolean; messages?: any[]; error?: string }>;
-  deleteConversation: (conversationId: string) => Promise<{ success: boolean; error?: string }>;
 
   // Host preview (non-container)
   hostPreviewStart: (args: {

src/main/services/DatabaseService.ts

@@ -313,7 +313,7 @@ export class DatabaseService {
       .select()
       .from(conversationsTable)
       .where(eq(conversationsTable.workspaceId, workspaceId))
-      .orderBy(desc(conversationsTable.updatedAt));
+      .orderBy(asc(conversationsTable.createdAt));
     return rows.map((row) => this.mapDrizzleConversationRow(row));
   }
 
@@ -322,7 +322,7 @@ export class DatabaseService {
       return {
         id: `conv-${workspaceId}-default`,
         workspaceId,
-        title: 'Default Conversation',
+        title: 'Main Chat',
         createdAt: new Date().toISOString(),
         updatedAt: new Date().toISOString(),
       };
@@ -344,7 +344,7 @@ export class DatabaseService {
     await this.saveConversation({
       id: conversationId,
       workspaceId,
-      title: 'Default Conversation',
+      title: 'Main Chat',
     });
 
     const [createdRow] = await db
@@ -360,7 +360,7 @@ export class DatabaseService {
     return {
       id: conversationId,
       workspaceId,
-      title: 'Default Conversation',
+      title: 'Main Chat',
       createdAt: new Date().toISOString(),
       updatedAt: new Date().toISOString(),
     };
@@ -409,6 +409,21 @@ export class DatabaseService {
     return rows.map((row) => this.mapDrizzleMessageRow(row));
   }
 
+  async updateConversation(
+    conversationId: string,
+    updates: Partial<Pick<Conversation, 'title'>>
+  ): Promise<void> {
+    if (this.disabled) return;
+    const { db } = await getDrizzleClient();
+    await db
+      .update(conversationsTable)
+      .set({
+        ...updates,
+        updatedAt: sql`CURRENT_TIMESTAMP`,
+      })
+      .where(eq(conversationsTable.id, conversationId));
+  }
+
   async deleteConversation(conversationId: string): Promise<void> {
     if (this.disabled) return;
     const { db } = await getDrizzleClient();

src/main/services/ptyManager.ts

@@ -41,7 +41,7 @@ export function startPty(options: {
     rows = 24,
     autoApprove,
     initialPrompt,
-    skipResume,
+    skipResume = false,
   } = options;
 
   const defaultShell = getDefaultShell();

src/renderer/components/ChatInterface.tsx

@@ -24,6 +24,8 @@ import { useBrowser } from '@/providers/BrowserProvider';
 import { useWorkspaceTerminals } from '@/lib/workspaceTerminalsStore';
 import { getInstallCommandForProvider } from '@shared/providers/registry';
 import { useAutoScrollOnWorkspaceSwitch } from '@/hooks/useAutoScrollOnWorkspaceSwitch';
+import { useConversations } from '@/hooks/useConversations';
+import { ConversationTabs } from './ConversationTabs';
 
 declare const window: Window & {
   electronAPI: {
@@ -58,7 +60,23 @@ const ChatInterface: React.FC<Props> = ({
     getContainerRunState(workspace.id)
   );
   const reduceMotion = useReducedMotion();
-  const terminalId = useMemo(() => `${provider}-main-${workspace.id}`, [provider, workspace.id]);
+
+  // Multi-conversation support
+  const {
+    conversations,
+    activeConversationId,
+    activeConversation,
+    isLoading: conversationsLoading,
+    createConversation,
+    selectConversation,
+    renameConversation,
+    deleteConversation,
+  } = useConversations(workspace.id);
+
+  const terminalId = useMemo(
+    () => `${provider}-conv-${activeConversationId || workspace.id}`,
+    [provider, activeConversationId, workspace.id]
+  );
   const [portsExpanded, setPortsExpanded] = useState(false);
   const { activeTerminalId } = useWorkspaceTerminals(workspace.id, workspace.path);
 
@@ -650,12 +668,45 @@ const ChatInterface: React.FC<Props> = ({
     );
   }, [containerState, portsExpanded, reduceMotion, workspace.id, workspace.path]);
 
+  // Debug: Log conversation state
+  useEffect(() => {
+    console.log('[ChatInterface] Conversations state:', {
+      loading: conversationsLoading,
+      count: conversations.length,
+      activeId: activeConversationId,
+      conversations: conversations.map(c => ({ id: c.id, title: c.title }))
+    });
+  }, [conversationsLoading, conversations, activeConversationId]);
+
   if (!isTerminal) {
     return null;
   }
 
   return (
     <div className={`flex h-full flex-col bg-white dark:bg-gray-800 ${className}`}>
+      {/* Conversation tabs at the top */}
+      {!conversationsLoading && conversations.length > 0 && (
+        <ConversationTabs
+          conversations={conversations}
+          activeConversationId={activeConversationId}
+          onSelectConversation={selectConversation}
+          workspaceId={workspace.id}
+          onCreateConversationWithProvider={async (selectedProvider) => {
+            // Create new conversation
+            await createConversation();
+
+            // If a specific provider was selected (not Terminal option), switch to it
+            if (selectedProvider !== null) {
+              setProvider(selectedProvider as Provider);
+            }
+          }}
+          onRenameConversation={renameConversation}
+          onDeleteConversation={deleteConversation}
+          providerIcon={providerMeta[provider]?.icon}
+          providerLabel={providerMeta[provider]?.label}
+        />
+      )}
+
       <div className="flex min-h-0 flex-1 flex-col">
         <div className="px-6 pt-4">
           <div className="mx-auto max-w-4xl space-y-2">

src/renderer/components/ConversationTabs.tsx

@@ -0,0 +1,152 @@
+import React, { useState } from 'react';
+import { X, Terminal } from 'lucide-react';
+import type { Conversation } from '../types/chat';
+import { cn } from '../lib/utils';
+import { Tooltip, TooltipContent, TooltipTrigger, TooltipProvider } from './ui/tooltip';
+import { NewConversationButton } from './NewConversationButton';
+import type { ProviderId } from '@shared/providers/registry';
+
+interface ConversationTabsProps {
+  conversations: Conversation[];
+  activeConversationId: string | null;
+  onSelectConversation: (id: string) => void;
+  workspaceId: string;
+  onCreateConversationWithProvider: (provider: ProviderId | null) => void;
+  onRenameConversation: (id: string, newTitle: string) => void;
+  onDeleteConversation: (id: string) => void;
+  isBusy?: boolean;
+  providerIcon?: string;
+  providerLabel?: string;
+}
+
+export const ConversationTabs: React.FC<ConversationTabsProps> = ({
+  conversations,
+  activeConversationId,
+  onSelectConversation,
+  workspaceId,
+  onCreateConversationWithProvider,
+  onRenameConversation,
+  onDeleteConversation,
+  isBusy = false,
+  providerIcon,
+  providerLabel,
+}) => {
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editingTitle, setEditingTitle] = useState('');
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+
+  const handleDoubleClick = (conversation: Conversation) => {
+    setEditingId(conversation.id);
+    setEditingTitle(conversation.title);
+  };
+
+  const handleRenameSubmit = (id: string) => {
+    if (editingTitle.trim() && editingTitle !== conversations.find(c => c.id === id)?.title) {
+      onRenameConversation(id, editingTitle.trim());
+    }
+    setEditingId(null);
+    setEditingTitle('');
+  };
+
+  const handleRenameKeyDown = (e: React.KeyboardEvent, id: string) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleRenameSubmit(id);
+    } else if (e.key === 'Escape') {
+      setEditingId(null);
+      setEditingTitle('');
+    }
+  };
+
+  return (
+    <TooltipProvider>
+      <div className="flex items-center border-b border-border bg-background px-5 py-1.5">
+        <div className="flex items-center gap-0.5 flex-1 overflow-x-auto scrollbar-hide">
+        {conversations.map(conversation => {
+          const isActive = conversation.id === activeConversationId;
+          const isEditing = editingId === conversation.id;
+          const isHovered = hoveredId === conversation.id;
+
+          return (
+            <div
+              key={conversation.id}
+              className={cn(
+                'group relative inline-flex items-center px-4 py-2 text-sm font-medium transition-colors',
+                isActive
+                  ? 'text-foreground'
+                  : 'text-muted-foreground hover:text-foreground'
+              )}
+              onMouseEnter={() => setHoveredId(conversation.id)}
+              onMouseLeave={() => setHoveredId(null)}
+            >
+              {/* Active indicator (bottom border) */}
+              {isActive && (
+                <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary" />
+              )}
+
+              {/* Title or edit input */}
+              {isEditing ? (
+                <input
+                  type="text"
+                  value={editingTitle}
+                  onChange={e => setEditingTitle(e.target.value)}
+                  onBlur={() => handleRenameSubmit(conversation.id)}
+                  onKeyDown={e => handleRenameKeyDown(e, conversation.id)}
+                  className="h-6 w-32 rounded border border-border bg-background px-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
+                  autoFocus
+                  onFocus={e => e.target.select()}
+                />
+              ) : (
+                <div className="relative flex items-center justify-center min-w-0 flex-1">
+                  <button
+                    type="button"
+                    onClick={() => onSelectConversation(conversation.id)}
+                    onDoubleClick={() => handleDoubleClick(conversation)}
+                    className="truncate text-left"
+                  >
+                    {conversation.title}
+                  </button>
+                </div>
+              )}
+
+              {/* Gradient fade on hover */}
+              {!isEditing && isHovered && conversations.length > 1 && (
+                <div className="absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-background to-transparent pointer-events-none" />
+              )}
+
+              {/* Close button (show only on hover) - positioned absolutely relative to tab */}
+              {!isEditing && isHovered && conversations.length > 1 && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      type="button"
+                      onClick={e => {
+                        e.stopPropagation();
+                        onDeleteConversation(conversation.id);
+                      }}
+                      className="absolute right-2 inline-flex h-5 w-5 items-center justify-center rounded bg-muted/80 transition-colors hover:bg-muted hover:text-foreground"
+                      aria-label="Delete conversation"
+                    >
+                      <X className="h-3.5 w-3.5" />
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom" sideOffset={2}>
+                    Delete conversation
+                  </TooltipContent>
+                </Tooltip>
+              )}
+            </div>
+          );
+        })}
+
+        {/* New conversation button with provider selector */}
+        <NewConversationButton
+          workspaceId={workspaceId}
+          onProviderSelect={onCreateConversationWithProvider}
+          isBusy={isBusy}
+        />
+      </div>
+      </div>
+    </TooltipProvider>
+  );
+};