@nextclaw/ui 0.15.9 → 0.15.11

package/src/features/settings/components/config/provider-models-section.tsx

@@ -8,10 +8,13 @@ import { t } from '@/shared/lib/i18n';
 import type { ThinkingLevel } from '@/shared/lib/api';
 import { Plus, Settings2, X } from 'lucide-react';
 
-type ModelConfig = Record<string, {
-  thinking?: { supported: ThinkingLevel[]; default?: ThinkingLevel | null };
-  vision?: boolean;
-}>;
+type ModelConfig = Record<
+  string,
+  {
+    thinking?: { supported: ThinkingLevel[]; default?: ThinkingLevel | null };
+    vision?: boolean;
+  }
+>;
 
 type ProviderModelsSectionProps = {
   models: string[];
@@ -47,23 +50,23 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
   } = props;
 
   return (
-    <div className="space-y-2">
-      <div className="flex items-center justify-between">
-        <Label className="text-sm font-medium text-foreground">{t('providerModelsTitle')}</Label>
+    <div className='space-y-2'>
+      <div className='flex items-center justify-between'>
+        <Label className='text-sm font-medium text-foreground'>{t('providerModelsTitle')}</Label>
         {!showModelInput ? (
           <button
-            type="button"
+            type='button'
             onClick={() => onShowModelInputChange(true)}
-            className="flex items-center gap-1 text-xs font-medium text-primary hover:text-primary/80"
+            className='flex items-center gap-1 text-xs font-medium text-primary hover:text-primary/80'
           >
-            <Plus className="h-3 w-3" />
+            <Plus className='h-3 w-3' />
             {t('providerAddModel')}
           </button>
         ) : null}
       </div>
 
       {showModelInput ? (
-        <div className="flex items-center gap-2">
+        <div className='flex items-center gap-2'>
           <Input
             value={modelDraft}
             onChange={(event) => onModelDraftChange(event.target.value)}
@@ -78,41 +81,41 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
               }
             }}
             placeholder={t('providerModelInputPlaceholder')}
-            className="flex-1 rounded-xl"
+            className='flex-1 rounded-xl'
             autoFocus
           />
-          <Button type="button" size="sm" onClick={onAddModel} disabled={modelDraft.trim().length === 0}>
+          <Button type='button' size='sm' onClick={onAddModel} disabled={modelDraft.trim().length === 0}>
             {t('add')}
           </Button>
           <Button
-            type="button"
-            size="sm"
-            variant="ghost"
+            type='button'
+            size='sm'
+            variant='ghost'
             onClick={() => {
               onShowModelInputChange(false);
               onModelDraftChange('');
             }}
           >
