@nextclaw/ui 0.12.3 → 0.12.5

package/src/components/chat/chat-session-preference-sync.test.ts

@@ -3,6 +3,7 @@ import { updateNcpSession } from '@/api/ncp-session';
 import { ChatSessionPreferenceSync } from '@/components/chat/chat-session-preference-sync';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
 import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
+import { useChatThreadStore } from '@/components/chat/stores/chat-thread.store';
 
 vi.mock('@/api/ncp-session', () => ({
   updateNcpSession: vi.fn(async () => ({
@@ -29,6 +30,12 @@ describe('ChatSessionPreferenceSync', () => {
         selectedSessionKey: null
       }
     }));
+    useChatThreadStore.setState((state) => ({
+      snapshot: {
+        ...state.snapshot,
+        canDeleteSession: false
+      }
+    }));
     vi.clearAllMocks();
   });
 
@@ -46,6 +53,12 @@ describe('ChatSessionPreferenceSync', () => {
         selectedSessionKey: 'session-1'
       }
     }));
+    useChatThreadStore.setState((state) => ({
+      snapshot: {
+        ...state.snapshot,
+        canDeleteSession: true
+      }
+    }));
 
     const sync = new ChatSessionPreferenceSync(updateNcpSession);
     sync.syncSelectedSessionPreferences();

package/src/components/chat/chat-session-preference-sync.ts

@@ -1,6 +1,7 @@
 import type { SessionPatchUpdate, ThinkingLevel } from '@/api/types';
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
 import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
