From 3b73b43712e2f1792704182c7f313afe4fef7130 Mon Sep 17 00:00:00 2001
From: Arsen Muk <arsenmuk@clickhouse.com>
Date: Thu, 30 Jul 2026 16:32:01 +0200
Subject: [PATCH] Chat sidebar: add Archive action to session menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The session ⋯ menu offered only Star / Rename / Delete (hard delete).
Archive was already backend-ready (POST /api/sessions/{id}/archive,
api.archiveSession, session_archived WS handler) but not surfaced in the
UI. Add an Archive action (above Delete) that soft-removes the session
from the sidebar (recoverable), mirroring the Star/Rename wiring and the
optimistic-reload pattern of deleteSession.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 web/src/components/Chat/SessionSidebar.tsx | 23 +++++++++++++++++++---
 web/src/stores/chatStore.ts                | 19 ++++++++++++++++++
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/web/src/components/Chat/SessionSidebar.tsx b/web/src/components/Chat/SessionSidebar.tsx
index c629a64c..6ecd3237 100644
--- a/web/src/components/Chat/SessionSidebar.tsx
+++ b/web/src/components/Chat/SessionSidebar.tsx
@@ -1,6 +1,6 @@
 import { useState, useMemo, useRef, useEffect, useCallback, useLayoutEffect } from 'react';
 import { Link } from 'react-router-dom';
-import { Plus, X, MessageSquare, ChevronRight, ChevronDown, Bot, Loader2, Search, Hammer, MoreHorizontal, Star, Pencil, Trash2, Repeat } from 'lucide-react';
+import { Plus, X, MessageSquare, ChevronRight, ChevronDown, Bot, Loader2, Search, Hammer, MoreHorizontal, Star, Pencil, Trash2, Archive, Repeat } from 'lucide-react';
 import type { Session, AgentStatus } from '../../types/chat';
 import { groupByDate, parseTimestamp } from '../../utils/dateGroups';
 import { useChatStore } from '../../stores/chatStore';
@@ -53,7 +53,7 @@ export function SessionSidebar({ sessions, activeSession, agentStatus, onCreate,
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const { searchResults, searchLoading, searchSessions, clearSearch, renameSession, toggleStar, virtualSession, discardVirtualSession, sidebarWidth, setSidebarWidth } = useChatStore();
+  const { searchResults, searchLoading, searchSessions, clearSearch, renameSession, toggleStar, archiveSession, virtualSession, discardVirtualSession, sidebarWidth, setSidebarWidth } = useChatStore();
   const searchFocusNonce = useChatStore(s => s.searchFocusNonce);
 
   // Drag-to-resize the session list. It is left-anchored against the nav rail,
@@ -321,6 +321,7 @@ export function SessionSidebar({ sessions, activeSession, agentStatus, onCreate,
                       onDelete={onDelete}
                       onRename={renameSession}
                       onToggleStar={toggleStar}
+                      onArchive={archiveSession}
                       showDate
                     />
                   ))
@@ -373,6 +374,7 @@ export function SessionSidebar({ sessions, activeSession, agentStatus, onCreate,
                     onDelete={onDelete}
                     onRename={renameSession}
                     onToggleStar={toggleStar}
+                    onArchive={archiveSession}
                   />
                 ))}
               </div>
@@ -394,6 +396,7 @@ export function SessionSidebar({ sessions, activeSession, agentStatus, onCreate,
                     onDelete={onDelete}
                     onRename={renameSession}
                     onToggleStar={toggleStar}
+                    onArchive={archiveSession}
                   />
                 ))}
               </div>
@@ -418,6 +421,7 @@ export function SessionSidebar({ sessions, activeSession, agentStatus, onCreate,
                     onDelete={onDelete}
                     onRename={renameSession}
                     onToggleStar={toggleStar}
+                    onArchive={archiveSession}
                   />
                 ))}
               </div>
@@ -564,13 +568,14 @@ function StatusIndicator({ session, isActive, isRunning }: {
 }
 
 
-function SessionItem({ session, isActive, isRunning, onDelete, onRename, onToggleStar, showDate }: {
+function SessionItem({ session, isActive, isRunning, onDelete, onRename, onToggleStar, onArchive, showDate }: {
   session: Session;
   isActive: boolean;
   isRunning: boolean;
   onDelete: (id: string) => void;
   onRename: (id: string, title: string) => Promise<void>;
   onToggleStar: (id: string) => Promise<void>;
+  onArchive: (id: string) => Promise<void>;
   showDate?: boolean;
 }) {
   const [menuOpen, setMenuOpen] = useState(false);
@@ -708,6 +713,18 @@ function SessionItem({ session, isActive, isRunning, onDelete, onRename, onToggl
               <Pencil size={14} />
               Rename
             </button>
+            <button
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setMenuOpen(false);
+                onArchive(session.id);
+              }}
+              className="flex items-center gap-2.5 w-full px-3 py-1.5 text-[13px] text-text-secondary hover:bg-border-subtle cursor-pointer transition-colors"
+            >
+              <Archive size={14} />
+              Archive
+            </button>
             <div className="border-t border-border my-1" />
             <button
               onClick={(e) => {
diff --git a/web/src/stores/chatStore.ts b/web/src/stores/chatStore.ts
index 8d4bc3da..7de9f8b1 100644
--- a/web/src/stores/chatStore.ts
+++ b/web/src/stores/chatStore.ts
@@ -196,6 +196,7 @@ interface ChatState {
   discardVirtualSession: () => void;
   setDraft: (sessionId: string, text: string) => void;
   deleteSession: (id: string) => Promise<void>;
+  archiveSession: (id: string) => Promise<void>;
   renameSession: (id: string, title: string) => Promise<void>;
   toggleStar: (id: string) => Promise<void>;
   searchSessions: (query: string) => Promise<void>;
@@ -670,6 +671,24 @@ export const useChatStore = create<ChatState>((set, get) => ({
     }
   },
 
+  archiveSession: async (id: string) => {
+    try {
+      await api.archiveSession(id);
+      removeDraft(id);
+      set(s => { const drafts = { ...s.drafts }; delete drafts[id]; return { drafts }; });
+      await get().loadSessions();
+      if (get().activeSession === id) {
+        // Switch to most recent remaining session
+        const remaining = get().sessions.filter(s => s.id !== id);
+        if (remaining.length > 0) {
+          await get().switchSession(remaining[0].id);
+        }
+      }
+    } catch (e) {
+      console.error('Failed to archive session:', e);
+    }
+  },
+
   renameSession: async (id: string, title: string) => {
     try {
       await api.updateSession(id, { title });