-            <X className="h-4 w-4" />
+            <X className='h-4 w-4' />
           </Button>
         </div>
       ) : null}
 
       {models.length === 0 ? (
-        <div className="rounded-xl border border-dashed border-border/65 bg-muted/30 px-4 py-6 text-center">
-          <p className="text-sm text-muted-foreground">{t('providerModelsEmptyShort')}</p>
+        <div className='rounded-xl bg-muted/35 px-4 py-6 text-center'>
+          <p className='text-sm text-muted-foreground'>{t('providerModelsEmptyShort')}</p>
           {!showModelInput ? (
             <button
-              type="button"
+              type='button'
               onClick={() => onShowModelInputChange(true)}
-              className="mt-2 text-sm font-medium text-primary hover:text-primary/80"
+              className='mt-2 text-sm font-medium text-primary hover:text-primary/80'
             >
               {t('providerAddFirstModel')}
             </button>
           ) : null}
         </div>
       ) : (
-        <div className="flex flex-wrap gap-2">
+        <div className='flex flex-wrap gap-2'>
           {models.map((modelName) => {
             const modelEntry = modelConfig[modelName];
             const thinkingEntry = modelEntry?.thinking;
@@ -123,39 +126,42 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
             return (
               <div
                 key={modelName}
-                className="group inline-flex max-w-full items-center gap-1 rounded-full border border-border/55 bg-muted/45 px-3 py-1.5"
+                className='group inline-flex max-w-full items-center gap-1 rounded-full border border-border/55 bg-muted/45 px-3 py-1.5'
               >
-                <span className="max-w-[140px] truncate text-sm text-foreground sm:max-w-[220px]">{modelName}</span>
+                <span className='max-w-[140px] truncate text-sm text-foreground sm:max-w-[220px]'>{modelName}</span>
                 <Popover>
                   <PopoverTrigger asChild>
                     <button
-                      type="button"
-                      className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-muted hover:text-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
+                      type='button'
+                      className='inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-muted hover:text-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100'
                       aria-label={t('providerModelThinkingTitle')}
                       title={t('providerModelThinkingTitle')}
                     >
-                      <Settings2 className="h-3 w-3" />
+                      <Settings2 className='h-3 w-3' />
                     </button>
                   </PopoverTrigger>
-                  <PopoverContent className="w-80 space-y-3">
-                    <div className="flex items-center justify-between gap-3 rounded-lg bg-muted/50 px-3 py-2">
-                      <div className="min-w-0">
-                        <p className="text-xs font-semibold text-foreground">{t('providerModelVisionTitle')}</p>
-                        <p className="text-xs text-muted-foreground">{t('providerModelVisionHint')}</p>
+                  <PopoverContent className='w-80 space-y-3'>
+                    <div className='flex items-center justify-between gap-3 rounded-lg bg-muted/50 px-3 py-2'>
+                      <div className='min-w-0'>
+                        <p className='text-xs font-semibold text-foreground'>{t('providerModelVisionTitle')}</p>
+                        <p className='text-xs text-muted-foreground'>{t('providerModelVisionHint')}</p>
                       </div>
-                      <Switch checked={visionEnabled} onCheckedChange={(checked) => onSetModelVision(modelName, checked)} />
+                      <Switch
+                        checked={visionEnabled}
+                        onCheckedChange={(checked) => onSetModelVision(modelName, checked)}
+                      />
                     </div>
-                    <div className="space-y-1">
-                      <p className="text-xs font-semibold text-foreground">{t('providerModelThinkingTitle')}</p>
-                      <p className="text-xs text-muted-foreground">{t('providerModelThinkingHint')}</p>
+                    <div className='space-y-1'>
+                      <p className='text-xs font-semibold text-foreground'>{t('providerModelThinkingTitle')}</p>
+                      <p className='text-xs text-muted-foreground'>{t('providerModelThinkingHint')}</p>
                     </div>
-                    <div className="flex flex-wrap gap-1.5">
+                    <div className='flex flex-wrap gap-1.5'>
                       {thinkingLevels.map((level) => {
                         const selected = supportedLevels.includes(level);
                         return (
                           <button
                             key={level}
-                            type="button"
+                            type='button'
                             onClick={() => onToggleModelThinkingLevel(modelName, level)}
                             className={`rounded-full border px-2.5 py-1 text-xs font-medium transition-colors ${
                               selected
@@ -168,8 +174,8 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
                         );
                       })}
                     </div>
-                    <div className="space-y-1.5">
-                      <Label className="text-xs font-medium text-foreground">{t('providerModelThinkingDefault')}</Label>
+                    <div className='space-y-1.5'>
+                      <Label className='text-xs font-medium text-foreground'>{t('providerModelThinkingDefault')}</Label>
                       <Select
                         value={defaultThinkingLevel ?? '__none__'}
                         onValueChange={(value) =>
@@ -177,11 +183,11 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
                         }
                         disabled={supportedLevels.length === 0}
                       >
-                        <SelectTrigger className="h-8 rounded-lg text-xs">
+                        <SelectTrigger className='h-8 rounded-lg text-xs'>
                           <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
-                          <SelectItem value="__none__">{t('providerModelThinkingDefaultNone')}</SelectItem>
+                          <SelectItem value='__none__'>{t('providerModelThinkingDefaultNone')}</SelectItem>
                           {supportedLevels.map((level) => (
                             <SelectItem key={level} value={level}>
                               {formatThinkingLevelLabel(level)}
@@ -190,18 +196,18 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
                         </SelectContent>
                       </Select>
                       {supportedLevels.length === 0 ? (
-                        <p className="text-xs text-muted-foreground">{t('providerModelThinkingNoSupported')}</p>
+                        <p className='text-xs text-muted-foreground'>{t('providerModelThinkingNoSupported')}</p>
                       ) : null}
                     </div>
                   </PopoverContent>
                 </Popover>
                 <button
-                  type="button"
+                  type='button'
                   onClick={() => onRemoveModel(modelName)}
-                  className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-muted hover:text-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
+                  className='inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-muted hover:text-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100'
                   aria-label={t('remove')}
                 >
-                  <X className="h-3 w-3" />
+                  <X className='h-3 w-3' />
                 </button>
               </div>
             );

package/src/features/settings/components/config/secrets-config-form.tsx

@@ -2,12 +2,11 @@ import { useMemo, useState } from 'react';
 import { Plus, Save, Trash2 } from 'lucide-react';
 import { Button } from '@/shared/components/ui/button';
 import { FormActions } from '@/shared/components/ui/actions/form-actions';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/shared/components/ui/card';
+import { SettingRow, SettingsGroup, SettingsSection } from '@/shared/components/settings/setting-row';
 import { Input } from '@/shared/components/ui/input';
-import { Label } from '@/shared/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
 import { Switch } from '@/shared/components/ui/switch';
-import { PageHeader, PageLayout } from '@/app/components/layout/page-layout';
+import { SettingsPage } from '@/shared/components/settings/settings-page';
 import type { SecretSourceView } from '@/shared/lib/api';
 import { t } from '@/shared/lib/i18n';
 import { toast } from 'sonner';
@@ -21,7 +20,7 @@ import {
   type SecretsFormState,
 } from '@/features/settings/utils/secrets-config-form.utils';
 
-function SecretsDefaultsCard(props: {
+function SecretsDefaultRows(props: {
   defaultEnv: string;
   defaultFile: string;
   defaultExec: string;
@@ -30,25 +29,22 @@ function SecretsDefaultsCard(props: {
 }) {
   const { defaultEnv, defaultFile, defaultExec, providerAliases, onChange } = props;
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t('secrets')}</CardTitle>
-        <CardDescription>{t('secretsEnabledHelp')}</CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        {[
-          { label: t('defaultEnvProvider'), value: defaultEnv, key: 'defaultEnv' as const },
-          { label: t('defaultFileProvider'), value: defaultFile, key: 'defaultFile' as const },
-          { label: t('defaultExecProvider'), value: defaultExec, key: 'defaultExec' as const },
-        ].map((item) => (
-          <div key={item.key} className="space-y-2">
-            <Label>{item.label}</Label>
+    <>
+      {[
+        { label: t('defaultEnvProvider'), value: defaultEnv, key: 'defaultEnv' as const },
+        { label: t('defaultFileProvider'), value: defaultFile, key: 'defaultFile' as const },
+        { label: t('defaultExecProvider'), value: defaultExec, key: 'defaultExec' as const },
+      ].map((item) => (
+        <SettingRow
+          key={item.key}
+          title={item.label}
+          control={
             <Select value={item.value || '__none__'} onValueChange={(value) => onChange(item.key, value === '__none__' ? '' : value)}>
-              <SelectTrigger>
+              <SelectTrigger className='w-56'>
                 <SelectValue placeholder={t('noneOption')} />
               </SelectTrigger>
               <SelectContent>
-                <SelectItem value="__none__">{t('noneOption')}</SelectItem>
+                <SelectItem value='__none__'>{t('noneOption')}</SelectItem>
                 {providerAliases.map((alias) => (
                   <SelectItem key={alias} value={alias}>
                     {alias}
@@ -56,10 +52,10 @@ function SecretsDefaultsCard(props: {
                 ))}
               </SelectContent>
             </Select>
-          </div>
-        ))}
-      </CardContent>
-    </Card>
+          }
+        />
+      ))}
+    </>
   );
 }
 
@@ -71,15 +67,20 @@ function SecretsProvidersCard(props: {
 }) {
   const { providers, onUpdate, onRemove, onAdd } = props;
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t('secretProvidersTitle')}</CardTitle>
-        <CardDescription>{t('secretProvidersDescription')}</CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-3">
+    <SettingsSection
+      title={t('secretProvidersTitle')}
+      description={t('secretProvidersDescription')}
+      actions={
+        <Button type='button' variant='ghost' size='sm' onClick={onAdd}>
+          <Plus className='mr-2 h-4 w-4' />
+          {t('addSecretProvider')}
+        </Button>
+      }
+    >
+      <SettingsGroup>
         {providers.map((provider, index) => (
-          <div key={`provider-${index}`} className="space-y-3 rounded-xl border border-gray-200 p-3">
-            <div className="grid grid-cols-1 gap-3 md:grid-cols-3">
+          <div key={`provider-${index}`} className='space-y-3 p-4'>
+            <div className='grid grid-cols-1 gap-3 md:grid-cols-3'>
               <Input value={provider.alias} onChange={(event) => onUpdate(index, { alias: event.target.value })} placeholder={t('providerAlias')} />
               <Select value={provider.source} onValueChange={(value) => onUpdate(index, { source: value as SecretSourceView })}>
                 <SelectTrigger>
@@ -93,8 +94,8 @@ function SecretsProvidersCard(props: {
                   ))}
                 </SelectContent>
               </Select>
-              <Button type="button" variant="outline" onClick={() => onRemove(index)}>
-                <Trash2 className="mr-2 h-4 w-4" />
+              <Button type='button' variant='outline' onClick={() => onRemove(index)}>
+                <Trash2 className='mr-2 h-4 w-4' />
                 {t('removeProvider')}
               </Button>
             </div>
@@ -106,18 +107,18 @@ function SecretsProvidersCard(props: {
               <Input value={provider.path} onChange={(event) => onUpdate(index, { path: event.target.value })} placeholder={t('secretFilePath')} />
             ) : null}
             {provider.source === 'exec' ? (
-              <div className="space-y-2">
+              <div className='space-y-2'>
                 <Input value={provider.command} onChange={(event) => onUpdate(index, { command: event.target.value })} placeholder={t('secretExecCommand')} />
                 <textarea
-                  className="min-h-[84px] w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-mono"
+                  className='min-h-[84px] w-full rounded-lg border border-input bg-background px-3 py-2 font-mono text-xs'
                   value={provider.argsText}
                   onChange={(event) => onUpdate(index, { argsText: event.target.value })}
                   placeholder={t('secretExecArgs')}
                 />
-                <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
+                <div className='grid grid-cols-1 gap-2 md:grid-cols-2'>
                   <Input value={provider.cwd} onChange={(event) => onUpdate(index, { cwd: event.target.value })} placeholder={t('secretExecCwd')} />
                   <Input
-                    type="number"
+                    type='number'
                     min={1}
                     value={provider.timeoutMs}
                     onChange={(event) => onUpdate(index, { timeoutMs: Number.parseInt(event.target.value, 10) || 5000 })}
@@ -128,13 +129,8 @@ function SecretsProvidersCard(props: {
             ) : null}
           </div>
         ))}
-
-        <Button type="button" variant="outline" onClick={onAdd}>
-          <Plus className="mr-2 h-4 w-4" />
-          {t('addSecretProvider')}
-        </Button>
-      </CardContent>
-    </Card>
+      </SettingsGroup>
+    </SettingsSection>
   );
 }
 
@@ -147,15 +143,20 @@ function SecretsRefsCard(props: {
 }) {
   const { refs, providerAliases, onUpdate, onRemove, onAdd } = props;
   return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t('secretRefsTitle')}</CardTitle>
-        <CardDescription>{t('secretRefsDescription')}</CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-3">
+    <SettingsSection
+      title={t('secretRefsTitle')}
+      description={t('secretRefsDescription')}
+      actions={
+        <Button type='button' variant='ghost' size='sm' onClick={onAdd}>
+          <Plus className='mr-2 h-4 w-4' />
+          {t('addSecretRef')}
+        </Button>
+      }
+    >
+      <SettingsGroup>
         {refs.map((ref, index) => (
-          <div key={`ref-${index}`} className="space-y-3 rounded-xl border border-gray-200 p-3">
-            <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
+          <div key={`ref-${index}`} className='space-y-3 p-4'>
+            <div className='grid grid-cols-1 gap-3 md:grid-cols-2'>
               <Input value={ref.path} onChange={(event) => onUpdate(index, { path: event.target.value })} placeholder={t('secretConfigPath')} />
               <Input value={ref.id} onChange={(event) => onUpdate(index, { id: event.target.value })} placeholder={t('secretId')} />
               <Select value={ref.source} onValueChange={(value) => onUpdate(index, { source: value as SecretSourceView })}>
@@ -170,13 +171,13 @@ function SecretsRefsCard(props: {
                   ))}
                 </SelectContent>
               </Select>
-              <div className="grid grid-cols-[1fr_auto] gap-2">
+              <div className='grid grid-cols-[1fr_auto] gap-2'>
                 <Select value={ref.provider || '__none__'} onValueChange={(value) => onUpdate(index, { provider: value === '__none__' ? '' : value })}>
                   <SelectTrigger>
                     <SelectValue placeholder={t('secretProviderAlias')} />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="__none__">{t('noneOption')}</SelectItem>
+                    <SelectItem value='__none__'>{t('noneOption')}</SelectItem>
                     {providerAliases.map((alias) => (
                       <SelectItem key={alias} value={alias}>
                         {alias}
@@ -184,20 +185,15 @@ function SecretsRefsCard(props: {
                     ))}
                   </SelectContent>
                 </Select>
-                <Button type="button" variant="outline" onClick={() => onRemove(index)}>
-                  <Trash2 className="h-4 w-4" />
+                <Button type='button' variant='outline' onClick={() => onRemove(index)}>
+                  <Trash2 className='h-4 w-4' />
                 </Button>
               </div>
             </div>
           </div>
         ))}
-
-        <Button type="button" variant="outline" onClick={onAdd}>
-          <Plus className="mr-2 h-4 w-4" />
-          {t('addSecretRef')}
-        </Button>
-      </CardContent>
-    </Card>
+      </SettingsGroup>
+    </SettingsSection>
   );
 }
 
@@ -236,30 +232,28 @@ export function SecretsConfigForm(props: {
   };
 
   return (
-    <PageLayout className="space-y-6">
-      <PageHeader title={t('secretsPageTitle')} description={t('secretsPageDescription')} />
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('secrets')}</CardTitle>
-          <CardDescription>{t('secretsEnabledHelp')}</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="flex items-center justify-between rounded-xl border border-gray-200 p-3">
-            <div>
-              <p className="text-sm font-medium text-gray-800">{t('enabled')}</p>
-              <p className="text-xs text-gray-500">{t('secretsEnabledHelp')}</p>
-            </div>
-            <Switch checked={state.enabled} onCheckedChange={(enabled) => setState((prev) => ({ ...prev, enabled }))} />
-          </div>
-          <SecretsDefaultsCard
+    <SettingsPage title={t('secretsPageTitle')} description={t('secretsPageDescription')}>
+      <SettingsSection title={t('secrets')} description={t('secretsEnabledHelp')}>
+        <SettingsGroup>
+          <SettingRow
+            title={t('enabled')}
+            description={t('secretsEnabledHelp')}
+            control={
+              <Switch
+                checked={state.enabled}
+                onCheckedChange={(enabled) => setState((prev) => ({ ...prev, enabled }))}
+              />
+            }
+          />
+          <SecretsDefaultRows
             defaultEnv={state.defaultEnv}
             defaultFile={state.defaultFile}
             defaultExec={state.defaultExec}
             providerAliases={providerAliases}
             onChange={(key, value) => setState((prev) => ({ ...prev, [key]: value }))}
           />
-        </CardContent>
-      </Card>
+        </SettingsGroup>
+      </SettingsSection>
       <SecretsProvidersCard
         providers={state.providers}
         onUpdate={updateProvider}
@@ -274,11 +268,11 @@ export function SecretsConfigForm(props: {
         onAdd={() => setState((prev) => ({ ...prev, refs: [...prev.refs, createRefRow()] }))}
       />
       <FormActions>
-        <Button type="button" size="sm" onClick={handleSave} disabled={isPending}>
-          <Save className="mr-1.5 h-3.5 w-3.5" />
+        <Button type='button' size='sm' onClick={handleSave} disabled={isPending}>
+          <Save className='mr-1.5 h-3.5 w-3.5' />
           {isPending ? t('saving') : t('save')}
         </Button>
       </FormActions>
-    </PageLayout>
+    </SettingsPage>
   );
 }

package/src/features/settings/index.ts

@@ -1,2 +1 @@
 export { useLanguagePreference } from "@/features/settings/hooks/use-language-preference";
-export { LanguageSettingsPage } from "@/features/settings/pages/language-settings-page";

package/src/features/settings/pages/__tests__/appearance-settings-page.test.tsx

@@ -1,15 +1,37 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import { beforeEach, describe, expect, it } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { AppearanceSettingsPage } from "@/features/settings/pages/appearance-settings-page";
 import { useChatMessageLayoutStore } from "@/features/chat";
 import { useSideDockStore } from "@/features/side-dock";
 
+const mocks = vi.hoisted(() => ({
+  selectLanguage: vi.fn(),
+  setTheme: vi.fn(),
+}));
+
+vi.mock("@/app/components/theme-provider", () => ({
+  useTheme: () => ({ theme: "work", setTheme: mocks.setTheme }),
+}));
+
+vi.mock("@/features/settings/hooks/use-language-preference", () => ({
+  useLanguagePreference: () => ({
+    currentLanguage: "en",
+    languageOptions: [
+      { value: "en", label: "English" },
+      { value: "zh", label: "中文" },
+    ],
+    selectLanguage: mocks.selectLanguage,
+  }),
+}));
+
 describe("AppearanceSettingsPage", () => {
   beforeEach(() => {
     window.localStorage.clear();
     useChatMessageLayoutStore.getState().setLayout("card");
     useSideDockStore.getState().setVisible(true);
     useSideDockStore.getState().setPinnedItems([]);
+    mocks.selectLanguage.mockClear();
+    mocks.setTheme.mockClear();
   });
 
   it("reopens the SideDock from the appearance settings switch", () => {
@@ -39,4 +61,16 @@ describe("AppearanceSettingsPage", () => {
     expect(flatOption.getAttribute("aria-checked")).toBe("true");
     expect(useChatMessageLayoutStore.getState().layout).toBe("flat");
   });
+
+  it("owns the persistent theme and interface language controls", () => {
+    render(<AppearanceSettingsPage />);
+
+    fireEvent.click(screen.getByRole("combobox", { name: "Theme" }));
+    fireEvent.click(screen.getByRole("option", { name: "Night" }));
+    expect(mocks.setTheme).toHaveBeenCalledWith("night");
+
+    fireEvent.click(screen.getByRole("combobox", { name: "Language" }));
+    fireEvent.click(screen.getByRole("option", { name: "中文" }));
+    expect(mocks.selectLanguage).toHaveBeenCalledWith("zh");
+  });
 });

package/src/features/settings/pages/__tests__/model-config-page.test.tsx

@@ -96,6 +96,7 @@ describe('ModelConfigPage', () => {
   beforeEach(() => {
     mocks.mutate.mockReset();
     setLanguage('en');
+    mocks.schemaQuery.data.uiHints = {};
     HTMLElement.prototype.hasPointerCapture = vi.fn(() => false);
     HTMLElement.prototype.setPointerCapture = vi.fn();
     HTMLElement.prototype.releasePointerCapture = vi.fn();
@@ -166,7 +167,7 @@ describe('ModelConfigPage', () => {
 
     render(<ModelConfigPage />);
 
-    const workspaceInput = await screen.findByLabelText('Default Path');
+    const workspaceInput = await screen.findByLabelText('Workspace');
     await user.clear(workspaceInput);
     await user.type(workspaceInput, '~/new-workspace');
     await user.click(screen.getByRole('button', { name: /save/i }));
@@ -179,6 +180,22 @@ describe('ModelConfigPage', () => {
     });
   });
 
+  it('keeps page labels localized when schema hints contain English labels', () => {
+    setLanguage('zh');
+    mocks.schemaQuery.data.uiHints = {
+      'agents.defaults.model': { label: 'Default Model' },
+      'agents.defaults.workspace': { label: 'Workspace' }
+    };
+
+    render(<ModelConfigPage />);
+
+    expect(screen.getByRole('heading', { name: '模型配置' })).toBeTruthy();
+    expect(screen.getByLabelText('默认模型')).toBeTruthy();
+    expect(screen.getByLabelText('工作空间')).toBeTruthy();
+    expect(screen.queryByText('Default Model')).toBeNull();
+    expect(screen.queryByText('Workspace')).toBeNull();
+  });
+
   it('shows a clear empty state and still allows manual model input when no providers are configured', async () => {
     const user = userEvent.setup();
     mocks.configQuery.data = {

package/src/features/settings/pages/__tests__/search-config-page.test.tsx

@@ -99,11 +99,19 @@ describe('SearchConfigPage', () => {
     render(<SearchConfigPage />);
 
     expect(screen.getByRole('heading', { name: 'Tavily Search' })).toBeTruthy();
+    expect(screen.getAllByText('更适合调研和网页信息整合的搜索 provider。').length).toBeGreaterThan(0);
+    expect(screen.queryByText('Research-focused web search with optional synthesized answers.')).toBeNull();
     expect(screen.getByText('搜索深度')).toBeTruthy();
     expect(screen.getByText('包含回答')).toBeTruthy();
     expect(screen.getByDisplayValue('https://api.tavily.com/search')).toBeTruthy();
     expect(screen.queryByText('结果摘要')).toBeNull();
 
+    const docsLink = screen.getByRole('link', { name: '查看文档' });
+    expect(docsLink.getAttribute('href')).toBe('https://docs.tavily.com/documentation/api-reference/endpoint/search');
+    expect(docsLink.getAttribute('target')).toBe('_blank');
+    expect(docsLink.querySelector('button')).toBeNull();
+    expect(screen.queryByRole('button', { name: '查看文档' })).toBeNull();
+
     const searchDepthSection = screen.getByText('搜索深度').parentElement;
     const includeAnswerSection = screen.getByText('包含回答').parentElement;
     const searchDepthTrigger = searchDepthSection?.querySelector('[role="combobox"]');