@nextclaw/ui 0.12.4 → 0.12.6

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/ProviderForm.tsx

@@ -143,6 +143,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     () => providerAuth?.methods ?? [],
     [providerAuth?.methods]
   );
+  const supportsWireApi = Boolean(providerSpec?.supportsWireApi) || isCustomProvider;
   const providerAuthMethodOptions = useMemo(
     () =>
       providerAuthMethods.map((method) => ({
@@ -174,25 +175,18 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     () => providerAuthMethods.find((method) => method.id === resolvedAuthMethodId),
     [providerAuthMethods, resolvedAuthMethodId]
   );
-  const selectedAuthMethodHint =
-    selectedAuthMethod?.hint?.[language] || selectedAuthMethod?.hint?.en || '';
   const shouldUseAuthMethodPills = shouldUsePillSelector({
     required: providerAuth?.kind === 'device_code',
     hasDefault: Boolean(providerAuth?.defaultMethodId?.trim()),
     optionCount: providerAuthMethods.length
   });
-  const providerAuthNote =
-    providerAuth?.note?.[language] ||
-    providerAuth?.note?.en ||
-    providerAuth?.displayName ||
-    '';
   const wireApiOptions = providerSpec?.wireApiOptions || ['auto', 'chat', 'responses'];
   const wireApiSelectOptions: PillSelectOption[] = wireApiOptions.map((option) => ({
     value: option,
     label: option === 'chat' ? t('wireApiChat') : option === 'responses' ? t('wireApiResponses') : t('wireApiAuto')
   }));
   const shouldUseWireApiPills = shouldUsePillSelector({
-    required: Boolean(providerSpec?.supportsWireApi),
+    required: supportsWireApi,
     hasDefault: typeof providerSpec?.defaultWireApi === 'string' && providerSpec.defaultWireApi.length > 0,
     optionCount: wireApiSelectOptions.length
   });
@@ -302,7 +296,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     const apiKeyChanged = apiKey.trim().length > 0;
     const apiBaseChanged = apiBase.trim() !== currentApiBase.trim();
     const headersChanged = !headersEqual(extraHeaders, currentHeaders);
-    const wireApiChanged = providerSpec?.supportsWireApi ? wireApi !== currentWireApi : false;
+    const wireApiChanged = supportsWireApi ? wireApi !== currentWireApi : false;
     const modelsChanged = !modelListsEqual(models, currentEditableModels);
     const modelThinkingChanged = !modelThinkingEqual(modelThinking, currentModelThinking);
     const displayNameChanged = isCustomProvider
@@ -331,7 +325,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     currentApiBase,
     extraHeaders,
     currentHeaders,
-    providerSpec?.supportsWireApi,
+    supportsWireApi,
     wireApi,
     currentWireApi,
     models,
@@ -422,7 +416,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
       payload.extraHeaders = normalizedHeaders;
     }
 
-    if (providerSpec?.supportsWireApi && wireApi !== currentWireApi) {
+    if (supportsWireApi && wireApi !== currentWireApi) {
       payload.wireApi = wireApi;
     }
     if (!modelListsEqual(models, currentEditableModels)) {
@@ -450,7 +444,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     if (apiKey.trim().length > 0) {
       payload.apiKey = apiKey.trim();
     }
-    if (providerSpec?.supportsWireApi) {
+    if (supportsWireApi) {
       payload.wireApi = wireApi;
     }
 
@@ -608,10 +602,10 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
 
           <ProviderAuthSection
             providerAuth={providerAuth}
-            providerAuthNote={providerAuthNote}
+            providerAuthNote={providerAuth?.note?.[language] || providerAuth?.note?.en || providerAuth?.displayName || ''}
             providerAuthMethodOptions={providerAuthMethodOptions}
             providerAuthMethodsCount={providerAuthMethods.length}
-            selectedAuthMethodHint={selectedAuthMethodHint}
+            selectedAuthMethodHint={selectedAuthMethod?.hint?.[language] || selectedAuthMethod?.hint?.en || ''}
             shouldUseAuthMethodPills={shouldUseAuthMethodPills}
             resolvedAuthMethodId={resolvedAuthMethodId}
             onAuthMethodChange={setAuthMethodId}
@@ -663,7 +657,7 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
           <ProviderAdvancedSettingsSection
             showAdvanced={showAdvanced}
             onShowAdvancedChange={setShowAdvanced}
-            supportsWireApi={Boolean(providerSpec.supportsWireApi)}
+            supportsWireApi={supportsWireApi}
             wireApiLabel={wireApiHint?.label ?? t('wireApi')}
             wireApi={wireApi}
             onWireApiChange={setWireApi}

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/desktop-update-config.tsx

@@ -0,0 +1,230 @@
+import { useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { PageHeader, PageLayout } from '@/components/layout/page-layout';
+import { desktopUpdateManager } from '@/desktop/managers/desktop-update.manager';
+import { useDesktopUpdateStore } from '@/desktop/stores/desktop-update.store';
+import { formatDateTime, t } from '@/lib/i18n';
+import { cn } from '@/lib/utils';
+import { Download, ExternalLink, RefreshCw, RotateCw } from 'lucide-react';
+
+function formatVersion(value: string | null): string {
+  return value?.trim() || '-';
+}
+
+function formatLastCheckedAt(value: string | null): string {
+  return value ? formatDateTime(value) : '-';
+}
+
+function getStatusLabel(status: string): string {
+  if (status === 'checking') {
+    return t('desktopUpdatesStatusChecking');
+  }
+  if (status === 'update-available') {
+    return t('desktopUpdatesStatusAvailable');
+  }
+  if (status === 'downloading') {
+    return t('desktopUpdatesStatusDownloading');
+  }
+  if (status === 'downloaded') {
+    return t('desktopUpdatesStatusDownloaded');
+  }
+  if (status === 'up-to-date') {
+    return t('desktopUpdatesStatusUpToDate');
+  }
+  if (status === 'failed') {
+    return t('desktopUpdatesStatusFailed');
+  }
+  return t('desktopUpdatesStatusIdle');
+}
+
+function getStatusTone(status: string): string {
+  if (status === 'downloaded') {
+    return 'bg-emerald-50 text-emerald-700 ring-emerald-100';
+  }
+  if (status === 'update-available' || status === 'downloading' || status === 'checking') {
+    return 'bg-amber-50 text-amber-700 ring-amber-100';
+  }
+  if (status === 'failed') {
+    return 'bg-red-50 text-red-700 ring-red-100';
+  }
+  return 'bg-gray-100 text-gray-700 ring-gray-200';
+}
+
+export function DesktopUpdateConfig() {
+  const { supported, initialized, busyAction, snapshot } = useDesktopUpdateStore();
+
+  useEffect(() => {
+    void desktopUpdateManager.start();
+    return () => {
+      desktopUpdateManager.stop();
+    };
+  }, []);
+
+  if (!initialized) {
+    return <div className="p-8 text-gray-400">{t('loading')}</div>;
+  }
+
+  if (!supported || !snapshot) {
+    return (
+      <PageLayout className="space-y-6">
+        <PageHeader
+          title={t('desktopUpdatesPageTitle')}
+          description={t('desktopUpdatesPageDescription')}
+        />
+        <Card>
+          <CardHeader>
+            <CardTitle>{t('desktopUpdatesDesktopOnlyTitle')}</CardTitle>
+            <CardDescription>{t('desktopUpdatesDesktopOnlyDescription')}</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-gray-500">{t('desktopUpdatesDesktopOnlyFutureHint')}</p>
+          </CardContent>
+        </Card>
+      </PageLayout>
+    );
+  }
+
+  const isChecking = busyAction === 'checking';
+  const isDownloading = busyAction === 'downloading';
+  const isApplying = busyAction === 'applying';
+  const isSavingPreferences = busyAction === 'saving-preferences';
+  const canDownload = snapshot.status === 'update-available' && !isDownloading && !isApplying;
+  const canApply = snapshot.status === 'downloaded' && !isApplying;
+
+  return (
+    <PageLayout className="space-y-6">
+      <PageHeader
+        title={t('desktopUpdatesPageTitle')}
+        description={t('desktopUpdatesPageDescription')}
+        actions={(
+          <Button
+            variant="outline"
+            onClick={() => void desktopUpdateManager.checkForUpdates()}
+            disabled={isChecking || isDownloading || isApplying}
+          >
+            <RefreshCw className={cn('mr-2 h-4 w-4', isChecking && 'animate-spin')} />
+            {t('desktopUpdatesCheckNow')}
+          </Button>
+        )}
+      />
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('desktopUpdatesOverviewTitle')}</CardTitle>
+          <CardDescription>{t('desktopUpdatesOverviewDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-5">
+          <div className="flex flex-wrap items-center gap-3">
+            <span className="text-sm font-medium text-gray-700">{t('desktopUpdatesStatusLabel')}</span>
+            <span className={cn('inline-flex rounded-full px-3 py-1 text-xs font-medium ring-1', getStatusTone(snapshot.status))}>
+              {getStatusLabel(snapshot.status)}
+            </span>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+            <div className="rounded-xl border border-gray-200 bg-gray-50/60 p-4">
+              <p className="text-xs font-medium uppercase tracking-[0.08em] text-gray-500">{t('desktopUpdatesLauncherVersion')}</p>
+              <p className="mt-2 text-base font-semibold text-gray-900">{formatVersion(snapshot.launcherVersion)}</p>
+            </div>
+            <div className="rounded-xl border border-gray-200 bg-gray-50/60 p-4">
+              <p className="text-xs font-medium uppercase tracking-[0.08em] text-gray-500">{t('desktopUpdatesCurrentBundleVersion')}</p>
+              <p className="mt-2 text-base font-semibold text-gray-900">{formatVersion(snapshot.currentVersion)}</p>
+            </div>
+            <div className="rounded-xl border border-gray-200 bg-gray-50/60 p-4">
+              <p className="text-xs font-medium uppercase tracking-[0.08em] text-gray-500">{t('desktopUpdatesAvailableVersion')}</p>
+              <p className="mt-2 text-base font-semibold text-gray-900">{formatVersion(snapshot.availableVersion)}</p>
+            </div>
+            <div className="rounded-xl border border-gray-200 bg-gray-50/60 p-4">
+              <p className="text-xs font-medium uppercase tracking-[0.08em] text-gray-500">{t('desktopUpdatesLastCheckedAt')}</p>
+              <p className="mt-2 text-base font-semibold text-gray-900">{formatLastCheckedAt(snapshot.lastCheckedAt)}</p>
+            </div>
+          </div>
+
+          {snapshot.downloadedVersion ? (
+            <div className="rounded-2xl border border-emerald-200 bg-emerald-50/70 p-4">
+              <p className="text-sm font-semibold text-emerald-800">{t('desktopUpdatesDownloadedBannerTitle')}</p>
+              <p className="mt-1 text-sm text-emerald-700">
+                {t('desktopUpdatesDownloadedBannerDescription').replace('{version}', snapshot.downloadedVersion)}
+              </p>
+            </div>
+          ) : null}
+
+          {snapshot.errorMessage ? (
+            <div className="rounded-2xl border border-red-200 bg-red-50/70 p-4 text-sm text-red-700">
+              {snapshot.errorMessage}
+            </div>
+          ) : null}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('desktopUpdatesPreferencesTitle')}</CardTitle>
+          <CardDescription>{t('desktopUpdatesPreferencesDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-5">
+          <div className="flex items-start justify-between gap-4 rounded-xl border border-gray-200 p-4">
+            <div className="space-y-1">
+              <Label>{t('desktopUpdatesAutomaticChecks')}</Label>
+              <p className="text-sm text-gray-500">{t('desktopUpdatesAutomaticChecksHelp')}</p>
+            </div>
+            <Switch
+              checked={snapshot.preferences.automaticChecks}
+              disabled={isSavingPreferences}
+              onCheckedChange={(checked) => void desktopUpdateManager.updatePreferences({ automaticChecks: checked })}
+            />
+          </div>
+
+          <div className="flex items-start justify-between gap-4 rounded-xl border border-gray-200 p-4">
+            <div className="space-y-1">
+              <Label>{t('desktopUpdatesAutoDownload')}</Label>
+              <p className="text-sm text-gray-500">{t('desktopUpdatesAutoDownloadHelp')}</p>
+            </div>
+            <Switch
+              checked={snapshot.preferences.autoDownload}
+              disabled={isSavingPreferences}
+              onCheckedChange={(checked) => void desktopUpdateManager.updatePreferences({ autoDownload: checked })}
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('desktopUpdatesActionsTitle')}</CardTitle>
+          <CardDescription>{t('desktopUpdatesActionsDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap items-center gap-3">
+          <Button
+            variant="outline"
+            onClick={() => void desktopUpdateManager.checkForUpdates()}
+            disabled={isChecking || isDownloading || isApplying}
+          >
+            <RefreshCw className={cn('mr-2 h-4 w-4', isChecking && 'animate-spin')} />
+            {t('desktopUpdatesCheckNow')}
+          </Button>
+
+          <Button onClick={() => void desktopUpdateManager.downloadUpdate()} disabled={!canDownload}>
+            <Download className={cn('mr-2 h-4 w-4', isDownloading && 'animate-bounce')} />
+            {t('desktopUpdatesDownloadNow')}
+          </Button>
+
+          <Button variant="secondary" onClick={() => void desktopUpdateManager.applyDownloadedUpdate()} disabled={!canApply}>
+            <RotateCw className={cn('mr-2 h-4 w-4', isApplying && 'animate-spin')} />
+            {t('desktopUpdatesApplyNow')}
+          </Button>
+
+          {snapshot.releaseNotesUrl ? (
+            <Button variant="ghost" onClick={() => window.open(snapshot.releaseNotesUrl ?? '', '_blank', 'noopener,noreferrer')}>
+              <ExternalLink className="mr-2 h-4 w-4" />
+              {t('desktopUpdatesReleaseNotes')}
+            </Button>
+          ) : null}
+        </CardContent>
+      </Card>
+    </PageLayout>
+  );
+}

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')
+    ]);
+  });
+});

package/src/components/layout/Sidebar.tsx

@@ -1,7 +1,7 @@
 import { cn } from '@/lib/utils';
 import { LANGUAGE_OPTIONS, t, type I18nLanguage } from '@/lib/i18n';
 import { THEME_OPTIONS, type UiTheme } from '@/lib/theme';
-import { Cpu, GitBranch, History, MessageCircle, MessageSquare, Sparkles, BookOpen, Plug, BrainCircuit, AlarmClock, Languages, Palette, KeyRound, Settings, ArrowLeft, Search, Shield, Wrench, Wifi, Bot } from 'lucide-react';
+import { Cpu, GitBranch, History, MessageCircle, MessageSquare, Sparkles, BookOpen, Plug, BrainCircuit, AlarmClock, Languages, Palette, KeyRound, Settings, ArrowLeft, Search, Shield, Wrench, Wifi, Bot, Download } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
 import { useDocBrowser } from '@/components/doc-browser';
 import { BrandHeader } from '@/components/common/BrandHeader';
@@ -80,21 +80,36 @@ export function Sidebar({ mode }: SidebarProps) {
       label: t('providers'),
       icon: Sparkles,
     },
+    {
+      target: '/channels',
+      label: t('channels'),
+      icon: MessageSquare,
+    },
     {
       target: '/search',
       label: t('searchChannels'),
       icon: Search,
     },
     {
-      target: '/channels',
-      label: t('channels'),
-      icon: MessageSquare,
+      target: '/marketplace/plugins',
+      label: t('marketplaceFilterPlugins'),
+      icon: Plug,
+    },
+    {
+      target: '/marketplace/mcp',
+      label: t('marketplaceFilterMcp'),
+      icon: Wrench,
     },
     {
       target: '/runtime',
       label: t('runtime'),
       icon: GitBranch,
     },
+    {
+      target: '/updates',
+      label: t('updates'),
+      icon: Download,
+    },
     {
       target: '/remote',
       label: t('remote'),
@@ -114,16 +129,6 @@ export function Sidebar({ mode }: SidebarProps) {
       target: '/secrets',
       label: t('secrets'),
       icon: KeyRound,
-    },
-    {
-      target: '/marketplace/plugins',
-      label: t('marketplaceFilterPlugins'),
-      icon: Plug,
-    },
-    {
-      target: '/marketplace/mcp',
-      label: t('marketplaceFilterMcp'),
-      icon: Wrench,
     }
   ];
   const navItems = isSettingsMode ? settingsNavItems : mainNavItems;

package/src/components/layout/sidebar.layout.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
 import { describe, expect, it, vi } from 'vitest';
 import { Sidebar } from '@/components/layout/Sidebar';
@@ -85,6 +85,38 @@ describe('Sidebar', () => {
     expect(backLink.className).toContain('hover:bg-gray-200/60');
   });
 
+  it('keeps the settings navigation in the expected product order', () => {
+    const { container } = render(
+      <MemoryRouter initialEntries={['/model']}>
+        <Sidebar mode="settings" />
+      </MemoryRouter>
+    );
+
+    const nav = container.querySelector('nav');
+    if (!(nav instanceof HTMLElement)) {
+      throw new Error('settings nav not found');
+    }
+
+    const linkTexts = within(nav)
+      .getAllByRole('link')
+      .map((link) => link.textContent?.trim() || '');
+
+    expect(linkTexts).toEqual([
+      'Model',
+      'Providers',
+      'Channels',
+      'Search Channels',
+      'Plugins',
+      'MCP',
+      'Routing & Runtime',
+      'Updates',
+      'Remote Access',
+      'Security',
+      'Sessions',
+      'Secrets'
+    ]);
+  });
+
   it('keeps the footer utilities compact without changing the top header structure', () => {
     render(
       <MemoryRouter initialEntries={['/model']}>