@nextclaw/ui 0.12.0 → 0.12.2

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

@@ -0,0 +1,150 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { SearchConfig } from '@/components/config/SearchConfig';
+import { setLanguage } from '@/lib/i18n';
+
+const mocks = vi.hoisted(() => ({
+  mutate: vi.fn(),
+  useConfigData: {
+    data: {
+      search: {
+        provider: 'tavily',
+        enabledProviders: ['bocha', 'tavily'],
+        defaults: {
+          maxResults: 8
+        },
+        providers: {
+          bocha: {
+            enabled: true,
+            apiKeySet: false,
+            baseUrl: 'https://api.bocha.cn/v1/web-search',
+            docsUrl: 'https://open.bocha.cn',
+            summary: true,
+            freshness: 'noLimit'
+          },
+          tavily: {
+            enabled: true,
+            apiKeySet: true,
+            apiKeyMasked: 'tv****1234',
+            baseUrl: 'https://api.tavily.com/search',
+            searchDepth: 'advanced',
+            includeAnswer: true
+          },
+          brave: {
+            enabled: false,
+            apiKeySet: false,
+            baseUrl: 'https://api.search.brave.com/res/v1/web/search'
+          }
+        }
+      }
+    }
+  },
+  useConfigMetaData: {
+    data: {
+      search: [
+        {
+          name: 'bocha',
+          displayName: 'Bocha Search',
+          description: 'China-friendly web search with AI-ready summaries.',
+          docsUrl: 'https://open.bocha.cn',
+          isDefault: true,
+          supportsSummary: true
+        },
+        {
+          name: 'tavily',
+          displayName: 'Tavily Search',
+          description: 'Research-focused web search with optional synthesized answers.',
+          docsUrl: 'https://docs.tavily.com/documentation/api-reference/endpoint/search',
+          supportsSummary: true
+        },
+        {
+          name: 'brave',
+          displayName: 'Brave Search',
+          description: 'Brave web search API kept as an optional provider.',
+          supportsSummary: false
+        }
+      ]
+    }
+  }
+}));
+
+vi.mock('@/hooks/useConfig', () => ({
+  useConfig: () => mocks.useConfigData,
+  useConfigMeta: () => mocks.useConfigMetaData,
+  useUpdateSearch: () => ({
+    mutate: mocks.mutate,
+    isPending: false
+  })
+}));
+
+describe('SearchConfig', () => {
+  beforeEach(() => {
+    setLanguage('zh');
+    mocks.mutate.mockReset();
+    if (!HTMLElement.prototype.hasPointerCapture) {
+      HTMLElement.prototype.hasPointerCapture = () => false;
+    }
+    if (!HTMLElement.prototype.setPointerCapture) {
+      HTMLElement.prototype.setPointerCapture = () => {};
+    }
+    if (!HTMLElement.prototype.releasePointerCapture) {
+      HTMLElement.prototype.releasePointerCapture = () => {};
+    }
+  });
+
+  it('renders Tavily-specific controls and submits Tavily config through updateSearch', async () => {
+    const user = userEvent.setup();
+
+    render(<SearchConfig />);
+
+    expect(screen.getByRole('heading', { name: 'Tavily Search' })).toBeTruthy();
+    expect(screen.getByText('搜索深度')).toBeTruthy();
+    expect(screen.getByText('包含回答')).toBeTruthy();
+    expect(screen.getByDisplayValue('https://api.tavily.com/search')).toBeTruthy();
+    expect(screen.queryByText('结果摘要')).toBeNull();
+
+    const searchDepthSection = screen.getByText('搜索深度').parentElement;
+    const includeAnswerSection = screen.getByText('包含回答').parentElement;
+    const searchDepthTrigger = searchDepthSection?.querySelector('[role="combobox"]');
+    const includeAnswerTrigger = includeAnswerSection?.querySelector('[role="combobox"]');
+
+    expect(searchDepthTrigger).toBeTruthy();
+    expect(includeAnswerTrigger).toBeTruthy();
+
+    await user.click(searchDepthTrigger as HTMLElement);
+    await user.click(screen.getByRole('option', { name: '高级' }));
+    await user.click(includeAnswerTrigger as HTMLElement);
+    await user.click(screen.getByRole('option', { name: '启用' }));
+
+    await user.click(screen.getByRole('button', { name: '保存变更' }));
+
+    expect(mocks.mutate).toHaveBeenCalledWith({
+      data: {
+        provider: 'tavily',
+        enabledProviders: ['bocha', 'tavily'],
+        defaults: {
+          maxResults: 8
+        },
+        providers: {
+          bocha: {
+            apiKey: undefined,
+            baseUrl: 'https://api.bocha.cn/v1/web-search',
+            summary: true,
+            freshness: 'noLimit'
+          },
+          tavily: {
+            apiKey: undefined,
+            baseUrl: 'https://api.tavily.com/search',
+            searchDepth: 'advanced',
+            includeAnswer: true
+          },
+          brave: {
+            apiKey: undefined,
+            baseUrl: 'https://api.search.brave.com/res/v1/web/search'
+          }
+        }
+      }
+    });
+  });
+});

