@nextclaw/ui 0.12.13 → 0.12.15

package/src/features/chat/components/layout/chat-sidebar.test.tsx

@@ -7,7 +7,8 @@ import { useChatInputStore } from '@/features/chat/stores/chat-input.store';
 import { useChatSessionListStore } from '@/features/chat/stores/chat-session-list.store';
 
 const mocks = vi.hoisted(() => ({
-  createSession: vi.fn(),
+  createSession: vi.fn(() => 'draft-session-key'),
+  goToSession: vi.fn(),
   setQuery: vi.fn(),
   setListMode: vi.fn(),
   selectSession: vi.fn(),
@@ -28,6 +29,9 @@ function createSessionItem(
 
 vi.mock('@/features/chat/components/providers/chat-presenter.provider', () => ({
   usePresenter: () => ({
+    chatUiManager: {
+      goToSession: mocks.goToSession,
+    },
     chatSessionListManager: {
       createSession: mocks.createSession,
       setQuery: mocks.setQuery,
@@ -115,6 +119,8 @@ vi.mock('@/features/system-status', () => ({
 
 function resetSidebarTestState() {
   mocks.createSession.mockReset();
+  mocks.createSession.mockReturnValue('draft-session-key');
+  mocks.goToSession.mockReset();
   mocks.setQuery.mockReset();
   mocks.setListMode.mockReset();
   mocks.selectSession.mockReset();
@@ -228,6 +234,7 @@ describe('ChatSidebar create and list basics', () => {
 
     expect(mocks.setQuery).toHaveBeenCalledWith('release notes');
     expect(mocks.createSession).toHaveBeenCalledWith('codex');
+    expect(mocks.goToSession).toHaveBeenCalledWith('draft-session-key');
   });
 
   it('creates the default session directly from the compact mobile add button when no menu is needed', () => {
@@ -248,6 +255,7 @@ describe('ChatSidebar create and list basics', () => {
     fireEvent.click(screen.getByRole('button', { name: 'New Task' }));
 
     expect(mocks.createSession).toHaveBeenCalledWith('native');
+    expect(mocks.goToSession).toHaveBeenCalledWith('draft-session-key');
   });
 
   it('shows a session type badge for non-native sessions in the list', () => {
@@ -408,6 +416,7 @@ describe('ChatSidebar project-first mode', () => {
     fireEvent.click(screen.getByText('Codex'));
 
     expect(mocks.createSession).toHaveBeenCalledWith('codex', '/tmp/project-beta');
+    expect(mocks.goToSession).not.toHaveBeenCalled();
   });
 
   it('creates immediately when there is only one available runtime type', () => {
@@ -447,6 +456,41 @@ describe('ChatSidebar project-first mode', () => {
     fireEvent.click(screen.getByRole('button', { name: 'New Task · project-gamma' }));
 
     expect(mocks.createSession).toHaveBeenCalledWith('native', '/tmp/project-gamma');
+    expect(mocks.goToSession).not.toHaveBeenCalled();
+  });
+
+  it('opens the draft detail after creating a project-bound session on mobile', () => {
+    useChatSessionListStore.setState({
+      snapshot: {
+        ...useChatSessionListStore.getState().snapshot,
+        listMode: 'project-first'
+      }
+    });
+    mocks.sessionItems = [
+      createSessionItem({
+        key: 'session:project-mobile-1',
+        createdAt: '2026-03-19T09:00:00.000Z',
+        updatedAt: '2026-03-19T11:05:00.000Z',
+        label: 'Grouped Mobile Task',
+        projectRoot: '/tmp/project-mobile',
+        projectName: 'project-mobile',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 2
+      })
+    ];
+
+    render(
+      <MemoryRouter>
+        <ChatSidebar variant="mobile" />
+      </MemoryRouter>
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'New Task · project-mobile' }));
+    fireEvent.click(screen.getByText('Codex'));
+
+    expect(mocks.createSession).toHaveBeenCalledWith('codex', '/tmp/project-mobile');
+    expect(mocks.goToSession).toHaveBeenCalledWith('draft-session-key');
   });
 });
 

package/src/features/chat/components/layout/chat-sidebar.tsx

@@ -8,10 +8,7 @@ import { useChatSidebarSessionLabelEditor } from '@/features/chat/hooks/use-chat
 import { useNcpSessionListView, type NcpSessionListItemView } from '@/features/chat/hooks/use-ncp-session-list-view';
 import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
 import { useChatInputStore } from '@/features/chat/stores/chat-input.store';
-import {
-  shouldShowUnreadSessionIndicator,
-  useChatSessionListStore
-} from '@/features/chat/stores/chat-session-list.store';
+import { useChatSessionListStore } from '@/features/chat/stores/chat-session-list.store';
 import { useSystemStatus } from '@/features/system-status';
 import { useAgents } from '@/shared/hooks/use-agents';
 import { getSessionProjectName } from '@/shared/lib/session-project';
@@ -230,32 +227,33 @@ export function ChatSidebar({
     setLanguage(nextLang);
     window.location.reload();
   };
-  const renderSessionItem = (item: NcpSessionListItemView) =>
-    (
-      <ChatSidebarSessionEntry
-        key={item.session.key}
-        item={item}
-        selectedSessionKey={listSnapshot.selectedSessionKey}
-        optimisticReadAtBySessionKey={optimisticReadAtBySessionKey}
-        agentsById={agentsById}
-        childSessionsByParentKey={childSessionsByParentKey}
-        editingSessionKey={editingSessionKey}
-        draftLabel={draftLabel}
-        savingSessionKey={savingSessionKey}
-        sessionTitle={sessionTitle}
-        onSelectSession={presenter.chatSessionListManager.selectSession}
-        onOpenChildSessions={(parentSessionKey, activeChildSessionKey) =>
-          presenter.chatThreadManager.openChildSessionPanel({
-            parentSessionKey,
-            activeChildSessionKey,
-          })
-        }
-        onStartEditingSessionLabel={startEditingSessionLabel}
-        onDraftLabelChange={setDraftLabel}
-        onSaveSessionLabel={saveSessionLabel}
-        onCancelEditingSessionLabel={cancelEditingSessionLabel}
-      />
-    );
+  const renderSessionItem = (item: NcpSessionListItemView) => (
+    <ChatSidebarSessionEntry
+      key={item.session.key}
+      item={item}
+      selectedSessionKey={listSnapshot.selectedSessionKey}
+      optimisticReadAtBySessionKey={optimisticReadAtBySessionKey}
+      agentsById={agentsById}
+      childSessionsByParentKey={childSessionsByParentKey}
+      editingSessionKey={editingSessionKey}
+      draftLabel={draftLabel}
+      savingSessionKey={savingSessionKey}
+      sessionTitle={sessionTitle}
+      onSelectSession={presenter.chatSessionListManager.selectSession}
+      onOpenChildSessions={(parentSessionKey, activeChildSessionKey) => presenter.chatThreadManager.openChildSessionPanel({ parentSessionKey, activeChildSessionKey })}
+      onStartEditingSessionLabel={startEditingSessionLabel}
+      onDraftLabelChange={setDraftLabel}
+      onSaveSessionLabel={saveSessionLabel}
+      onCancelEditingSessionLabel={cancelEditingSessionLabel}
+    />
+  );
+  const createSessionAndOpenIfNeeded = (sessionType: string, projectRoot?: string | null) => {
+    const sessionKey = typeof projectRoot === "string"
+      ? presenter.chatSessionListManager.createSession(sessionType, projectRoot)
+      : presenter.chatSessionListManager.createSession(sessionType);
+    if (isMobileVariant) presenter.chatUiManager.goToSession(sessionKey);
+  };
+
   return (
     <aside
       className={cn(
@@ -282,7 +280,7 @@ export function ChatSidebar({
           nonDefaultSessionTypeOptions={nonDefaultSessionTypeOptions}
           isCreateMenuOpen={isCreateMenuOpen}
           onCreateMenuOpenChange={setIsCreateMenuOpen}
-          onCreateSession={presenter.chatSessionListManager.createSession}
+          onCreateSession={createSessionAndOpenIfNeeded}
           onQueryChange={presenter.chatSessionListManager.setQuery}
         />
       ) : (
@@ -293,7 +291,7 @@ export function ChatSidebar({
           nonDefaultSessionTypeOptions={nonDefaultSessionTypeOptions}
           isCreateMenuOpen={isCreateMenuOpen}
           onCreateMenuOpenChange={setIsCreateMenuOpen}
-          onCreateSession={presenter.chatSessionListManager.createSession}
+          onCreateSession={createSessionAndOpenIfNeeded}
           onQueryChange={presenter.chatSessionListManager.setQuery}
         />
       )}
@@ -301,18 +299,11 @@ export function ChatSidebar({
       {!isMobileVariant ? (
         <div className="px-3 pb-2">
           <ul className="space-y-0.5">
-            {navItems.map((item) => {
-              return (
-                <li key={item.target}>
-                  <SidebarNavLinkItem
-                    to={item.target}
-                    label={item.label()}
-                    icon={item.icon}
-                    density="compact"
-                  />
-                </li>
-              );
-            })}
+            {navItems.map((item) => (
+              <li key={item.target}>
+                <SidebarNavLinkItem to={item.target} label={item.label()} icon={item.icon} density="compact" />
+              </li>
+            ))}
           </ul>
         </div>
       ) : null}
@@ -346,7 +337,7 @@ export function ChatSidebar({
               defaultSessionType={defaultSessionType}
               sessionTypeOptions={inputSnapshot.sessionTypeOptions}
               renderSessionItem={renderSessionItem}
-              onCreateSession={presenter.chatSessionListManager.createSession}
+              onCreateSession={createSessionAndOpenIfNeeded}
             />
           )
         ) : groups.length === 0 ? (

package/src/features/chat/managers/ncp-chat-input.manager.test.ts

@@ -146,4 +146,33 @@ describe('NcpChatInputManager', () => {
     expect(streamActionsManager.sendMessage).not.toHaveBeenCalled();
     expect(sessionListManager.promoteRootDraftSessionRoute).not.toHaveBeenCalled();
   });
+
+  it('still attempts to send when provider metadata is stale or the session type is marked unavailable', async () => {
+    useChatInputStore.setState({
+      snapshot: {
+        ...useChatInputStore.getState().snapshot,
+        isProviderStateResolved: true,
+        modelOptions: [],
+        sessionTypeUnavailable: true,
+      },
+    });
+    const streamActionsManager = {
+      sendMessage: vi.fn().mockResolvedValue(undefined),
+      stopCurrentRun: vi.fn().mockResolvedValue(undefined),
+    } as unknown as ConstructorParameters<typeof NcpChatInputManager>[1];
+    const sessionListManager = {
+      ensureDraftSession: vi.fn(() => 'draft-session'),
+      promoteRootDraftSessionRoute: vi.fn(),
+    } as unknown as ConstructorParameters<typeof NcpChatInputManager>[2];
+    const manager = new NcpChatInputManager(
+      {} as ConstructorParameters<typeof NcpChatInputManager>[0],
+      streamActionsManager,
+      sessionListManager,
+    );
+
+    await manager.send();
+
+    expect(streamActionsManager.sendMessage).toHaveBeenCalledTimes(1);
+    expect(sessionListManager.promoteRootDraftSessionRoute).toHaveBeenCalledWith('current-route-session');
+  });
 });

package/src/features/chat/utils/chat-input-bar.utils.test.ts

@@ -212,13 +212,39 @@ describe('buildModelToolbarSelect', () => {
     });
 
     expect(select.value).toBe('minimax/MiniMax-M2.7');
-    expect(select.selectedLabel).toBe('MiniMax/MiniMax-M2.7');
+    expect(select.selectedLabel).toBe('MiniMax-M2.7');
     expect(select.options[0]).toEqual({
       value: 'minimax/MiniMax-M2.7',
       label: 'MiniMax/MiniMax-M2.7'
     });
   });
 
+  it('keeps provider labels in the dropdown while using only the model name in the trigger', () => {
+    const select = buildModelToolbarSelect({
+      modelOptions: [
+        {
+          value: 'anthropic/claude-sonnet-4-very-long-name',
+          modelLabel: 'claude-sonnet-4-very-long-name',
+          providerLabel: 'Anthropic'
+        }
+      ],
+      recentModelValues: [],
+      selectedModel: 'anthropic/claude-sonnet-4-very-long-name',
+      isModelOptionsLoading: false,
+      hasModelOptions: true,
+      onValueChange: vi.fn(),
+      texts: {
+        modelSelectPlaceholder: 'Select model',
+        modelNoOptionsLabel: 'No models',
+        recentModelsLabel: 'Recent',
+        allModelsLabel: 'All models'
+      }
+    });
+
+    expect(select.selectedLabel).toBe('claude-sonnet-4-very-long-name');
+    expect(select.options[0]?.label).toBe('Anthropic/claude-sonnet-4-very-long-name');
+  });
+
   it('groups recent models ahead of the remaining catalog', () => {
     const select = buildModelToolbarSelect({
       modelOptions: [

package/src/features/chat/utils/chat-input-toolbar.utils.ts

@@ -52,7 +52,9 @@ export function buildModelStateHint(params: {
   };
 }
 
-export function buildModelToolbarSelect(params: {
+export function buildModelToolbarSelect({
+  modelOptions, recentModelValues, selectedModel, isModelOptionsLoading, hasModelOptions, onValueChange, texts,
+}: {
   modelOptions: ChatModelRecord[];
   recentModelValues?: string[];
   selectedModel: string;
@@ -67,22 +69,21 @@ export function buildModelToolbarSelect(params: {
     | "allModelsLabel"
   >;
 }): ChatToolbarSelect {
-  const selectedModelOption = params.modelOptions.find(
-    (option) => option.value === params.selectedModel,
+  const selectedModelOption = modelOptions.find(
+    (option) => option.value === selectedModel,
   );
-  const fallbackModelOption = params.modelOptions[0];
-  const resolvedModelOption = selectedModelOption ?? fallbackModelOption;
-  const resolvedValue = params.hasModelOptions
+  const resolvedModelOption = selectedModelOption ?? modelOptions[0];
+  const resolvedValue = hasModelOptions
     ? resolvedModelOption?.value
     : undefined;
-  const recentValueSet = new Set(params.recentModelValues ?? []);
+  const recentValueSet = new Set(recentModelValues ?? []);
   const modelOptionMap = new Map(
-    params.modelOptions.map((option) => [option.value, option] as const),
+    modelOptions.map((option) => [option.value, option] as const),
   );
-  const recentOptions = (params.recentModelValues ?? [])
+  const recentOptions = (recentModelValues ?? [])
     .map((value) => modelOptionMap.get(value))
     .filter((option): option is ChatModelRecord => Boolean(option));
-  const remainingOptions = params.modelOptions.filter(
+  const remainingOptions = modelOptions.filter(
     (option) => !recentValueSet.has(option.value),
   );
   const optionGroups =
@@ -90,7 +91,7 @@ export function buildModelToolbarSelect(params: {
       ? [
           {
             key: "recent-models",
-            label: params.texts.recentModelsLabel,
+            label: texts.recentModelsLabel,
             options: recentOptions.map((option) => ({
               value: option.value,
               label: formatModelOptionLabel(option),
@@ -98,7 +99,7 @@ export function buildModelToolbarSelect(params: {
           },
           {
             key: "all-models",
-            label: params.texts.allModelsLabel,
+            label: texts.allModelsLabel,
             options: remainingOptions.map((option) => ({
               value: option.value,
               label: formatModelOptionLabel(option),
@@ -110,20 +111,20 @@ export function buildModelToolbarSelect(params: {
   return {
     key: "model",
     value: resolvedValue,
-    placeholder: params.texts.modelSelectPlaceholder,
+    placeholder: texts.modelSelectPlaceholder,
     selectedLabel: resolvedModelOption
-      ? formatModelOptionLabel(resolvedModelOption)
+      ? resolvedModelOption.modelLabel.trim() || formatModelOptionLabel(resolvedModelOption)
       : undefined,
     icon: "sparkles",
-    options: params.modelOptions.map((option) => ({
+    options: modelOptions.map((option) => ({
       value: option.value,
       label: formatModelOptionLabel(option),
     })),
     groups: optionGroups,
-    disabled: !params.hasModelOptions,
-    loading: params.isModelOptionsLoading,
-    emptyLabel: params.texts.modelNoOptionsLabel,
-    onValueChange: params.onValueChange,
+    disabled: !hasModelOptions,
+    loading: isModelOptionsLoading,
+    emptyLabel: texts.modelNoOptionsLabel,
+    onValueChange,
   };
 }
 

package/src/features/chat/utils/ncp-chat-input-availability.utils.test.ts

@@ -41,7 +41,7 @@ function createSnapshot(
 }
 
 describe('ncp-chat-input-availability.utils', () => {
-  it('keeps the composer editable during cold start while send remains blocked', () => {
+  it('keeps the composer editable during cold start while runtime blocking still prevents send', () => {
     const snapshot = createSnapshot({
       isProviderStateResolved: false,
       modelOptions: [],
@@ -60,6 +60,22 @@ describe('ncp-chat-input-availability.utils', () => {
     ).toBe(true);
   });
 
+  it('does not block send only because model options have not loaded yet', () => {
+    const snapshot = createSnapshot({
+      isProviderStateResolved: false,
+      modelOptions: [],
+      sessionTypeUnavailable: false,
+    });
+
+    expect(
+      isNcpChatSendDisabled({
+        snapshot,
+        hasSendableDraft: true,
+        isRuntimeBlocked: false,
+      })
+    ).toBe(false);
+  });
+
   it('marks model options as empty only after provider state resolves', () => {
     const loadingSnapshot = createSnapshot({
       isProviderStateResolved: false,
@@ -74,19 +90,35 @@ describe('ncp-chat-input-availability.utils', () => {
     expect(isNcpChatModelOptionsEmpty(emptySnapshot)).toBe(true);
   });
 
-  it('disables both editing and sending when the session type is unavailable', () => {
+  it('keeps editing and sending available when the selected session type reports unavailable', () => {
     const snapshot = createSnapshot({
       isProviderStateResolved: true,
       sessionTypeUnavailable: true,
     });
 
-    expect(isNcpChatComposerDisabled(snapshot)).toBe(true);
+    expect(isNcpChatComposerDisabled(snapshot)).toBe(false);
     expect(
       isNcpChatSendDisabled({
         snapshot,
         hasSendableDraft: true,
         isRuntimeBlocked: false,
       })
+    ).toBe(false);
+  });
+
+  it('blocks send when there is no sendable draft', () => {
+    const snapshot = createSnapshot({
+      isProviderStateResolved: true,
+      modelOptions: [],
+      sessionTypeUnavailable: true,
+    });
+
+    expect(
+      isNcpChatSendDisabled({
+        snapshot,
+        hasSendableDraft: false,
+        isRuntimeBlocked: false,
+      })
     ).toBe(true);
   });
 });

package/src/features/chat/utils/ncp-chat-input-availability.utils.ts

@@ -24,9 +24,9 @@ export function isNcpChatModelOptionsEmpty(
 }
 
 export function isNcpChatComposerDisabled(
-  snapshot: NcpChatInputAvailabilitySnapshot
+  _snapshot: NcpChatInputAvailabilitySnapshot
 ): boolean {
-  return snapshot.sessionTypeUnavailable;
+  return false;
 }
 
 export function isNcpChatSendDisabled(params: {
@@ -34,12 +34,10 @@ export function isNcpChatSendDisabled(params: {
   snapshot: NcpChatInputAvailabilitySnapshot;
   isRuntimeBlocked: boolean;
 }): boolean {
-  const { hasSendableDraft, isRuntimeBlocked, snapshot } = params;
+  const { hasSendableDraft, isRuntimeBlocked } = params;
 
   return (
     isRuntimeBlocked ||
-    !hasSendableDraft ||
-    !hasNcpChatModelOptions(snapshot) ||
-    snapshot.sessionTypeUnavailable
+    !hasSendableDraft
   );
 }

package/src/shared/lib/i18n/chat.ts

@@ -67,7 +67,7 @@ export const CHAT_LABELS: Record<string, { zh: string; en: string }> = {
     zh: '聊天能力启动失败，请稍后重试或检查服务日志。',
     en: 'Chat startup failed. Please retry in a moment or inspect the service logs.'
   },
-  chatInputPlaceholder: { zh: '输入消息，输入 / 选择技能，Enter 发送，Shift + Enter 换行', en: 'Type a message, type / to select skills, Enter to send, Shift + Enter for newline' },
+  chatInputPlaceholder: { zh: '发消息...', en: 'Message NextClaw...' },
   chatInputHint: { zh: '支持多轮上下文，默认走当前会话。', en: 'Multi-turn context is preserved in the current session.' },
   chatSlashSectionCommands: { zh: '命令', en: 'Commands' },
   chatSlashSectionSkills: { zh: '技能', en: 'Skills' },