@nextclaw/ui 0.12.0 → 0.12.2

package/src/components/agents/AgentDialogs.tsx

@@ -0,0 +1,400 @@
+import { useEffect, useState } from 'react';
+import type { AgentProfileView } from '@/api/types';
+import { normalizeSessionType, resolveSessionTypeLabel, type ChatSessionTypeOption } from '@/components/chat/useChatSessionTypeState';
+import { ProviderScopedModelInput } from '@/components/common/ProviderScopedModelInput';
+import { Button } from '@/components/ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { t } from '@/lib/i18n';
+import type { ProviderModelCatalogItem } from '@/lib/provider-models';
+import { Pencil, Plus } from 'lucide-react';
+
+export type AgentCreateFormState = {
+  id: string;
+  displayName: string;
+  description: string;
+  avatar: string;
+  home: string;
+  model: string;
+  runtime: string;
+};
+
+export type AgentEditFormState = {
+  displayName: string;
+  description: string;
+  avatar: string;
+  model: string;
+  runtime: string;
+};
+
+export const EMPTY_AGENT_CREATE_FORM: AgentCreateFormState = {
+  id: '',
+  displayName: '',
+  description: '',
+  avatar: '',
+  model: '',
+  home: '',
+  runtime: ''
+};
+
+export const EMPTY_AGENT_EDIT_FORM: AgentEditFormState = {
+  displayName: '',
+  description: '',
+  avatar: '',
+  model: '',
+  runtime: ''
+};
+
+export function toAgentEditFormState(agent: AgentProfileView): AgentEditFormState {
+  return {
+    displayName: agent.displayName ?? '',
+    description: agent.description ?? '',
+    avatar: agent.avatar ?? '',
+    model: agent.model ?? '',
+    runtime: agent.runtime ?? agent.engine ?? ''
+  };
+}
+
+function buildRuntimeSelectOptions(params: {
+  runtimeOptions: ChatSessionTypeOption[];
+  currentRuntime: string;
+}): ChatSessionTypeOption[] {
+  const { runtimeOptions, currentRuntime: rawCurrentRuntime } = params;
+  const currentRuntime = rawCurrentRuntime.trim();
+  if (!currentRuntime) {
+    return runtimeOptions;
+  }
+  const normalizedCurrentRuntime = normalizeSessionType(currentRuntime);
+  if (runtimeOptions.some((option) => option.value === normalizedCurrentRuntime)) {
+    return runtimeOptions;
+  }
+  return [
+    ...runtimeOptions,
+    {
+      value: normalizedCurrentRuntime,
+      label: resolveSessionTypeLabel(normalizedCurrentRuntime),
+      ready: false,
+      reason: 'unavailable',
+      reasonMessage: null,
+      supportedModels: undefined,
+      recommendedModel: null,
+      cta: null
+    }
+  ].sort((left, right) => {
+    if (left.value === 'native') {
+      return -1;
+    }
+    if (right.value === 'native') {
+      return 1;
+    }
+    return left.value.localeCompare(right.value);
+  });
+}
+
+type AgentRuntimeSelectFieldProps = {
+  value: string;
+  disabled?: boolean;
+  runtimeOptions: ChatSessionTypeOption[];
+  defaultRuntime: string;
+  onChange: (value: string) => void;
+};
+
+function AgentRuntimeSelectField({
+  value,
+  disabled = false,
+  runtimeOptions,
+  defaultRuntime,
+  onChange
+}: AgentRuntimeSelectFieldProps) {
+  const normalizedValue = value.trim() ? normalizeSessionType(value) : '';
+  const selectOptions = buildRuntimeSelectOptions({
+    runtimeOptions,
+    currentRuntime: value
+  });
+  const selectedRuntimeOption = selectOptions.find((option) => option.value === normalizedValue) ?? null;
+  const helperText =
+    selectedRuntimeOption?.reasonMessage?.trim() ||
+    (selectedRuntimeOption?.ready === false ? t('agentsRuntimeUnavailableHelp') : '');
+
+  return (
+    <div className="space-y-2">
+      <Select
+        value={normalizedValue || defaultRuntime}
+        onValueChange={(nextValue) => onChange(nextValue === defaultRuntime ? '' : nextValue)}
+        disabled={disabled}
+      >
+        <SelectTrigger aria-label={t('agentsCardRuntimeLabel')} className="rounded-xl">
+          <SelectValue placeholder={t('agentsRuntimeSelectPlaceholder')} />
+        </SelectTrigger>
+        <SelectContent className="rounded-xl">
+          {selectOptions.map((option) => (
+            <SelectItem
+              key={option.value}
+              value={option.value}
+              disabled={option.ready === false && option.value !== normalizedValue}
+              className="rounded-lg"
+            >
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      {helperText ? <p className="text-xs text-gray-500">{helperText}</p> : null}
+    </div>
+  );
+}
+
+type AgentCreateDialogProps = {
+  open: boolean;
+  pending: boolean;
+  providerCatalog: ProviderModelCatalogItem[];
+  runtimeOptions: ChatSessionTypeOption[];
+  defaultRuntime: string;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (form: AgentCreateFormState) => Promise<void> | void;
+};
+
+export function AgentCreateDialog({
+  open,
+  pending,
+  providerCatalog,
+  runtimeOptions,
+  defaultRuntime,
+  onOpenChange,
+  onSubmit
+}: AgentCreateDialogProps) {
+  const [form, setForm] = useState<AgentCreateFormState>(EMPTY_AGENT_CREATE_FORM);
+
+  useEffect(() => {
+    if (open || pending) {
+      return;
+    }
+    setForm(EMPTY_AGENT_CREATE_FORM);
+  }, [open, pending]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col overflow-hidden border-none bg-[linear-gradient(180deg,#fff9f1_0%,#ffffff_24%)] p-0 sm:max-h-[760px] sm:max-w-xl">
+        <div className="shrink-0 border-b border-[#f0e2c8] px-6 py-6">
+          <DialogHeader className="text-left">
+            <DialogTitle>{t('agentsCreateDialogTitle')}</DialogTitle>
+            <DialogDescription>{t('agentsCreateDialogDescription')}</DialogDescription>
+          </DialogHeader>
+        </div>
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-6">
+          <div className="space-y-4">
+          <div className="grid gap-4 md:grid-cols-2">
+            <Input
+              value={form.id}
+              onChange={(event) =>
+                setForm((prev) => ({ ...prev, id: event.target.value }))
+              }
+              placeholder={t('agentsFormIdPlaceholder')}
+            />
+            <Input
+              value={form.displayName}
+              onChange={(event) =>
+                setForm((prev) => ({
+                  ...prev,
+                  displayName: event.target.value
+                }))
+              }
+              placeholder={t('agentsFormNamePlaceholder')}
+            />
+            <textarea
+              value={form.description}
+              onChange={(event) =>
+                setForm((prev) => ({
+                  ...prev,
+                  description: event.target.value
+                }))
+              }
+              placeholder={t('agentsFormDescriptionPlaceholder')}
+              rows={4}
+              className="min-h-28 rounded-xl border border-gray-200/80 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder:text-gray-300 focus:border-primary/40 focus:outline-none focus:ring-1 focus:ring-primary/40 md:col-span-2"
+            />
+            <Input
+              value={form.avatar}
+              onChange={(event) =>
+                setForm((prev) => ({ ...prev, avatar: event.target.value }))
+              }
+              placeholder={t('agentsFormAvatarPlaceholder')}
+            />
+            <Input
+              value={form.home}
+              onChange={(event) =>
+                setForm((prev) => ({ ...prev, home: event.target.value }))
+              }
+              placeholder={t('agentsFormHomePlaceholder')}
+            />
+            <ProviderScopedModelInput
+              value={form.model}
+              onChange={(value) =>
+                setForm((prev) => ({ ...prev, model: value }))
+              }
+              providerCatalog={providerCatalog}
+              disabled={pending}
+              className="md:col-span-2"
+            />
+            <AgentRuntimeSelectField
+              value={form.runtime}
+              onChange={(value) =>
+                setForm((prev) => ({ ...prev, runtime: value }))
+              }
+              runtimeOptions={runtimeOptions}
+              defaultRuntime={defaultRuntime}
+              disabled={pending}
+            />
+          </div>
+          <div className="rounded-2xl border border-[#efe3ca] bg-[#fff9ef] px-4 py-3 text-xs leading-6 text-[#7a6246]">
+            {t('agentsCreateDialogHint')}
+          </div>
+          </div>
+        </div>
+        <DialogFooter className="shrink-0 border-t border-[#f1e7d4] px-6 py-5">
+          <Button type="button" variant="ghost" onClick={() => onOpenChange(false)} disabled={pending}>
+            {t('cancel')}
+          </Button>
+          <Button
+            type="button"
+            className="rounded-2xl bg-[#1f5c4d] px-5 text-white hover:bg-[#184d40]"
+            onClick={() => void onSubmit(form)}
+            disabled={pending || form.id.trim().length === 0}
+          >
+            <Plus className="mr-2 h-4 w-4" />
+            {t('agentsCreateAction')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+type AgentEditDialogProps = {
+  agent: AgentProfileView | null;
+  pending: boolean;
+  providerCatalog: ProviderModelCatalogItem[];
+  runtimeOptions: ChatSessionTypeOption[];
+  defaultRuntime: string;
+  onOpenChange: (open: boolean) => void;
+  onSubmit: (agentId: string, form: AgentEditFormState) => Promise<void> | void;
+};
+
+export function AgentEditDialog({
+  agent,
+  pending,
+  providerCatalog,
+  runtimeOptions,
+  defaultRuntime,
+  onOpenChange,
+  onSubmit
+}: AgentEditDialogProps) {
+  const [form, setForm] = useState<AgentEditFormState>(EMPTY_AGENT_EDIT_FORM);
+
+  useEffect(() => {
+    if (!agent) {
+      setForm(EMPTY_AGENT_EDIT_FORM);
+      return;
+    }
+    setForm(toAgentEditFormState(agent));
+  }, [agent]);
+
+  return (
+    <Dialog open={agent !== null} onOpenChange={onOpenChange}>
+      <DialogContent className="flex max-h-[calc(100vh-2rem)] flex-col overflow-hidden border-none bg-[linear-gradient(180deg,#fff9f1_0%,#ffffff_24%)] p-0 sm:max-h-[760px] sm:max-w-xl">
+        <div className="shrink-0 border-b border-[#f0e2c8] px-6 py-6">
+          <DialogHeader className="text-left">
+            <DialogTitle>{t('agentsEditDialogTitle')}</DialogTitle>
+            <DialogDescription>{t('agentsEditDialogDescription')}</DialogDescription>
+          </DialogHeader>
+        </div>
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-6">
+          <div className="space-y-4">
+          <div className="rounded-2xl border border-[#efe3ca] bg-[#fff9ef] px-4 py-3 text-xs leading-6 text-[#7a6246]">
+            <div className="font-semibold uppercase tracking-[0.16em] text-[#9b6118]">
+              {t('agentsEditHomeReadonly')}
+            </div>
+            <div className="mt-1 break-all text-sm text-[#3f3323]">
+              {agent?.workspace ?? '-'}
+            </div>
+            <div className="mt-1 text-[11px] text-[#8d7456]">
+              {t('agentsEditHomeReadonlyHint')}
+            </div>
+          </div>
+          <div className="grid gap-4 md:grid-cols-2">
+            <Input
+              value={form.displayName}
+              onChange={(event) =>
+                setForm((prev) => ({
+                  ...prev,
+                  displayName: event.target.value
+                }))
+              }
+              placeholder={t('agentsFormNamePlaceholder')}
+            />
+            <textarea
+              value={form.description}
+              onChange={(event) =>
+                setForm((prev) => ({
+                  ...prev,
+                  description: event.target.value
+                }))
+              }
+              placeholder={t('agentsFormDescriptionPlaceholder')}
+              rows={4}
+              className="min-h-28 rounded-xl border border-gray-200/80 bg-white px-3.5 py-2.5 text-sm text-gray-900 placeholder:text-gray-300 focus:border-primary/40 focus:outline-none focus:ring-1 focus:ring-primary/40 md:col-span-2"
+            />
+            <Input
+              value={form.avatar}
+              onChange={(event) =>
+                setForm((prev) => ({ ...prev, avatar: event.target.value }))
+              }
+              placeholder={t('agentsFormAvatarPlaceholder')}
+            />
+            <ProviderScopedModelInput
+              value={form.model}
+              onChange={(value) =>
+                setForm((prev) => ({ ...prev, model: value }))
+              }
+              providerCatalog={providerCatalog}
+              disabled={pending}
+              className="md:col-span-2"
+            />
+            <AgentRuntimeSelectField
+              value={form.runtime}
+              onChange={(value) =>
+                setForm((prev) => ({ ...prev, runtime: value }))
+              }
+              runtimeOptions={runtimeOptions}
+              defaultRuntime={defaultRuntime}
+              disabled={pending}
+            />
+          </div>
+          </div>
+        </div>
+        <DialogFooter className="shrink-0 border-t border-[#f1e7d4] px-6 py-5">
+          <Button type="button" variant="ghost" onClick={() => onOpenChange(false)} disabled={pending}>
+            {t('cancel')}
+          </Button>
+          <Button
+            type="button"
+            className="rounded-2xl bg-[#1f5c4d] px-5 text-white hover:bg-[#184d40]"
+            onClick={() => agent && onSubmit(agent.id, form)}
+            disabled={pending || agent === null}
+          >
+            <Pencil className="mr-2 h-4 w-4" />
+            {t('agentsEditSaveAction')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/agents/AgentsPage.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { MemoryRouter } from 'react-router-dom';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { AgentsPage } from '@/components/agents/AgentsPage';
@@ -6,7 +7,18 @@ import { setLanguage } from '@/lib/i18n';
 
 const mocks = vi.hoisted(() => ({
   createAgent: vi.fn(),
+  updateAgent: vi.fn(),
   deleteAgent: vi.fn(),
+  sessionTypesQuery: {
+    data: {
+      defaultType: 'native',
+      options: [
+        { value: 'native', label: 'Native', ready: true },
+        { value: 'codex', label: 'Codex', ready: true },
+        { value: 'claude', label: 'Claude Code', ready: false, reasonMessage: 'Configure Claude Code first.' }
+      ]
+    }
+  },
   agentsQuery: {
     data: {
       agents: [
@@ -15,6 +27,7 @@ const mocks = vi.hoisted(() => ({
           displayName: 'Main',
           description: '系统默认入口与总控协作者。',
           builtIn: true,
+          model: 'openai/gpt-5.1',
           workspace: '~/.nextclaw/workspace',
           avatarUrl: null
         },
@@ -23,12 +36,44 @@ const mocks = vi.hoisted(() => ({
           displayName: 'Researcher',
           description: '负责调研、信息筛选与结论提炼。',
           builtIn: false,
+          model: 'openai/gpt-5.2',
           workspace: '~/.nextclaw/workspace/agents/researcher',
           avatarUrl: null
         }
       ]
     },
     isLoading: false
+  },
+  configQuery: {
+    data: {
+      agents: {
+        defaults: {
+          model: 'openai/gpt-5.1',
+          workspace: '~/.nextclaw/workspace'
+        }
+      },
+      providers: {
+        openai: {
+          enabled: true,
+          apiKeySet: true,
+          models: ['gpt-5.1', 'gpt-5.2']
+        }
+      }
+    }
+  },
+  configMetaQuery: {
+    data: {
+      providers: [
+        {
+          name: 'openai',
+          displayName: 'OpenAI',
+          modelPrefix: 'openai',
+          defaultModels: ['openai/gpt-5.1', 'openai/gpt-5.2'],
+          keywords: [],
+          envKey: 'OPENAI_API_KEY'
+        }
+      ]
+    }
   }
 }));
 
@@ -38,20 +83,45 @@ vi.mock('@/hooks/agents/useAgents', () => ({
     mutateAsync: mocks.createAgent,
     isPending: false
   }),
+  useUpdateAgent: () => ({
+    mutateAsync: mocks.updateAgent,
+    isPending: false
+  }),
   useDeleteAgent: () => ({
     mutate: mocks.deleteAgent,
     isPending: false
   })
 }));
 
+vi.mock('@/hooks/useConfig', () => ({
+  useConfig: () => mocks.configQuery,
+  useConfigMeta: () => mocks.configMetaQuery
+}));
+
+vi.mock('@/hooks/use-ncp-chat-session-types', () => ({
+  useNcpChatSessionTypes: () => mocks.sessionTypesQuery
+}));
+
 describe('AgentsPage', () => {
   beforeEach(() => {
     setLanguage('zh');
     mocks.createAgent.mockReset();
+    mocks.updateAgent.mockReset();
     mocks.deleteAgent.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 the agents workspace in Chinese and keeps core actions visible', () => {
+  it('renders the agents workspace in Chinese and keeps core actions visible', async () => {
+    const user = userEvent.setup();
+
     render(
       <MemoryRouter>
         <AgentsPage />
@@ -63,8 +133,49 @@ describe('AgentsPage', () => {
     expect(screen.getByText('全部 Agent')).toBeTruthy();
     expect(screen.getAllByText('主目录').length).toBeGreaterThan(0);
     expect(screen.getAllByRole('button', { name: '开始对话' })).toHaveLength(2);
+    expect(screen.getAllByRole('button', { name: '编辑' })).toHaveLength(2);
     expect(screen.getByText('负责调研、信息筛选与结论提炼。')).toBeTruthy();
     expect(screen.queryByText('专属 Agent 身份，可沉淀自己的记忆、技能与角色风格。')).toBeNull();
     expect(screen.queryByText('Agent Gallery')).toBeNull();
+
+    await user.click(screen.getAllByRole('button', { name: '编辑' })[1]);
+
+    expect(screen.getByText('编辑 Agent 身份')).toBeTruthy();
+    expect(screen.getByText('主目录保持不变')).toBeTruthy();
+    expect(screen.getByDisplayValue('Researcher')).toBeTruthy();
+    expect(screen.getByDisplayValue('负责调研、信息筛选与结论提炼。').tagName).toBe('TEXTAREA');
+    expect(screen.getByDisplayValue('gpt-5.2')).toBeTruthy();
+  });
+
+  it('uses a runtime dropdown instead of manual text input when editing an agent', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <MemoryRouter>
+        <AgentsPage />
+      </MemoryRouter>
+    );
+
+    await user.click(screen.getAllByRole('button', { name: '编辑' })[1]);
+
+    const runtimeTrigger = screen.getByRole('combobox', { name: 'Runtime' });
+    expect(screen.queryByPlaceholderText('Runtime（如 native 或 codex，可选）')).toBeNull();
+    expect(runtimeTrigger.textContent).toContain('Native');
+    expect(screen.queryByText('跟随默认 Runtime')).toBeNull();
+
+    await user.click(runtimeTrigger);
+    await user.click(screen.getByRole('option', { name: 'Codex' }));
+    await user.click(screen.getByRole('button', { name: '保存编辑' }));
+
+    expect(mocks.updateAgent).toHaveBeenCalledWith({
+      agentId: 'researcher',
+      data: {
+        displayName: 'Researcher',
+        description: '负责调研、信息筛选与结论提炼。',
+        avatar: '',
+        model: 'openai/gpt-5.2',
+        runtime: 'codex'
+      }
+    });
   });
 });