feat(web): conversation management — search, rename, delete, archive (#121) (#139)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/app/(dashboard)/chat/page.tsx

@@ -141,19 +141,72 @@ export default function ChatPage(): React.ReactElement {
     setMessages([]);
   }, []);
 
+  const handleRename = useCallback(async (id: string, title: string) => {
+    const updated = await api<Conversation>(`/api/conversations/${id}`, {
+      method: 'PATCH',
+      body: { title },
+    });
+    setConversations((prev) => prev.map((c) => (c.id === id ? updated : c)));
+  }, []);
+
+  const handleDelete = useCallback(
+    async (id: string) => {
+      await api<void>(`/api/conversations/${id}`, { method: 'DELETE' });
+      setConversations((prev) => prev.filter((c) => c.id !== id));
+      if (activeId === id) {
+        setActiveId(null);
+        setMessages([]);
+      }
+    },
+    [activeId],
+  );
+
+  const handleArchive = useCallback(
+    async (id: string, archived: boolean) => {
+      const updated = await api<Conversation>(`/api/conversations/${id}`, {
+        method: 'PATCH',
+        body: { archived },
+      });
+      setConversations((prev) => prev.map((c) => (c.id === id ? updated : c)));
+      // If archiving the active conversation, deselect it
+      if (archived && activeId === id) {
+        setActiveId(null);
+        setMessages([]);
+      }
+    },
+    [activeId],
+  );
+
   const handleSend = useCallback(
     async (content: string) => {
       let convId = activeId;
 
       // Auto-create conversation if none selected
       if (!convId) {
+        const autoTitle = content.slice(0, 60);
         const conv = await api<Conversation>('/api/conversations', {
           method: 'POST',
-          body: { title: content.slice(0, 50) },
+          body: { title: autoTitle },
         });
         setConversations((prev) => [conv, ...prev]);
         setActiveId(conv.id);
         convId = conv.id;
+      } else {
+        // Auto-title: if the active conversation still has the default "New
+        // conversation" title and this is the first message, update the title
+        // from the message content.
+        const activeConv = conversations.find((c) => c.id === convId);
+        if (activeConv?.title === 'New conversation' && messages.length === 0) {
+          const autoTitle = content.slice(0, 60);
+          api<Conversation>(`/api/conversations/${convId}`, {
+            method: 'PATCH',
+            body: { title: autoTitle },
+          })
+            .then((updated) => {
+              setConversations((prev) => prev.map((c) => (c.id === convId ? updated : c)));
+            })
+            .catch(() => {});
+        }
       }
 
       // Optimistic user message in local UI state
@@ -186,7 +239,7 @@ export default function ChatPage(): React.ReactElement {
       }
       socket.emit('message', { conversationId: convId, content });
     },
-    [activeId],
+    [activeId, conversations, messages],
   );
 
   return (
@@ -196,6 +249,9 @@ export default function ChatPage(): React.ReactElement {
         activeId={activeId}
         onSelect={setActiveId}
         onNew={handleNewConversation}
+        onRename={handleRename}
+        onDelete={handleDelete}
+        onArchive={handleArchive}
       />
 
       <div className="flex flex-1 flex-col">

apps/web/src/components/chat/conversation-list.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useCallback, useRef, useState } from 'react';
 import { cn } from '@/lib/cn';
 import type { Conversation } from '@/lib/types';
 
@@ -8,6 +9,32 @@ interface ConversationListProps {
   activeId: string | null;
   onSelect: (id: string) => void;
   onNew: () => void;
+  onRename: (id: string, title: string) => void;
+  onDelete: (id: string) => void;
+  onArchive: (id: string, archived: boolean) => void;
+}
+
+interface ContextMenuState {
+  conversationId: string;
+  x: number;
+  y: number;
+}
+
+/** Format a date as relative time (e.g. "2h ago", "Yesterday"). */
+function formatRelativeTime(dateStr: string): string {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMinutes = Math.floor(diffMs / 60_000);
+  const diffHours = Math.floor(diffMs / 3_600_000);
+  const diffDays = Math.floor(diffMs / 86_400_000);
+
+  if (diffMinutes < 1) return 'Just now';
+  if (diffMinutes < 60) return `${diffMinutes}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays === 1) return 'Yesterday';
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
 }
 
 export function ConversationList({
@@ -15,43 +42,265 @@ export function ConversationList({
   activeId,
   onSelect,
   onNew,
+  onRename,
+  onDelete,
+  onArchive,
 }: ConversationListProps): React.ReactElement {
-  return (
-    <div className="flex h-full w-64 flex-col border-r border-surface-border bg-surface-card">
-      <div className="flex items-center justify-between p-3">
-        <h2 className="text-sm font-medium text-text-secondary">Conversations</h2>
-        <button
-          type="button"
-          onClick={onNew}
-          className="rounded-md px-2 py-1 text-xs text-blue-400 transition-colors hover:bg-surface-elevated"
-        >
-          + New
-        </button>
-      </div>
+  const [searchQuery, setSearchQuery] = useState('');
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState('');
+  const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+  const [showArchived, setShowArchived] = useState(false);
+  const renameInputRef = useRef<HTMLInputElement>(null);
 
-      <div className="flex-1 overflow-y-auto">
-        {conversations.length === 0 && (
-          <p className="px-3 py-2 text-xs text-text-muted">No conversations yet</p>
-        )}
-        {conversations.map((conv) => (
+  const activeConversations = conversations.filter((c) => !c.archived);
+  const archivedConversations = conversations.filter((c) => c.archived);
+
+  const filteredActive = searchQuery
+    ? activeConversations.filter((c) =>
+        (c.title ?? 'Untitled').toLowerCase().includes(searchQuery.toLowerCase()),
+      )
+    : activeConversations;
+
+  const filteredArchived = searchQuery
+    ? archivedConversations.filter((c) =>
+        (c.title ?? 'Untitled').toLowerCase().includes(searchQuery.toLowerCase()),
+      )
+    : archivedConversations;
+
+  const handleContextMenu = useCallback((e: React.MouseEvent, conversationId: string) => {
+    e.preventDefault();
+    setContextMenu({ conversationId, x: e.clientX, y: e.clientY });
+    setDeleteConfirmId(null);
+  }, []);
+
+  const closeContextMenu = useCallback(() => {
+    setContextMenu(null);
+    setDeleteConfirmId(null);
+  }, []);
+
+  const startRename = useCallback(
+    (id: string, currentTitle: string | null) => {
+      setRenamingId(id);
+      setRenameValue(currentTitle ?? '');
+      closeContextMenu();
+      setTimeout(() => renameInputRef.current?.focus(), 0);
+    },
+    [closeContextMenu],
+  );
+
+  const commitRename = useCallback(() => {
+    if (renamingId) {
+      const trimmed = renameValue.trim();
+      onRename(renamingId, trimmed || 'Untitled');
+    }
+    setRenamingId(null);
+    setRenameValue('');
+  }, [renamingId, renameValue, onRename]);
+
+  const cancelRename = useCallback(() => {
+    setRenamingId(null);
+    setRenameValue('');
+  }, []);
+
+  const handleRenameKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') commitRename();
+      if (e.key === 'Escape') cancelRename();
+    },
+    [commitRename, cancelRename],
+  );
+
+  const handleDeleteClick = useCallback((id: string) => {
+    setDeleteConfirmId(id);
+  }, []);
+
+  const confirmDelete = useCallback(
+    (id: string) => {
+      onDelete(id);
+      setDeleteConfirmId(null);
+      closeContextMenu();
+    },
+    [onDelete, closeContextMenu],
+  );
+
+  const handleArchiveToggle = useCallback(
+    (id: string, archived: boolean) => {
+      onArchive(id, archived);
+      closeContextMenu();
+    },
+    [onArchive, closeContextMenu],
+  );
+
+  const contextConv = contextMenu
+    ? conversations.find((c) => c.id === contextMenu.conversationId)
+    : null;
+
+  function renderConversationItem(conv: Conversation): React.ReactElement {
+    const isActive = activeId === conv.id;
+    const isRenaming = renamingId === conv.id;
+
+    return (
+      <div key={conv.id} className="group relative">
+        {isRenaming ? (
+          <div className="px-3 py-2">
+            <input
+              ref={renameInputRef}
+              value={renameValue}
+              onChange={(e) => setRenameValue(e.target.value)}
+              onBlur={commitRename}
+              onKeyDown={handleRenameKeyDown}
+              className="w-full rounded border border-blue-500 bg-surface-elevated px-2 py-0.5 text-sm text-text-primary outline-none"
+              maxLength={255}
+            />
+          </div>
+        ) : (
           <button
-            key={conv.id}
             type="button"
             onClick={() => onSelect(conv.id)}
+            onDoubleClick={() => startRename(conv.id, conv.title)}
+            onContextMenu={(e) => handleContextMenu(e, conv.id)}
             className={cn(
               'w-full px-3 py-2 text-left text-sm transition-colors',
-              activeId === conv.id
+              isActive
                 ? 'bg-blue-600/20 text-blue-400'
                 : 'text-text-secondary hover:bg-surface-elevated',
             )}
           >
             <span className="block truncate">{conv.title ?? 'Untitled'}</span>
             <span className="block text-xs text-text-muted">
-              {new Date(conv.updatedAt).toLocaleDateString()}
+              {formatRelativeTime(conv.updatedAt)}
             </span>
           </button>
-        ))}
+        )}
       </div>
-    </div>
+    );
+  }
+
+  return (
+    <>
+      {/* Backdrop to close context menu */}
+      {contextMenu && (
+        <div className="fixed inset-0 z-10" onClick={closeContextMenu} aria-hidden="true" />
+      )}
+
+      <div className="flex h-full w-64 flex-col border-r border-surface-border bg-surface-card">
+        {/* Header */}
+        <div className="flex items-center justify-between p-3">
+          <h2 className="text-sm font-medium text-text-secondary">Conversations</h2>
+          <button
+            type="button"
+            onClick={onNew}
+            className="rounded-md px-2 py-1 text-xs text-blue-400 transition-colors hover:bg-surface-elevated"
+          >
+            + New
+          </button>
+        </div>
+
+        {/* Search input */}
+        <div className="px-3 pb-2">
+          <input
+            type="search"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search conversations\u2026"
+            className="w-full rounded-md border border-surface-border bg-surface-elevated px-3 py-1.5 text-xs text-text-primary placeholder:text-text-muted focus:border-blue-500 focus:outline-none"
+          />
+        </div>
+
+        {/* Conversation list */}
+        <div className="flex-1 overflow-y-auto">
+          {filteredActive.length === 0 && !searchQuery && (
+            <p className="px-3 py-2 text-xs text-text-muted">No conversations yet</p>
+          )}
+          {filteredActive.length === 0 && searchQuery && (
+            <p className="px-3 py-2 text-xs text-text-muted">
+              No results for &ldquo;{searchQuery}&rdquo;
+            </p>
+          )}
+          {filteredActive.map((conv) => renderConversationItem(conv))}
+
+          {/* Archived section */}
+          {archivedConversations.length > 0 && (
+            <div className="mt-2">
+              <button
+                type="button"
+                onClick={() => setShowArchived((v) => !v)}
+                className="flex w-full items-center gap-1 px-3 py-1 text-xs text-text-muted transition-colors hover:text-text-secondary"
+              >
+                <span
+                  className={cn(
+                    'inline-block transition-transform',
+                    showArchived ? 'rotate-90' : '',
+                  )}
+                >
+                  &#9658;
+                </span>
+                Archived ({archivedConversations.length})
+              </button>
+              {showArchived && (
+                <div className="opacity-60">
+                  {filteredArchived.map((conv) => renderConversationItem(conv))}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Context menu */}
+      {contextMenu && contextConv && (
+        <div
+          className="fixed z-20 min-w-36 rounded-md border border-surface-border bg-surface-card py-1 shadow-lg"
+          style={{ top: contextMenu.y, left: contextMenu.x }}
+        >
+          <button
+            type="button"
+            className="w-full px-3 py-1.5 text-left text-sm text-text-secondary hover:bg-surface-elevated"
+            onClick={() => startRename(contextConv.id, contextConv.title)}
+          >
+            Rename
+          </button>
+          <button
+            type="button"
+            className="w-full px-3 py-1.5 text-left text-sm text-text-secondary hover:bg-surface-elevated"
+            onClick={() => handleArchiveToggle(contextConv.id, !contextConv.archived)}
+          >
+            {contextConv.archived ? 'Unarchive' : 'Archive'}
+          </button>
+          <hr className="my-1 border-surface-border" />
+          {deleteConfirmId === contextConv.id ? (
+            <div className="px-3 py-1.5">
+              <p className="mb-1.5 text-xs text-red-400">Delete this conversation?</p>
+              <div className="flex gap-2">
+                <button
+                  type="button"
+                  className="rounded bg-red-600 px-2 py-0.5 text-xs text-white hover:bg-red-700"
+                  onClick={() => confirmDelete(contextConv.id)}
+                >
+                  Delete
+                </button>
+                <button
+                  type="button"
+                  className="rounded px-2 py-0.5 text-xs text-text-muted hover:bg-surface-elevated"
+                  onClick={() => setDeleteConfirmId(null)}
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          ) : (
+            <button
+              type="button"
+              className="w-full px-3 py-1.5 text-left text-sm text-red-400 hover:bg-surface-elevated"
+              onClick={() => handleDeleteClick(contextConv.id)}
+            >
+              Delete
+            </button>
+          )}
+        </div>
+      )}
+    </>
   );
 }

apps/web/src/lib/types.ts

@@ -4,6 +4,7 @@ export interface Conversation {
   userId: string;
   title: string | null;
   projectId: string | null;
+  archived: boolean;
   createdAt: string;
   updatedAt: string;
 }