diff --git a/src/__tests__/renderer/components/SessionList.test.tsx b/src/__tests__/renderer/components/SessionList.test.tsx
index 20e94056..e19567a0 100644
--- a/src/__tests__/renderer/components/SessionList.test.tsx
+++ b/src/__tests__/renderer/components/SessionList.test.tsx
@@ -1195,6 +1195,45 @@ describe('SessionList', () => {
expect(handleDropOnGroup).toHaveBeenCalledWith('g1');
});
+
+ it('shows drop zone for ungrouping when dragging and all sessions are grouped', () => {
+ const handleDropOnUngrouped = vi.fn();
+ const group = createMockGroup({ id: 'g1', name: 'My Group', sessionIds: ['s1'] });
+ const sessions = [createMockSession({ id: 's1', name: 'Grouped Session', groupId: 'g1' })];
+ const props = createDefaultProps({
+ sessions,
+ sortedSessions: sessions,
+ groups: [group],
+ leftSidebarOpen: true,
+ draggingSessionId: 's1', // Simulating active drag
+ handleDropOnUngrouped,
+ });
+ render();
+
+ // Drop zone should be visible when dragging
+ expect(screen.getByText('Drop here to ungroup')).toBeInTheDocument();
+ });
+
+ it('calls handleDropOnUngrouped when dropping on ungroup zone', () => {
+ const handleDropOnUngrouped = vi.fn();
+ const group = createMockGroup({ id: 'g1', name: 'My Group', sessionIds: ['s1'] });
+ const sessions = [createMockSession({ id: 's1', name: 'Grouped Session', groupId: 'g1' })];
+ const props = createDefaultProps({
+ sessions,
+ sortedSessions: sessions,
+ groups: [group],
+ leftSidebarOpen: true,
+ draggingSessionId: 's1',
+ handleDropOnUngrouped,
+ });
+ render();
+
+ // Find the drop zone and drop on it
+ const dropZone = screen.getByText('Drop here to ungroup');
+ fireEvent.drop(dropZone);
+
+ expect(handleDropOnUngrouped).toHaveBeenCalled();
+ });
});
// ============================================================================
diff --git a/src/renderer/components/SessionList.tsx b/src/renderer/components/SessionList.tsx
index d3153b73..1fe99101 100644
--- a/src/renderer/components/SessionList.tsx
+++ b/src/renderer/components/SessionList.tsx
@@ -2726,8 +2726,25 @@ function SessionListInner(props: SessionListProps) {
)}
) : groups.length > 0 ? (
- /* NO UNGROUPED AGENTS - Show standalone New Group button */
-
+ /* NO UNGROUPED AGENTS - Show drop zone for ungrouping + New Group button */
+
+ {/* Drop zone indicator when dragging */}
+ {draggingSessionId && (
+
+ Drop here to ungroup
+
+ )}