From 41c14027e2f72335075e6045c03e2bffe396401e Mon Sep 17 00:00:00 2001
From: YfengJ <166808804+YfengJ@users.noreply.github.com>
Date: Wed, 17 Jun 2026 09:05:26 +0800
Subject: [PATCH] fix: show conversations in collapsed sidebar

---
 .../conversation-panel/conversation-panel.tsx | 15 +++--------
 .../sidebar/sidebar-conversation-list.tsx     |  6 +----
 .../mock-llm-conversation.spec.ts             | 27 +++++++++++++++++++
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/components/features/conversation-panel/conversation-panel.tsx b/src/components/features/conversation-panel/conversation-panel.tsx
index 38d5c3dbd..250a31fda 100644
--- a/src/components/features/conversation-panel/conversation-panel.tsx
+++ b/src/components/features/conversation-panel/conversation-panel.tsx
@@ -265,16 +265,7 @@ export function ConversationPanel({
     showOlderConversations,
   ]);
 
-  const compactVisibleConversations = React.useMemo(
-    () =>
-      sortConversationsByField(
-        recentScoped.filter((conversation) =>
-          isExecutionActive(conversation.execution_status),
-        ),
-        conversationSort,
-      ),
-    [conversationSort, recentScoped],
-  );
+  const compactVisibleConversations = sortedVisibleConversations;
 
   const visibleFlatCount = sortedVisibleConversations.length;
 
@@ -300,8 +291,8 @@ export function ConversationPanel({
   // pagination, which previously caused the panel to feel like it had stray
   // scrollable space at the bottom.
   const olderHidden = olderScoped.length > 0 && !showOlderConversations;
-  // Compact mode also hides "Load more" — paginating into archived
-  // conversations contradicts the "active only" intent of the icon rail.
+  // Compact mode also hides "Load more" — the icon rail should stay small
+  // and use the same currently visible conversation set as the expanded list.
   // Do not show when the visible list is empty (e.g. filters hide every
   // loaded conversation) — that state already shows "No conversations found".
   const showLoadMore =
diff --git a/src/components/features/sidebar/sidebar-conversation-list.tsx b/src/components/features/sidebar/sidebar-conversation-list.tsx
index fffdbcf54..664e1216a 100644
--- a/src/components/features/sidebar/sidebar-conversation-list.tsx
+++ b/src/components/features/sidebar/sidebar-conversation-list.tsx
@@ -23,10 +23,6 @@ interface SidebarConversationListProps {
 export function SidebarConversationList({
   collapsed,
 }: SidebarConversationListProps) {
-  if (collapsed) {
-    return null;
-  }
-
   return (
     <div className="flex flex-col flex-1 min-h-0">
       {/* Avoid overflow-hidden here: ConversationPanel's header uses `-ml-2.5` +
@@ -34,7 +30,7 @@ export function SidebarConversationList({
           the aside; clipping would inset the border. Scroll stays on the inner
           list. */}
       <div className="flex min-h-0 w-full flex-1 flex-col">
-        <ConversationPanel />
+        <ConversationPanel compact={collapsed} />
       </div>
     </div>
   );
diff --git a/tests/e2e/mock-llm/conversations/mock-llm-conversation.spec.ts b/tests/e2e/mock-llm/conversations/mock-llm-conversation.spec.ts
index 934b3cf3b..76c6e95c1 100644
--- a/tests/e2e/mock-llm/conversations/mock-llm-conversation.spec.ts
+++ b/tests/e2e/mock-llm/conversations/mock-llm-conversation.spec.ts
@@ -421,5 +421,32 @@ test.describe("mock-LLM agent-server conversation", () => {
       const errorBanner = page.getByTestId("error-message-banner");
       await expect(errorBanner).not.toBeVisible({ timeout: 2_000 });
     });
+
+    await test.step("resume conversation from collapsed sidebar", async () => {
+      await page.goto("/", { waitUntil: "domcontentloaded" });
+      await dismissAnalyticsModal(page);
+
+      const expandedConversationLink = page.locator(
+        `a[href*="/conversations/${step3ConversationId}"]`,
+      );
+      await expect(expandedConversationLink.first()).toBeVisible({
+        timeout: 10_000,
+      });
+
+      const collapseToggle = page.getByTestId("sidebar-collapse-toggle").first();
+      await expect(collapseToggle).toBeVisible({ timeout: 5_000 });
+      if ((await collapseToggle.getAttribute("aria-pressed")) !== "true") {
+        await collapseToggle.click();
+      }
+
+      const compactConversationRow = page.locator(
+        `[data-testid="compact-conversation-row"][data-conversation-id="${step3ConversationId}"]`,
+      );
+      await expect(compactConversationRow).toBeVisible({ timeout: 10_000 });
+      await compactConversationRow.click();
+
+      await waitForPath(page, /\/conversations\/.+/, 15_000);
+      expect(page.url()).toContain(step3ConversationId);
+    });
   });
 });