package/src/components/config/SearchConfig.tsx

@@ -9,7 +9,7 @@ import { useConfig, useConfigMeta, useUpdateSearch } from '@/hooks/useConfig';
 import { t } from '@/lib/i18n';
 import { cn } from '@/lib/utils';
 import { CONFIG_DETAIL_CARD_CLASS, CONFIG_SIDEBAR_CARD_CLASS, CONFIG_SPLIT_GRID_CLASS } from './config-layout';
-import type { SearchConfigUpdate, SearchProviderName } from '@/api/types';
+import type { SearchConfigUpdate, SearchProviderName, TavilySearchDepthValue } from '@/api/types';
 
 const FRESHNESS_OPTIONS = [
   { value: 'noLimit', label: 'searchFreshnessNoLimit' },
@@ -19,11 +19,219 @@ const FRESHNESS_OPTIONS = [
   { value: 'oneYear', label: 'searchFreshnessOneYear' }
 ] as const;
 
+const SEARCH_DEPTH_OPTIONS = [
+  { value: 'basic', label: 'searchDepthBasic' },
+  { value: 'advanced', label: 'searchDepthAdvanced' }
+] as const;
+
+const SEARCH_PROVIDER_DESCRIPTION_KEYS: Record<SearchProviderName, string> = {
+  bocha: 'searchProviderBochaDescription',
+  tavily: 'searchProviderTavilyDescription',
+  brave: 'searchProviderBraveDescription'
+};
+
+type BochaProviderFieldsProps = {
+  apiKey: string;
+  apiKeyMasked?: string;
+  baseUrl: string;
+  summary: boolean;
+  freshness: string;
+  docsUrl?: string;
+  onApiKeyChange: (value: string) => void;
+  onBaseUrlChange: (value: string) => void;
+  onSummaryChange: (value: boolean) => void;
+  onFreshnessChange: (value: string) => void;
+};
+
+function BochaProviderFields({
+  apiKey,
+  apiKeyMasked,
+  baseUrl,
+  summary,
+  freshness,
+  docsUrl,
+  onApiKeyChange,
+  onBaseUrlChange,
+  onSummaryChange,
+  onFreshnessChange
+}: BochaProviderFieldsProps) {
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <Label>{t('apiKey')}</Label>
+        <Input
+          type="password"
+          value={apiKey}
+          onChange={(event) => onApiKeyChange(event.target.value)}
+          placeholder={apiKeyMasked || t('enterApiKey')}
+          className="rounded-xl"
+        />
+      </div>
+      <div className="space-y-2">
+        <Label>{t('searchProviderBaseUrl')}</Label>
+        <Input value={baseUrl} onChange={(event) => onBaseUrlChange(event.target.value)} className="rounded-xl" />
+      </div>
+      <div className="grid gap-4 md:grid-cols-2">
+        <div className="space-y-2">
+          <Label>{t('searchProviderSummary')}</Label>
+          <Select value={summary ? 'true' : 'false'} onValueChange={(value) => onSummaryChange(value === 'true')}>
+            <SelectTrigger className="rounded-xl">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="true">{t('enabled')}</SelectItem>
+              <SelectItem value="false">{t('disabled')}</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-2">
+          <Label>{t('searchProviderFreshness')}</Label>
+          <Select value={freshness} onValueChange={onFreshnessChange}>
+            <SelectTrigger className="rounded-xl">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {FRESHNESS_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value}>{t(option.label)}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+      <div className="space-y-2">
+        <a href={docsUrl ?? 'https://open.bocha.cn'} target="_blank" rel="noreferrer">
+          <Button type="button" variant="outline" className="rounded-xl">
+            <ExternalLink className="mr-2 h-4 w-4" />
+            {t('searchProviderOpenDocs')}
+          </Button>
+        </a>
+      </div>
+    </div>
+  );
+}
+
+type TavilyProviderFieldsProps = {
+  apiKey: string;
+  apiKeyMasked?: string;
+  baseUrl: string;
+  searchDepth: TavilySearchDepthValue;
+  includeAnswer: boolean;
+  docsUrl?: string;
+  onApiKeyChange: (value: string) => void;
+  onBaseUrlChange: (value: string) => void;
+  onSearchDepthChange: (value: TavilySearchDepthValue) => void;
+  onIncludeAnswerChange: (value: boolean) => void;
+};
+
+function TavilyProviderFields({
+  apiKey,
+  apiKeyMasked,
+  baseUrl,
+  searchDepth,
+  includeAnswer,
+  docsUrl,
+  onApiKeyChange,
+  onBaseUrlChange,
+  onSearchDepthChange,
+  onIncludeAnswerChange
+}: TavilyProviderFieldsProps) {
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <Label>{t('apiKey')}</Label>
+        <Input
+          type="password"
+          value={apiKey}
+          onChange={(event) => onApiKeyChange(event.target.value)}
+          placeholder={apiKeyMasked || t('enterApiKey')}
+          className="rounded-xl"
+        />
+      </div>
+      <div className="space-y-2">
+        <Label>{t('searchProviderBaseUrl')}</Label>
+        <Input value={baseUrl} onChange={(event) => onBaseUrlChange(event.target.value)} className="rounded-xl" />
+      </div>
+      <div className="grid gap-4 md:grid-cols-2">
+        <div className="space-y-2">
+          <Label>{t('searchProviderSearchDepth')}</Label>
+          <Select value={searchDepth} onValueChange={(value) => onSearchDepthChange(value as TavilySearchDepthValue)}>
+            <SelectTrigger className="rounded-xl">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {SEARCH_DEPTH_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value}>{t(option.label)}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-2">
+          <Label>{t('searchProviderIncludeAnswer')}</Label>
+          <Select value={includeAnswer ? 'true' : 'false'} onValueChange={(value) => onIncludeAnswerChange(value === 'true')}>
+            <SelectTrigger className="rounded-xl">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="true">{t('enabled')}</SelectItem>
+              <SelectItem value="false">{t('disabled')}</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+      {docsUrl ? (
+        <div className="space-y-2">
+          <a href={docsUrl} target="_blank" rel="noreferrer">
+            <Button type="button" variant="outline" className="rounded-xl">
+              <ExternalLink className="mr-2 h-4 w-4" />
+              {t('searchProviderOpenDocs')}
+            </Button>
+          </a>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+type BraveProviderFieldsProps = {
+  apiKey: string;
+  apiKeyMasked?: string;
+  baseUrl: string;
+  onApiKeyChange: (value: string) => void;
+  onBaseUrlChange: (value: string) => void;
+};
+
+function BraveProviderFields({
+  apiKey,
+  apiKeyMasked,
+  baseUrl,
+  onApiKeyChange,
+  onBaseUrlChange
+}: BraveProviderFieldsProps) {
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <Label>{t('apiKey')}</Label>
+        <Input
+          type="password"
+          value={apiKey}
+          onChange={(event) => onApiKeyChange(event.target.value)}
+          placeholder={apiKeyMasked || t('enterApiKey')}
+          className="rounded-xl"
+        />
+      </div>
+      <div className="space-y-2">
+        <Label>{t('searchProviderBaseUrl')}</Label>
+        <Input value={baseUrl} onChange={(event) => onBaseUrlChange(event.target.value)} className="rounded-xl" />
+      </div>
+    </div>
+  );
+}
+
 export function SearchConfig() {
   const { data: config } = useConfig();
   const { data: meta } = useConfigMeta();
   const updateSearch = useUpdateSearch();
-  const providers = meta?.search ?? [];
+  const providers = useMemo(() => meta?.search ?? [], [meta]);
   const search = config?.search;
 
   const [selectedProvider, setSelectedProvider] = useState<SearchProviderName>('bocha');
@@ -34,6 +242,10 @@ export function SearchConfig() {
   const [bochaBaseUrl, setBochaBaseUrl] = useState('https://api.bocha.cn/v1/web-search');
   const [bochaSummary, setBochaSummary] = useState(true);
   const [bochaFreshness, setBochaFreshness] = useState('noLimit');
+  const [tavilyApiKey, setTavilyApiKey] = useState('');
+  const [tavilyBaseUrl, setTavilyBaseUrl] = useState('https://api.tavily.com/search');
+  const [tavilySearchDepth, setTavilySearchDepth] = useState<TavilySearchDepthValue>('basic');
+  const [tavilyIncludeAnswer, setTavilyIncludeAnswer] = useState(false);
   const [braveApiKey, setBraveApiKey] = useState('');
   const [braveBaseUrl, setBraveBaseUrl] = useState('https://api.search.brave.com/res/v1/web/search');
 
@@ -48,6 +260,9 @@ export function SearchConfig() {
     setBochaBaseUrl(search.providers.bocha.baseUrl);
     setBochaSummary(Boolean(search.providers.bocha.summary));
     setBochaFreshness(search.providers.bocha.freshness ?? 'noLimit');
+    setTavilyBaseUrl(search.providers.tavily.baseUrl);
+    setTavilySearchDepth(search.providers.tavily.searchDepth ?? 'basic');
+    setTavilyIncludeAnswer(Boolean(search.providers.tavily.includeAnswer));
     setBraveBaseUrl(search.providers.brave.baseUrl);
   }, [search]);
 
@@ -57,7 +272,7 @@ export function SearchConfig() {
   );
   const selectedView = search?.providers[selectedProvider];
   const selectedEnabled = enabledProviders.includes(selectedProvider);
-  const bochaDocsUrl = search?.providers.bocha.docsUrl ?? meta?.search.find((provider) => provider.name === 'bocha')?.docsUrl ?? 'https://open.bocha.cn';
+  const selectedDocsUrl = selectedView?.docsUrl ?? selectedMeta?.docsUrl;
   const activationButtonLabel = selectedEnabled
     ? t('searchProviderDeactivate')
     : t('searchProviderActivate');
@@ -78,6 +293,12 @@ export function SearchConfig() {
         summary: bochaSummary,
         freshness: bochaFreshness
       },
+      tavily: {
+        apiKey: tavilyApiKey || undefined,
+        baseUrl: tavilyBaseUrl,
+        searchDepth: tavilySearchDepth,
+        includeAnswer: tavilyIncludeAnswer
+      },
       brave: {
         apiKey: braveApiKey || undefined,
         baseUrl: braveBaseUrl
@@ -140,7 +361,7 @@ export function SearchConfig() {
                     <div className="min-w-0">
                       <p className="truncate text-sm font-semibold text-gray-900">{provider.displayName}</p>
                       <p className="line-clamp-2 text-[11px] text-gray-500">
-                        {provider.name === 'bocha' ? t('searchProviderBochaDescription') : t('searchProviderBraveDescription')}
+                        {t(SEARCH_PROVIDER_DESCRIPTION_KEYS[provider.name])}
                       </p>
                     </div>
                     <div className="flex flex-col items-end gap-1">
@@ -212,74 +433,39 @@ export function SearchConfig() {
               </div>
 
               {selectedProvider === 'bocha' ? (
-                <div className="space-y-4">
-                  <div className="space-y-2">
-                    <Label>{t('apiKey')}</Label>
-                    <Input
-                      type="password"
-                      value={bochaApiKey}
-                      onChange={(event) => setBochaApiKey(event.target.value)}
-                      placeholder={search.providers.bocha.apiKeyMasked || t('enterApiKey')}
-                      className="rounded-xl"
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <Label>{t('searchProviderBaseUrl')}</Label>
-                    <Input value={bochaBaseUrl} onChange={(event) => setBochaBaseUrl(event.target.value)} className="rounded-xl" />
-                  </div>
-                  <div className="grid gap-4 md:grid-cols-2">
-                    <div className="space-y-2">
-                      <Label>{t('searchProviderSummary')}</Label>
-                      <Select value={bochaSummary ? 'true' : 'false'} onValueChange={(value) => setBochaSummary(value === 'true')}>
-                        <SelectTrigger className="rounded-xl">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="true">{t('enabled')}</SelectItem>
-                          <SelectItem value="false">{t('disabled')}</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </div>
-                    <div className="space-y-2">
-                      <Label>{t('searchProviderFreshness')}</Label>
-                      <Select value={bochaFreshness} onValueChange={setBochaFreshness}>
-                        <SelectTrigger className="rounded-xl">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {FRESHNESS_OPTIONS.map((option) => (
-                            <SelectItem key={option.value} value={option.value}>{t(option.label)}</SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    </div>
-                  </div>
-                  <div className="space-y-2">
-                    <a href={bochaDocsUrl} target="_blank" rel="noreferrer">
-                      <Button type="button" variant="outline" className="rounded-xl">
-                        <ExternalLink className="mr-2 h-4 w-4" />
-                        {t('searchProviderOpenDocs')}
-                      </Button>
-                    </a>
-                  </div>
-                </div>
+                <BochaProviderFields
+                  apiKey={bochaApiKey}
+                  apiKeyMasked={search.providers.bocha.apiKeyMasked}
+                  baseUrl={bochaBaseUrl}
+                  summary={bochaSummary}
+                  freshness={bochaFreshness}
+                  docsUrl={selectedDocsUrl}
+                  onApiKeyChange={setBochaApiKey}
+                  onBaseUrlChange={setBochaBaseUrl}
+                  onSummaryChange={setBochaSummary}
+                  onFreshnessChange={setBochaFreshness}
+                />
+              ) : selectedProvider === 'tavily' ? (
+                <TavilyProviderFields
+                  apiKey={tavilyApiKey}
+                  apiKeyMasked={search.providers.tavily.apiKeyMasked}
+                  baseUrl={tavilyBaseUrl}
+                  searchDepth={tavilySearchDepth}
+                  includeAnswer={tavilyIncludeAnswer}
+                  docsUrl={selectedDocsUrl}
+                  onApiKeyChange={setTavilyApiKey}
+                  onBaseUrlChange={setTavilyBaseUrl}
+                  onSearchDepthChange={setTavilySearchDepth}
+                  onIncludeAnswerChange={setTavilyIncludeAnswer}
+                />
               ) : (
-                <div className="space-y-4">
-                  <div className="space-y-2">
-                    <Label>{t('apiKey')}</Label>
-                    <Input
-                      type="password"
-                      value={braveApiKey}
-                      onChange={(event) => setBraveApiKey(event.target.value)}
-                      placeholder={search.providers.brave.apiKeyMasked || t('enterApiKey')}
-                      className="rounded-xl"
-                    />
-                  </div>
-                  <div className="space-y-2">
-                    <Label>{t('searchProviderBaseUrl')}</Label>
-                    <Input value={braveBaseUrl} onChange={(event) => setBraveBaseUrl(event.target.value)} className="rounded-xl" />
-                  </div>
-                </div>
+                <BraveProviderFields
+                  apiKey={braveApiKey}
+                  apiKeyMasked={search.providers.brave.apiKeyMasked}
+                  baseUrl={braveBaseUrl}
+                  onApiKeyChange={setBraveApiKey}
+                  onBaseUrlChange={setBraveBaseUrl}
+                />
               )}
 
               <div className="flex justify-end">

package/src/components/config/runtime-config-agent.utils.ts

@@ -6,7 +6,7 @@ export function createEmptyRuntimeAgent(): AgentProfileView {
     default: false,
     workspace: '',
     model: '',
-    engine: '',
+    runtime: '',
     contextTokens: undefined,
     maxToolIterations: undefined
   };
@@ -31,7 +31,7 @@ export function hydrateRuntimeAgent(agent: AgentProfileView): AgentProfileView {
     avatar: agent.avatar ?? '',
     workspace: agent.workspace ?? '',
     model: agent.model ?? '',
-    engine: agent.engine ?? '',
+    runtime: agent.runtime ?? agent.engine ?? '',
     contextTokens: agent.contextTokens,
     maxToolIterations: agent.maxToolIterations
   };
@@ -82,8 +82,9 @@ export function toPersistedRuntimeAgent(agent: AgentProfileView): AgentProfileVi
   if (agent.model?.trim()) {
     normalized.model = agent.model.trim();
   }
-  if (agent.engine?.trim()) {
-    normalized.engine = agent.engine.trim();
+  const runtime = agent.runtime?.trim() ?? agent.engine?.trim();
+  if (runtime) {
+    normalized.engine = runtime;
   }
   if (typeof agent.contextTokens === 'number') {
     normalized.contextTokens = Math.max(1000, agent.contextTokens);

package/src/hooks/agents/useAgents.ts

@@ -1,5 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { createAgent, deleteAgent, fetchAgents } from '@/api/agents';
+import { createAgent, deleteAgent, fetchAgents, updateAgent } from '@/api/agents';
 import { toast } from 'sonner';
 import { t } from '@/lib/i18n';
 
@@ -27,6 +27,23 @@ export function useCreateAgent() {
   });
 }
 
+export function useUpdateAgent() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ agentId, data }: { agentId: string; data: Parameters<typeof updateAgent>[1] }) =>
+      updateAgent(agentId, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['agents'] });
+      queryClient.invalidateQueries({ queryKey: ['config'] });
+      toast.success(t('configSavedApplied'));
+    },
+    onError: (error: Error) => {
+      toast.error(t('configSaveFailed') + ': ' + error.message);
+    }
+  });
+}
+
 export function useDeleteAgent() {
   const queryClient = useQueryClient();
 

package/src/lib/i18n.agents.ts

@@ -33,7 +33,25 @@ export const AGENT_LABELS: Record<string, { zh: string; en: string }> = {
   agentsFormDescriptionPlaceholder: { zh: '角色描述，可选', en: 'Role description, optional' },
   agentsFormAvatarPlaceholder: { zh: '头像 URL 或本地路径，可选', en: 'Avatar URL or local path, optional' },
   agentsFormHomePlaceholder: { zh: '主目录，可选', en: 'Home Directory, optional' },
+  agentsFormRuntimePlaceholder: { zh: 'Runtime（如 native 或 codex，可选）', en: 'Runtime (e.g. native or codex, optional)' },
+  agentsRuntimeSelectPlaceholder: { zh: '选择 Runtime', en: 'Select runtime' },
+  agentsRuntimeUnavailableHelp: {
+    zh: '当前 Runtime 已不在可用列表中；建议改选一个已安装且可用的 Runtime。',
+    en: 'This runtime is no longer available in the current list. Switch to an installed and available runtime.'
+  },
   agentsCreateAction: { zh: '创建 Agent', en: 'Create Agent' },
+  agentsEditAction: { zh: '编辑', en: 'Edit' },
+  agentsEditDialogTitle: { zh: '编辑 Agent 身份', en: 'Edit agent identity' },
+  agentsEditDialogDescription: {
+    zh: '更新名称、角色描述与头像。Agent ID 与主目录保持稳定，避免影响既有记忆、技能与会话。',
+    en: 'Update the name, role description, and avatar. The agent ID and home directory stay stable to protect existing memory, skills, and sessions.'
+  },
+  agentsEditHomeReadonly: { zh: '主目录保持不变', en: 'Home directory stays unchanged' },
+  agentsEditHomeReadonlyHint: {
+    zh: '如需迁移主目录，请走独立配置迁移流程，避免意外丢失 Agent 上下文。',
+    en: 'Use a dedicated config migration flow to move the home directory and avoid losing agent context unexpectedly.'
+  },
+  agentsEditSaveAction: { zh: '保存编辑', en: 'Save edits' },
   agentsRemoveAction: { zh: '移除', en: 'Remove' },
   agentsNewChat: { zh: '新建会话', en: 'New Chat' },
   agentsLoading: { zh: '正在加载 Agent...', en: 'Loading agents...' },
@@ -55,12 +73,13 @@ export const AGENT_LABELS: Record<string, { zh: string; en: string }> = {
     zh: '专属 Agent 身份，可沉淀自己的记忆、技能与角色风格。',
     en: 'A dedicated identity with its own memory, skills, and role style.'
   },
+  agentsCardRuntimeLabel: { zh: 'Runtime', en: 'Runtime' },
   agentsCardHomeLabel: { zh: '主目录', en: 'Home Directory' },
   agentsCardAvatarLabel: { zh: 'Avatar', en: 'Avatar' },
   agentsCardStartChat: { zh: '开始对话', en: 'Start Chat' },
   agentsCardBuiltInTag: { zh: '系统主', en: 'Main Agent' },
   agentsCardCustomTag: { zh: '专职', en: 'Specialist' },
-  chatDraftAgentTitle: { zh: '本次会话将与谁对话？', en: 'Who should this draft chat talk to?' },
-  chatDraftAgentDescription: { zh: '草稿态可以选择 Agent；会话创建后不可切换。', en: 'Choose the agent in draft state. It cannot be changed after the session is created.' },
+  chatDraftAgentTitle: { zh: '本次会话 Agent', en: 'Draft agent' },
+  chatDraftAgentDescription: { zh: '创建后不可切换', en: 'Locked after creation' },
   chatDraftAgentCurrent: { zh: '当前 Agent', en: 'Current Agent' }
 };