+import { useChatThreadStore } from '@/components/chat/stores/chat-thread.store';
 
 type QueuedSessionPreferenceSync = {
   sessionKey: string;
@@ -30,8 +31,9 @@ export class ChatSessionPreferenceSync {
   syncSelectedSessionPreferences = (): void => {
     const inputSnapshot = useChatInputStore.getState().snapshot;
     const sessionSnapshot = useChatSessionListStore.getState().snapshot;
+    const threadSnapshot = useChatThreadStore.getState().snapshot;
     const sessionKey = sessionSnapshot.selectedSessionKey;
-    if (!sessionKey) {
+    if (!sessionKey || !threadSnapshot.canDeleteSession) {
       return;
     }
 
@@ -44,15 +46,15 @@ export class ChatSessionPreferenceSync {
     });
   };
 
-  private enqueue(next: QueuedSessionPreferenceSync): void {
+  private enqueue = (next: QueuedSessionPreferenceSync): void => {
     this.queued = next;
     if (this.inFlight) {
       return;
     }
     this.startFlush();
-  }
+  };
 
-  private startFlush(): void {
+  private startFlush = (): void => {
     this.inFlight = this.flush()
       .catch((error) => {
         console.error(`Failed to sync chat session preferences: ${String(error)}`);
@@ -63,13 +65,13 @@ export class ChatSessionPreferenceSync {
           this.startFlush();
         }
       });
-  }
+  };
 
-  private async flush(): Promise<void> {
+  private flush = async (): Promise<void> => {
     while (this.queued) {
       const current = this.queued;
       this.queued = null;
       await this.updateSession(current.sessionKey, current.patch);
     }
-  }
+  };
 }

package/src/components/chat/chat-sidebar-list-mode-switch.tsx

@@ -0,0 +1,43 @@
+import { t } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+
+type ChatSidebarListModeSwitchProps = {
+  isProjectFirstView: boolean;
+  onSelectMode: (mode: 'time-first' | 'project-first') => void;
+};
+
+export function ChatSidebarListModeSwitch(props: ChatSidebarListModeSwitchProps) {
+  const { isProjectFirstView, onSelectMode } = props;
+
+  return (
+    <div className="flex items-center gap-1.5 text-[11px]">
+      <button
+        type="button"
+        aria-pressed={!isProjectFirstView}
+        onClick={() => onSelectMode('time-first')}
+        className={cn(
+          'transition-colors',
+          isProjectFirstView
+            ? 'text-gray-400 hover:text-gray-600'
+            : 'font-medium text-gray-600'
+        )}
+      >
+        {t('chatSidebarViewTime')}
+      </button>
+      <span className="text-gray-300">/</span>
+      <button
+        type="button"
+        aria-pressed={isProjectFirstView}
+        onClick={() => onSelectMode('project-first')}
+        className={cn(
+          'transition-colors',
+          isProjectFirstView
+            ? 'font-medium text-gray-600'
+            : 'text-gray-400 hover:text-gray-600'
+        )}
+      >
+        {t('chatSidebarViewProject')}
+      </button>
+    </div>
+  );
+}

package/src/components/chat/chat-sidebar-project-groups.tsx

@@ -0,0 +1,152 @@
+import { useMemo, useState, type ReactNode } from 'react';
+import { Plus } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import type { ChatInputSnapshot } from '@/components/chat/stores/chat-input.store';
+import type { NcpSessionListItemView } from '@/components/chat/ncp/use-ncp-session-list-view';
+import { t } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+
+export type ChatSidebarProjectGroup = {
+  projectRoot: string;
+  projectName: string;
+  items: NcpSessionListItemView[];
+  latestUpdatedAt: number;
+};
+
+type SessionTypeOption = ChatInputSnapshot['sessionTypeOptions'][number];
+
+type ChatSidebarProjectGroupsProps = {
+  groups: ChatSidebarProjectGroup[];
+  defaultSessionType: string;
+  sessionTypeOptions: SessionTypeOption[];
+  renderSessionItem: (item: NcpSessionListItemView) => ReactNode;
+  onCreateSession: (sessionType: string, projectRoot: string) => void;
+};
+
+function resolveProjectGroupDefaultSessionType(
+  defaultSessionType: string,
+  sessionTypeOptions: SessionTypeOption[]
+): string {
+  if (sessionTypeOptions.some((option) => option.value === defaultSessionType)) {
+    return defaultSessionType;
+  }
+  return sessionTypeOptions[0]?.value ?? defaultSessionType;
+}
+
+function resolveSessionTypeStatusText(option: {
+  ready?: boolean;
+  reasonMessage?: string | null;
+}): string {
+  if (option.ready === false) {
+    return option.reasonMessage?.trim() || t('statusSetup');
+  }
+  return t('statusReady');
+}
+
+export function ChatSidebarProjectGroups(props: ChatSidebarProjectGroupsProps) {
+  const { groups, defaultSessionType, sessionTypeOptions, renderSessionItem, onCreateSession } = props;
+  const [openProjectRoot, setOpenProjectRoot] = useState<string | null>(null);
+  const preferredSessionType = useMemo(
+    () => resolveProjectGroupDefaultSessionType(defaultSessionType, sessionTypeOptions),
+    [defaultSessionType, sessionTypeOptions]
+  );
+  const supportsSessionTypeChoice = sessionTypeOptions.length > 1;
+
+  return (
+    <div className="space-y-3">
+      {groups.map((group) => {
+        const actionLabel = `${t('chatSidebarNewTask')} · ${group.projectName}`;
+
+        return (
+          <div key={group.projectRoot}>
+            <div className="flex items-center justify-between gap-2 px-2 py-0.5">
+              <div className="flex min-w-0 items-center gap-1.5">
+                <div
+                  className="truncate text-[11px] font-medium uppercase tracking-wider text-gray-500"
+                  title={group.projectRoot}
+                >
+                  {group.projectName}
+                </div>
+                <span className="shrink-0 text-[10px] text-gray-400">
+                  {group.items.length}
+                </span>
+              </div>
+              {supportsSessionTypeChoice ? (
+                <Popover
+                  open={openProjectRoot === group.projectRoot}
+                  onOpenChange={(nextOpen) => {
+                    setOpenProjectRoot(nextOpen ? group.projectRoot : null);
+                  }}
+                >
+                  <PopoverTrigger asChild>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      className="h-7 w-7 shrink-0 rounded-lg text-gray-400 hover:bg-white hover:text-gray-900"
+                      aria-label={actionLabel}
+                      title={actionLabel}
+                    >
+                      <Plus className="h-3.5 w-3.5" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent align="end" className="w-64 p-2">
+                    <div className="px-2 py-1 text-[11px] font-medium uppercase tracking-wider text-gray-400">
+                      {t('chatSessionTypeLabel')}
+                    </div>
+                    <div className="mt-1 space-y-1">
+                      {sessionTypeOptions.map((option) => (
+                        <button
+                          key={`${group.projectRoot}:${option.value}`}
+                          type="button"
+                          onClick={() => {
+                            onCreateSession(option.value, group.projectRoot);
+                            setOpenProjectRoot(null);
+                          }}
+                          className="w-full rounded-xl px-3 py-2 text-left transition-colors hover:bg-gray-100"
+                        >
+                          <div className="flex items-center justify-between gap-3">
+                            <div className="text-[13px] font-medium text-gray-900">{option.label}</div>
+                            <span
+                              className={cn(
+                                'shrink-0 rounded-full px-2 py-0.5 text-[10px] font-semibold',
+                                option.ready === false
+                                  ? 'bg-amber-100 text-amber-800'
+                                  : 'bg-emerald-100 text-emerald-700'
+                              )}
+                            >
+                              {option.ready === false ? t('statusSetup') : t('statusReady')}
+                            </span>
+                          </div>
+                          <div className="mt-0.5 text-[11px] text-gray-500">
+                            {resolveSessionTypeStatusText(option)}
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              ) : (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7 shrink-0 rounded-lg text-gray-400 hover:bg-white hover:text-gray-900"
+                  onClick={() => onCreateSession(preferredSessionType, group.projectRoot)}
+                  aria-label={actionLabel}
+                  title={actionLabel}
+                >
+                  <Plus className="h-3.5 w-3.5" />
+                </Button>
+              )}
+            </div>
+            <div className="space-y-0.5 pl-2">
+              {group.items.map(renderSessionItem)}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/chat/hooks/use-chat-session-project.test.tsx

@@ -71,7 +71,7 @@ describe('useChatSessionProject', () => {
     expect(toast.success).toHaveBeenCalledTimes(1);
   });
 
-  it('persists to the server and mirrors the updated project override locally for an existing session', async () => {
+  it('persists to the server without reusing the draft override state for an existing session', async () => {
     const { result } = renderHook(() => useChatSessionProject());
 
     await act(async () => {
@@ -88,12 +88,12 @@ describe('useChatSessionProject', () => {
       successMessage: 'Project directory updated',
     });
     expect(useChatInputStore.getState().snapshot).toMatchObject({
-      pendingProjectRoot: '/tmp/project-beta',
-      pendingProjectRootSessionKey: 'session-1',
+      pendingProjectRoot: null,
+      pendingProjectRootSessionKey: null,
     });
   });
 
-  it('persists clearing to the server and keeps the cleared override until session state catches up', async () => {
+  it('persists clearing to the server without keeping a session-scoped local override', async () => {
     const { result } = renderHook(() => useChatSessionProject());
 
     await act(async () => {
@@ -111,7 +111,7 @@ describe('useChatSessionProject', () => {
     });
     expect(useChatInputStore.getState().snapshot).toMatchObject({
       pendingProjectRoot: null,
-      pendingProjectRootSessionKey: 'session-1',
+      pendingProjectRootSessionKey: null,
     });
   });
 });

package/src/components/chat/hooks/use-chat-session-project.ts

@@ -31,10 +31,5 @@ export function useChatSessionProject() {
       patch: { projectRoot: params.projectRoot },
       successMessage,
     });
-
-    useChatInputStore.getState().setSnapshot({
-      pendingProjectRoot: params.projectRoot,
-      pendingProjectRootSessionKey: params.sessionKey,
-    });
   };
 }

package/src/components/chat/hooks/use-chat-session-update.test.tsx

@@ -0,0 +1,75 @@
+import { act, renderHook } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { ReactNode } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { toast } from 'sonner';
+import { useChatSessionUpdate } from '@/components/chat/hooks/use-chat-session-update';
+
+const mocks = vi.hoisted(() => ({
+  updateNcpSession: vi.fn(),
+  upsertNcpSessionSummaryInQueryClient: vi.fn(),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    success: vi.fn(),
+    error: vi.fn(),
+  },
+}));
+
+vi.mock('@/api/ncp-session', () => ({
+  updateNcpSession: (...args: unknown[]) => mocks.updateNcpSession(...args),
+}));
+
+vi.mock('@/api/ncp-session-query-cache', () => ({
+  upsertNcpSessionSummaryInQueryClient: (...args: unknown[]) =>
+    mocks.upsertNcpSessionSummaryInQueryClient(...args),
+}));
+
+function createWrapper(queryClient: QueryClient) {
+  return function Wrapper({ children }: { children: ReactNode }) {
+    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+  };
+}
+
+describe('useChatSessionUpdate', () => {
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('updates the session summary and invalidates the matching session skills queries', async () => {
+    const queryClient = new QueryClient();
+    const invalidateQueriesSpy = vi.spyOn(queryClient, 'invalidateQueries');
+    const updatedSession = {
+      sessionId: 'session-1',
+      updatedAt: '2026-04-09T00:00:00.000Z',
+      status: 'idle',
+      metadata: { project_root: '/tmp/project-alpha' },
+    };
+    mocks.updateNcpSession.mockResolvedValue(updatedSession);
+
+    const { result } = renderHook(() => useChatSessionUpdate(), {
+      wrapper: createWrapper(queryClient),
+    });
+
+    await act(async () => {
+      await result.current({
+        sessionKey: 'session-1',
+        patch: { projectRoot: '/tmp/project-alpha' },
+        successMessage: 'Project directory updated',
+      });
+    });
+
+    expect(mocks.updateNcpSession).toHaveBeenCalledWith('session-1', {
+      projectRoot: '/tmp/project-alpha',
+    });
+    expect(mocks.upsertNcpSessionSummaryInQueryClient).toHaveBeenCalledWith(
+      queryClient,
+      updatedSession,
+    );
+    expect(invalidateQueriesSpy).toHaveBeenCalledWith({
+      queryKey: ['ncp-session-skills', 'session-1'],
+    });
+    expect(toast.success).toHaveBeenCalledWith('Project directory updated');
+  });
+});

package/src/components/chat/hooks/use-chat-session-update.ts

@@ -15,10 +15,12 @@ export function useChatSessionUpdate() {
   const queryClient = useQueryClient();
 
   return async (params: UpdateChatSessionParams): Promise<void> => {
+    const { sessionKey, patch, successMessage } = params;
     try {
-      const updated = await updateNcpSession(params.sessionKey, params.patch);
+      const updated = await updateNcpSession(sessionKey, patch);
       upsertNcpSessionSummaryInQueryClient(queryClient, updated);
-      toast.success(params.successMessage ?? t('configSavedApplied'));
+      await queryClient.invalidateQueries({ queryKey: ['ncp-session-skills', sessionKey] });
+      toast.success(successMessage ?? t('configSavedApplied'));
     } catch (error) {
       toast.error(
         t('configSaveFailed') + ': ' + (error instanceof Error ? error.message : String(error)),

package/src/components/chat/managers/chat-session-list.manager.test.ts

@@ -18,6 +18,7 @@ describe('ChatSessionListManager', () => {
       snapshot: {
         ...useChatSessionListStore.getState().snapshot,
         selectedSessionKey: 'session-1',
+        draftSessionKey: 'draft-root-1',
         listMode: 'time-first'
       }
     });
@@ -25,18 +26,19 @@ describe('ChatSessionListManager', () => {
 
   it('applies the requested session type when creating a session', () => {
     const uiManager = {
-      goToChatRoot: vi.fn()
+      goToSession: vi.fn()
     } as unknown as ConstructorParameters<typeof ChatSessionListManager>[0];
     const streamActionsManager = {
       resetStreamState: vi.fn()
     } as unknown as ConstructorParameters<typeof ChatSessionListManager>[1];
 
-    const manager = new ChatSessionListManager(uiManager, streamActionsManager, () => 'draft-session-1');
+    const manager = new ChatSessionListManager(uiManager, streamActionsManager);
     manager.createSession('codex');
 
     expect(streamActionsManager.resetStreamState).toHaveBeenCalledTimes(1);
-    expect(uiManager.goToChatRoot).toHaveBeenCalledTimes(1);
+    expect(uiManager.goToSession).toHaveBeenCalledWith('draft-root-1');
     expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBe('session-1');
+    expect(useChatSessionListStore.getState().snapshot.draftSessionKey).not.toBe('draft-root-1');
     expect(useChatInputStore.getState().snapshot.pendingSessionType).toBe('codex');
     expect(useChatInputStore.getState().snapshot.pendingProjectRoot).toBeNull();
     expect(useChatInputStore.getState().snapshot.pendingProjectRootSessionKey).toBeNull();
@@ -44,17 +46,55 @@ describe('ChatSessionListManager', () => {
 
   it('hydrates the draft project root when creating a session inside a project group', () => {
     const uiManager = {
-      goToChatRoot: vi.fn()
+      goToSession: vi.fn()
     } as unknown as ConstructorParameters<typeof ChatSessionListManager>[0];
     const streamActionsManager = {
       resetStreamState: vi.fn()
     } as unknown as ConstructorParameters<typeof ChatSessionListManager>[1];
 
-    const manager = new ChatSessionListManager(uiManager, streamActionsManager, () => 'draft-session-9');
+    const manager = new ChatSessionListManager(uiManager, streamActionsManager);
     manager.createSession('native', '/tmp/project-alpha');
 
     expect(useChatInputStore.getState().snapshot.pendingProjectRoot).toBe('/tmp/project-alpha');
-    expect(useChatInputStore.getState().snapshot.pendingProjectRootSessionKey).toBe('draft-session-9');
+    expect(useChatInputStore.getState().snapshot.pendingProjectRootSessionKey).toBe('draft-root-1');
+  });
+
+  it('promotes the current root draft when send flow needs a concrete session key', () => {
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        selectedSessionKey: null,
+        draftSessionKey: 'draft-root-2'
+      }
+    });
+    const uiManager = {
+      goToSession: vi.fn()
+    } as unknown as ConstructorParameters<typeof ChatSessionListManager>[0];
+    const streamActionsManager = {
+      resetStreamState: vi.fn()
+    } as unknown as ConstructorParameters<typeof ChatSessionListManager>[1];
+
+    const manager = new ChatSessionListManager(uiManager, streamActionsManager);
+    const sessionKey = manager.ensureDraftSession('native');
+
+    expect(sessionKey).toBe('draft-root-2');
+    expect(uiManager.goToSession).toHaveBeenCalledWith('draft-root-2');
+    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBeNull();
+  });
+
+  it('does not eagerly replace the old selected session before the route finishes switching', () => {
+    const uiManager = {
+      goToSession: vi.fn()
+    } as unknown as ConstructorParameters<typeof ChatSessionListManager>[0];
+    const streamActionsManager = {
+      resetStreamState: vi.fn()
+    } as unknown as ConstructorParameters<typeof ChatSessionListManager>[1];
+
+    const manager = new ChatSessionListManager(uiManager, streamActionsManager);
+    manager.createSession('native', '/tmp/project-alpha');
+
+    expect(useChatSessionListStore.getState().snapshot.selectedSessionKey).toBe('session-1');
+    expect(useChatInputStore.getState().snapshot.pendingProjectRootSessionKey).toBe('draft-root-1');
   });
 
   it('delegates existing-session selection to routing without eagerly mutating the selected session state', () => {

package/src/components/chat/managers/chat-session-list.manager.ts

@@ -4,12 +4,12 @@ import type { ChatUiManager } from '@/components/chat/managers/chat-ui.manager';
 import type { SetStateAction } from 'react';
 import type { ChatStreamActionsManager } from '@/components/chat/managers/chat-stream-actions.manager';
 import { normalizeSessionProjectRootValue } from '@/lib/session-project/session-project.utils';
+import { createNcpSessionId } from '@/components/chat/ncp/ncp-session-adapter';
 
 export class ChatSessionListManager {
   constructor(
     private uiManager: ChatUiManager,
-    private streamActionsManager: ChatStreamActionsManager,
-    private getDraftSessionId: () => string = () => ''
+    private streamActionsManager: ChatStreamActionsManager
   ) {}
 
   private resolveUpdateValue = <T>(prev: T, next: SetStateAction<T>): T => {
@@ -46,8 +46,9 @@ export class ChatSessionListManager {
     useChatSessionListStore.getState().setSnapshot({ listMode: value });
   };
 
-  createSession = (sessionType?: string, projectRoot?: string | null) => {
+  createSession = (sessionType?: string, projectRoot?: string | null): string => {
     const { snapshot } = useChatInputStore.getState();
+    const { snapshot: sessionListSnapshot } = useChatSessionListStore.getState();
     const { defaultSessionType: configuredDefaultSessionType } = snapshot;
     const defaultSessionType = configuredDefaultSessionType || 'native';
     const nextSessionType =
@@ -55,14 +56,26 @@ export class ChatSessionListManager {
         ? sessionType.trim()
         : defaultSessionType;
     const normalizedProjectRoot = normalizeSessionProjectRootValue(projectRoot);
-    const draftSessionId = normalizedProjectRoot ? this.getDraftSessionId() : null;
+    const nextSessionKey = sessionListSnapshot.draftSessionKey;
     this.streamActionsManager.resetStreamState();
+    useChatSessionListStore.getState().setSnapshot({
+      draftSessionKey: createNcpSessionId()
+    });
     useChatInputStore.getState().setSnapshot({
       pendingSessionType: nextSessionType,
       pendingProjectRoot: normalizedProjectRoot,
-      pendingProjectRootSessionKey: draftSessionId
+      pendingProjectRootSessionKey: normalizedProjectRoot ? nextSessionKey : null
     });
-    this.uiManager.goToChatRoot();
+    this.uiManager.goToSession(nextSessionKey);
+    return nextSessionKey;
+  };
+
+  ensureDraftSession = (sessionType?: string): string => {
+    const { snapshot } = useChatSessionListStore.getState();
+    if (snapshot.selectedSessionKey) {
+      return snapshot.selectedSessionKey;
+    }
+    return this.createSession(sessionType);
   };
 
   selectSession = (sessionKey: string) => {