@nextclaw/ui 0.12.3 → 0.12.5

package/src/components/chat/ncp/NcpChatPage.tsx

@@ -2,7 +2,6 @@ import {
   useEffect,
   useMemo,
   useRef,
-  useState,
 } from "react";
 import {
   buildNcpRequestEnvelope,
@@ -22,7 +21,6 @@ import {
 } from "@/components/chat/chat-session-route";
 import { useNcpChatPageData } from "@/components/chat/ncp/ncp-chat-page-data";
 import { NcpChatPresenter } from "@/components/chat/ncp/ncp-chat.presenter";
-import { createNcpSessionId } from "@/components/chat/ncp/ncp-session-adapter";
 import { useNcpSessionConversation } from "@/components/chat/ncp/session-conversation/use-ncp-session-conversation";
 import { useNcpChatDerivedState, useNcpChatSnapshotSync } from "@/components/chat/ncp/page/ncp-chat-derived-state";
 import { ChatPresenterProvider } from "@/components/chat/presenter/chat-presenter-context";
@@ -79,26 +77,39 @@ export function buildNcpSendMetadata(payload: {
   return metadata;
 }
 
-export function shouldRefreshDraftSessionId(params: {
-  previousSelectedSessionKey: string | null | undefined;
-  nextSelectedSessionKey: string | null;
+export function shouldClearPendingProjectRootOverride(params: {
+  pendingProjectRoot: string | null;
+  pendingProjectRootSessionKey: string | null;
+  sessionKey: string | null | undefined;
+  selectedSessionProjectRoot: string | null | undefined;
 }): boolean {
+  const {
+    pendingProjectRoot,
+    pendingProjectRootSessionKey,
+    sessionKey,
+    selectedSessionProjectRoot,
+  } = params;
   return (
-    params.nextSelectedSessionKey === null &&
-    params.previousSelectedSessionKey !== undefined &&
-    params.previousSelectedSessionKey !== null
+    pendingProjectRoot !== null &&
+    pendingProjectRootSessionKey !== null &&
+    sessionKey === pendingProjectRootSessionKey &&
+    (selectedSessionProjectRoot ?? null) === pendingProjectRoot
   );
 }
 
 export function NcpChatPage({ view }: ChatPageProps) {
-  const [presenter] = useState(() => new NcpChatPresenter());
-  const [draftSessionId, setDraftSessionId] = useState(() =>
-    createNcpSessionId(),
-  );
+  const presenterRef = useRef<NcpChatPresenter | null>(null);
+  if (!presenterRef.current) {
+    presenterRef.current = new NcpChatPresenter();
+  }
+  const presenter = presenterRef.current;
   const query = useChatSessionListStore((state) => state.snapshot.query);
   const selectedSessionKey = useChatSessionListStore(
     (state) => state.snapshot.selectedSessionKey,
   );
+  const draftSessionKey = useChatSessionListStore(
+    (state) => state.snapshot.draftSessionKey,
+  );
   const selectedAgentId = useChatSessionListStore(
     (state) => state.snapshot.selectedAgentId,
   );
@@ -123,15 +134,13 @@ export function NcpChatPage({ view }: ChatPageProps) {
   }>();
   const threadRef = useRef<HTMLDivElement | null>(null);
   const selectedSessionKeyRef = useRef<string | null>(selectedSessionKey);
-  const previousSelectedSessionKeyRef = useRef<string | null | undefined>(
-    undefined,
-  );
   const routeSessionKey = useMemo(
     () => parseSessionKeyFromRoute(routeSessionIdParam),
     [routeSessionIdParam],
   );
-  const sessionKey = selectedSessionKey ?? draftSessionId;
+  const sessionKey = routeSessionKey ?? selectedSessionKey ?? draftSessionKey;
   const hasSessionProjectRootOverride =
+    pendingProjectRoot !== null &&
     pendingProjectRootSessionKey === sessionKey;
   const sessionProjectRootOverride = hasSessionProjectRootOverride
     ? pendingProjectRoot
@@ -163,25 +172,6 @@ export function NcpChatPage({ view }: ChatPageProps) {
 
   const agent = useNcpSessionConversation(sessionKey);
 
-  useEffect(() => {
-    presenter.setDraftSessionId(draftSessionId);
-  }, [draftSessionId, presenter]);
-
-  useEffect(() => {
-    if (
-      shouldRefreshDraftSessionId({
-        previousSelectedSessionKey:
-          previousSelectedSessionKeyRef.current,
-        nextSelectedSessionKey: selectedSessionKey,
-      })
-    ) {
-      const nextDraftSessionId = createNcpSessionId();
-      setDraftSessionId(nextDraftSessionId);
-      presenter.setDraftSessionId(nextDraftSessionId);
-    }
-    previousSelectedSessionKeyRef.current = selectedSessionKey;
-  }, [presenter, selectedSessionKey]);
-
   const effectiveSessionProjectRoot = hasSessionProjectRootOverride
     ? pendingProjectRoot
     : (selectedSession?.projectRoot ?? null);
@@ -265,6 +255,7 @@ export function NcpChatPage({ view }: ChatPageProps) {
     pendingProjectRoot,
     pendingProjectRootSessionKey,
     presenter,
+    selectedSessionKey,
     selectedSession?.projectRoot,
     sessionKey,
   ]);
@@ -272,8 +263,12 @@ export function NcpChatPage({ view }: ChatPageProps) {
   useEffect(() => {
     if (
       !selectedSession ||
-      pendingProjectRootSessionKey !== selectedSession.key ||
-      (selectedSession.projectRoot ?? null) !== pendingProjectRoot
+      !shouldClearPendingProjectRootOverride({
+        pendingProjectRoot,
+        pendingProjectRootSessionKey,
+        sessionKey: selectedSession.key,
+        selectedSessionProjectRoot: selectedSession.projectRoot ?? null,
+      })
     ) {
       return;
     }
@@ -281,7 +276,7 @@ export function NcpChatPage({ view }: ChatPageProps) {
       pendingProjectRoot: null,
       pendingProjectRootSessionKey: null,
     });
-  }, [pendingProjectRoot, pendingProjectRootSessionKey, selectedSession]);
+  }, [pendingProjectRoot, pendingProjectRootSessionKey, selectedSession, selectedSessionKey]);
 
   useChatSessionSync({
     view,

package/src/components/chat/ncp/ncp-chat-input.manager.ts

@@ -18,6 +18,7 @@ import { useChatSessionListStore } from '@/components/chat/stores/chat-session-l
 import type { ChatInputSnapshot } from '@/components/chat/stores/chat-input.store';
 import type { ChatStreamActionsManager } from '@/components/chat/managers/chat-stream-actions.manager';
 import type { ChatUiManager } from '@/components/chat/managers/chat-ui.manager';
+import type { ChatSessionListManager } from '@/components/chat/managers/chat-session-list.manager';
 import { ChatSessionPreferenceSync } from '@/components/chat/chat-session-preference-sync';
 import { chatRecentModelsManager } from '@/components/chat/chat-recent-models.manager';
 import { chatRecentSkillsManager } from '@/components/chat/chat-recent-skills.manager';
@@ -40,7 +41,7 @@ export class NcpChatInputManager {
   constructor(
     private uiManager: ChatUiManager,
     private streamActionsManager: ChatStreamActionsManager,
-    private getDraftSessionId: () => string
+    private sessionListManager: ChatSessionListManager
   ) {}
 
   private hasSnapshotChanges = (patch: Partial<ChatInputSnapshot>): boolean => {
@@ -179,10 +180,7 @@ export class NcpChatInputManager {
       return;
     }
     const { selectedSkills: requestedSkills, composerNodes } = inputSnapshot;
-    const sessionKey = sessionSnapshot.selectedSessionKey ?? this.getDraftSessionId();
-    if (!sessionSnapshot.selectedSessionKey) {
-      this.uiManager.goToSession(sessionKey, { replace: true });
-    }
+    const sessionKey = sessionSnapshot.selectedSessionKey ?? this.sessionListManager.ensureDraftSession(inputSnapshot.selectedSessionType);
     this.setComposerNodes(createInitialChatComposerNodes());
     await this.streamActionsManager.sendMessage({
       message,

package/src/components/chat/ncp/ncp-chat-page-data.ts

@@ -116,7 +116,6 @@ export function useNcpChatPageData(params: UseNcpChatPageDataParams) {
   );
   const sessionTypeState = useChatSessionTypeState({
     selectedSession,
-    selectedSessionKey: params.sessionKey,
     pendingSessionType: params.pendingSessionType,
     setPendingSessionType: params.setPendingSessionType,
     sessionTypesData: sessionTypesQuery.data

package/src/components/chat/ncp/ncp-chat.presenter.ts

@@ -7,29 +7,15 @@ import { NcpChatThreadManager } from '@/components/chat/ncp/ncp-chat-thread.mana
 export class NcpChatPresenter {
   chatUiManager = new ChatUiManager();
   chatStreamActionsManager = new ChatStreamActionsManager();
-  chatSessionListManager = new ChatSessionListManager(
-    this.chatUiManager,
-    this.chatStreamActionsManager,
-    () => this.getDraftSessionId()
-  );
+  chatSessionListManager = new ChatSessionListManager(this.chatUiManager, this.chatStreamActionsManager);
   chatInputManager = new NcpChatInputManager(
     this.chatUiManager,
     this.chatStreamActionsManager,
-    () => this.getDraftSessionId()
+    this.chatSessionListManager
   );
   chatThreadManager = new NcpChatThreadManager(
     this.chatUiManager,
     this.chatSessionListManager,
     this.chatStreamActionsManager
   );
-
-  private draftSessionId = '';
-
-  setDraftSessionId = (sessionId: string) => {
-    this.draftSessionId = sessionId;
-  };
-
-  private getDraftSessionId(): string {
-    return this.draftSessionId;
-  }
 }

package/src/components/chat/ncp/session-conversation/use-ncp-child-session-tabs-view.ts

@@ -1,15 +1,20 @@
-import { useMemo } from 'react';
-import type { SessionEntryView } from '@/api/types';
-import { sessionDisplayName } from '@/components/chat/chat-session-display';
-import { adaptNcpSessionSummaries } from '@/components/chat/ncp/ncp-session-adapter';
-import type { ChatChildSessionTab } from '@/components/chat/stores/chat-thread.store';
-import { useNcpSessions } from '@/hooks/useConfig';
+import { useMemo } from "react";
+import type { SessionEntryView } from "@/api/types";
+import { sessionDisplayName } from "@/components/chat/chat-session-display";
+import { adaptNcpSessionSummaries } from "@/components/chat/ncp/ncp-session-adapter";
+import { resolveSessionTypeLabel } from "@/components/chat/useChatSessionTypeState";
+import type { ChatChildSessionTab } from "@/components/chat/stores/chat-thread.store";
+import { useNcpSessions } from "@/hooks/useConfig";
 
 export type ResolvedChildSessionTab = {
   sessionKey: string;
   parentSessionKey: string | null;
   title: string;
   agentId: string | null;
+  sessionTypeLabel: string | null;
+  preferredModel: string | null;
+  projectName: string | null;
+  projectRoot: string | null;
 };
 
 function resolveChildSessionTitle(
@@ -31,7 +36,9 @@ export function useNcpChildSessionTabsView(
   const sessionsQuery = useNcpSessions({ limit: 200 });
 
   const sessionByKey = useMemo(() => {
-    const sessions = adaptNcpSessionSummaries(sessionsQuery.data?.sessions ?? []);
+    const sessions = adaptNcpSessionSummaries(
+      sessionsQuery.data?.sessions ?? [],
+    );
     return new Map(sessions.map((session) => [session.key, session]));
   }, [sessionsQuery.data?.sessions]);
 
@@ -45,6 +52,12 @@ export function useNcpChildSessionTabsView(
           parentSessionKey: tab.parentSessionKey,
           title: resolveChildSessionTitle(tab, session),
           agentId,
+          sessionTypeLabel: session?.sessionType
+            ? resolveSessionTypeLabel(session.sessionType)
+            : null,
+          preferredModel: session?.preferredModel?.trim() || null,
+          projectName: session?.projectName?.trim() || null,
+          projectRoot: session?.projectRoot?.trim() || null,
         };
       }),
     [sessionByKey, tabs],

package/src/components/chat/session-header/chat-session-project-badge.test.tsx

@@ -40,6 +40,22 @@ describe('ChatSessionProjectBadge', () => {
     expect(screen.getByText('/tmp/project-alpha')).toBeTruthy();
   });
 
+  it('uses the neutral header tag styling instead of a highlighted accent color', () => {
+    render(
+      <ChatSessionProjectBadge
+        sessionKey="session-1"
+        projectName="project-alpha"
+        projectRoot="/tmp/project-alpha"
+        persistToServer
+      />
+    );
+
+    const trigger = screen.getByRole('button', { name: 'Set Project Directory' });
+    expect(trigger.className).toContain('border-gray-200');
+    expect(trigger.className).toContain('text-gray-600');
+    expect(trigger.className).not.toContain('emerald');
+  });
+
   it('clears the current project from the badge popover', async () => {
     const user = userEvent.setup();
 

package/src/components/chat/session-header/chat-session-project-badge.tsx

@@ -46,7 +46,7 @@ export function ChatSessionProjectBadge({
           <button
             type="button"
             title={projectRoot ?? undefined}
-            className="min-w-0 max-w-[320px] shrink rounded-full border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-[11px] font-medium text-emerald-700 transition-colors hover:border-emerald-300 hover:bg-emerald-100 disabled:cursor-not-allowed disabled:opacity-60"
+            className="min-w-0 max-w-[320px] shrink rounded-full border border-gray-200 bg-gray-100/90 px-2 py-0.5 text-[11px] font-medium text-gray-600 transition-colors hover:border-gray-300 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-60"
             aria-label={t('chatSessionSetProject')}
             disabled={isProjectPending}
           >
@@ -59,7 +59,7 @@ export function ChatSessionProjectBadge({
         </PopoverTrigger>
         <PopoverContent align="start" className="w-72 p-2">
           <div className="px-3 pb-2 pt-1">
-            <div className="text-[11px] font-medium uppercase tracking-wider text-emerald-700/80">
+            <div className="text-[11px] font-medium uppercase tracking-wider text-gray-500">
               {projectName}
             </div>
             {projectRoot ? (

package/src/components/chat/stores/chat-session-list.store.ts

@@ -1,9 +1,11 @@
 import { create } from 'zustand';
+import { createNcpSessionId } from '@/components/chat/ncp/ncp-session-adapter';
 
 export type ChatSessionListMode = 'time-first' | 'project-first';
 
 export type ChatSessionListSnapshot = {
   selectedSessionKey: string | null;
+  draftSessionKey: string;
   selectedAgentId: string;
   query: string;
   listMode: ChatSessionListMode;
@@ -16,6 +18,7 @@ type ChatSessionListStore = {
 
 const initialSnapshot: ChatSessionListSnapshot = {
   selectedSessionKey: null,
+  draftSessionKey: createNcpSessionId(),
   selectedAgentId: 'main',
   query: '',
   listMode: 'time-first'

package/src/components/chat/useChatSessionTypeState.test.tsx

@@ -17,7 +17,6 @@ describe('useChatSessionTypeState', () => {
     const { result } = renderHook(() =>
       useChatSessionTypeState({
         selectedSession: null,
-        selectedSessionKey: null,
         pendingSessionType: 'codex-sdk',
         setPendingSessionType,
         sessionTypesData: {
@@ -40,7 +39,6 @@ describe('useChatSessionTypeState', () => {
     renderHook(() =>
       useChatSessionTypeState({
         selectedSession: null,
-        selectedSessionKey: null,
         pendingSessionType: '',
         setPendingSessionType,
         sessionTypesData: {
@@ -62,7 +60,6 @@ describe('useChatSessionTypeState', () => {
     const { result } = renderHook(() =>
       useChatSessionTypeState({
         selectedSession: null,
-        selectedSessionKey: null,
         pendingSessionType: 'claude',
         setPendingSessionType,
         sessionTypesData: {

package/src/components/chat/useChatSessionTypeState.ts

@@ -22,7 +22,6 @@ export type ChatSessionTypeOption = {
 
 type UseChatSessionTypeStateParams = {
   selectedSession: SessionEntryView | null;
-  selectedSessionKey: string | null;
   pendingSessionType: string;
   setPendingSessionType: Dispatch<SetStateAction<string>>;
   sessionTypesData?: {
@@ -114,7 +113,6 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
 } {
   const {
     selectedSession,
-    selectedSessionKey,
     pendingSessionType,
     setPendingSessionType,
     sessionTypesData
@@ -164,7 +162,7 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
   );
 
   useEffect(() => {
-    if (selectedSessionKey) {
+    if (selectedSession) {
       return;
     }
     const rawPending = typeof pendingSessionType === 'string' ? pendingSessionType.trim() : '';
@@ -181,9 +179,9 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
       return;
     }
     setPendingSessionType(defaultSessionType);
-  }, [defaultSessionType, pendingSessionType, selectedSessionKey, setPendingSessionType]);
+  }, [defaultSessionType, pendingSessionType, selectedSession, setPendingSessionType]);
 
-  const canEditSessionType = !selectedSessionKey || Boolean(selectedSession?.sessionTypeMutable);
+  const canEditSessionType = !selectedSession || Boolean(selectedSession.sessionTypeMutable);
   const availableSessionTypeSet = useMemo(
     () => new Set(runtimeSessionTypeOptions.map((option) => option.value)),
     [runtimeSessionTypeOptions]

package/src/components/config/ChannelsList.test.tsx

@@ -100,6 +100,31 @@ describe('ChannelsList', () => {
     mocks.updateChannelMutateAsync.mockReset();
     mocks.startChannelAuthMutateAsync.mockReset();
     mocks.pollChannelAuthMutateAsync.mockReset();
+    mocks.configQuery.data = {
+      channels: {
+        weixin: {
+          enabled: false,
+          defaultAccountId: '1344b2b24720@im.bot',
+          baseUrl: 'https://ilinkai.weixin.qq.com',
+          pollTimeoutMs: 35000,
+          allowFrom: ['o9cq804svxfyCCTIqzddDqRBeMC0@im.wechat'],
+          accounts: {
+            '1344b2b24720@im.bot': {
+              enabled: true
+            }
+          }
+        }
+      }
+    };
+    mocks.metaQuery.data = {
+      channels: [
+        {
+          name: 'weixin',
+          displayName: 'Weixin',
+          enabled: false
+        }
+      ]
+    };
   });
 
   it('renders weixin qr auth card and starts channel auth', async () => {
@@ -140,6 +165,49 @@ describe('ChannelsList', () => {
     });
   });
 
+  it('keeps Weixin, Feishu, Discord, and QQ at the front of the channel list', async () => {
+    const user = userEvent.setup();
+    mocks.configQuery.data = {
+      channels: {
+        telegram: { enabled: false },
+        qq: { enabled: false },
+        discord: { enabled: false },
+        weixin: { enabled: false },
+        feishu: { enabled: false }
+      }
+    } as unknown as typeof mocks.configQuery.data;
+    mocks.metaQuery.data = {
+      channels: [
+        { name: 'telegram', displayName: 'Telegram', enabled: false },
+        { name: 'qq', displayName: 'QQ', enabled: false },
+        { name: 'discord', displayName: 'Discord', enabled: false },
+        { name: 'weixin', displayName: 'Weixin', enabled: false },
+        { name: 'feishu', displayName: 'Feishu', enabled: false }
+      ]
+    } as typeof mocks.metaQuery.data;
+
+    const { container } = render(<ChannelsList />);
+
+    await user.click(await screen.findByRole('button', { name: /All Channels/i }));
+
+    const sidebarSection = container.querySelector('section');
+    if (!(sidebarSection instanceof HTMLElement)) {
+      throw new Error('channel sidebar not found');
+    }
+
+    const channelButtons = Array.from(sidebarSection.querySelectorAll('button[type="button"]')).filter((button) => (
+      ['Weixin', 'Feishu', 'Discord', 'QQ', 'Telegram'].some((label) => button.textContent?.includes(label))
+    ));
+
+    expect(channelButtons.map((button) => button.textContent)).toEqual([
+      expect.stringContaining('Weixin'),
+      expect.stringContaining('Feishu'),
+      expect.stringContaining('Discord'),
+      expect.stringContaining('QQ'),
+      expect.stringContaining('Telegram')
+    ]);
+  });
+
   it('saves weixin advanced settings from the advanced section', async () => {
     const user = userEvent.setup();
 

package/src/components/config/ChannelsList.tsx

@@ -24,6 +24,24 @@ const channelDescriptionKeys: Record<string, string> = {
   weixin: 'channelDescWeixin'
 };
 
+const prioritizedChannelNames = ['weixin', 'feishu', 'discord', 'qq'] as const;
+
+function sortChannelsForDisplay<T extends { name: string }>(channels: T[]): T[] {
+  const priorityByName = new Map<string, number>(prioritizedChannelNames.map((name, index) => [name, index]));
+
+  return channels
+    .map((channel, index) => ({ channel, index }))
+    .sort((left, right) => {
+      const leftPriority = priorityByName.get(left.channel.name) ?? Number.POSITIVE_INFINITY;
+      const rightPriority = priorityByName.get(right.channel.name) ?? Number.POSITIVE_INFINITY;
+      if (leftPriority !== rightPriority) {
+        return leftPriority - rightPriority;
+      }
+      return left.index - right.index;
+    })
+    .map(({ channel }) => channel);
+}
+
 export function ChannelsList() {
   const { data: config } = useConfig();
   const { data: meta } = useConfigMeta();
@@ -32,17 +50,17 @@ export function ChannelsList() {
   const [selectedChannel, setSelectedChannel] = useState<string | undefined>();
   const [query, setQuery] = useState('');
   const uiHints = schema?.uiHints;
-  const channels = meta?.channels;
+  const channels = useMemo(() => sortChannelsForDisplay(meta?.channels ?? []), [meta?.channels]);
   const channelConfigs = config?.channels;
 
   const tabs = [
-    { id: 'enabled', label: t('channelsTabEnabled'), count: (channels ?? []).filter((c) => channelConfigs?.[c.name]?.enabled).length },
-    { id: 'all', label: t('channelsTabAll'), count: (channels ?? []).length }
+    { id: 'enabled', label: t('channelsTabEnabled'), count: channels.filter((c) => channelConfigs?.[c.name]?.enabled).length },
+    { id: 'all', label: t('channelsTabAll'), count: channels.length }
   ];
 
   const filteredChannels = useMemo(() => {
     const keyword = query.trim().toLowerCase();
-    return (channels ?? [])
+    return channels
       .filter((channel) => {
         const enabled = channelConfigs?.[channel.name]?.enabled || false;
         if (activeTab === 'enabled') {

package/src/components/config/ProvidersList.tsx

@@ -26,6 +26,20 @@ function formatBasePreview(base?: string | null): string | null {
   }
 }
 
+function sortProvidersForDisplay<T extends { name: string }>(providers: T[]): T[] {
+  return providers
+    .map((provider, index) => ({ provider, index }))
+    .sort((left, right) => {
+      const leftPriority = left.provider.name === 'nextclaw' ? 1 : 0;
+      const rightPriority = right.provider.name === 'nextclaw' ? 1 : 0;
+      if (leftPriority !== rightPriority) {
+        return leftPriority - rightPriority;
+      }
+      return left.index - right.index;
+    })
+    .map(({ provider }) => provider);
+}
+
 export function ProvidersList() {
   const { data: config } = useConfig();
   const { data: meta } = useConfigMeta();
@@ -37,7 +51,7 @@ export function ProvidersList() {
   const [query, setQuery] = useState('');
 
   const uiHints = schema?.uiHints;
-  const providers = meta?.providers ?? [];
+  const providers = useMemo(() => sortProvidersForDisplay(meta?.providers ?? []), [meta?.providers]);
   const providersConfig = config?.providers ?? {};
   const configuredCount = providers.filter((provider) => {
     const current = providersConfig[provider.name];
@@ -50,7 +64,7 @@ export function ProvidersList() {
   ];
 
   const filteredProviders = useMemo(() => {
-    const baseProviders = meta?.providers ?? [];
+    const baseProviders = providers;
     const baseConfig = config?.providers ?? {};
     const keyword = query.trim().toLowerCase();
     return baseProviders
@@ -69,7 +83,7 @@ export function ProvidersList() {
         const display = (configDisplayName || provider.displayName || provider.name).toLowerCase();
         return display.includes(keyword) || provider.name.toLowerCase().includes(keyword);
       });
-  }, [meta, config, activeTab, query]);
+  }, [providers, config, activeTab, query]);
 
   useEffect(() => {
     if (filteredProviders.length === 0) {

package/src/components/config/providers-list.test.tsx

@@ -0,0 +1,68 @@
+import { render } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { ProvidersList } from '@/components/config/ProvidersList';
+
+const mocks = vi.hoisted(() => ({
+  createProviderMutateAsync: vi.fn(),
+  configQuery: {
+    data: {
+      providers: {
+        openai: { enabled: true, apiKeySet: true },
+        anthropic: { enabled: true, apiKeySet: true },
+        nextclaw: { enabled: true, apiKeySet: true }
+      }
+    },
+    isLoading: false
+  },
+  metaQuery: {
+    data: {
+      providers: [
+        { name: 'nextclaw', displayName: 'NextClaw Builtin', defaultApiBase: 'https://ai-gateway-api.nextclaw.io/v1' },
+        { name: 'openai', displayName: 'OpenAI', defaultApiBase: 'https://api.openai.com/v1' },
+        { name: 'anthropic', displayName: 'Anthropic', defaultApiBase: 'https://api.anthropic.com/v1' }
+      ]
+    }
+  },
+  schemaQuery: {
+    data: {
+      uiHints: {}
+    }
+  }
+}));
+
+vi.mock('@/hooks/useConfig', () => ({
+  useConfig: () => mocks.configQuery,
+  useConfigMeta: () => mocks.metaQuery,
+  useConfigSchema: () => mocks.schemaQuery,
+  useCreateProvider: () => ({
+    mutateAsync: mocks.createProviderMutateAsync,
+    isPending: false
+  })
+}));
+
+vi.mock('@/components/config/ProviderForm', () => ({
+  ProviderForm: ({ providerName }: { providerName?: string }) => (
+    <div data-testid="provider-form">{providerName ?? 'none'}</div>
+  )
+}));
+
+describe('ProvidersList', () => {
+  it('keeps the nextclaw builtin provider at the end of the list', () => {
+    const { container } = render(<ProvidersList />);
+
+    const sidebarSection = container.querySelector('section');
+    if (!(sidebarSection instanceof HTMLElement)) {
+      throw new Error('provider sidebar not found');
+    }
+
+    const providerButtons = Array.from(sidebarSection.querySelectorAll('button[type="button"]')).filter((button) => (
+      ['OpenAI', 'Anthropic', 'NextClaw Builtin'].some((label) => button.textContent?.includes(label))
+    ));
+
+    expect(providerButtons.map((button) => button.textContent)).toEqual([
+      expect.stringContaining('OpenAI'),
+      expect.stringContaining('Anthropic'),
+      expect.stringContaining('NextClaw Builtin')
+    ]);
+  });
+});