@nextclaw/ui 0.15.5 → 0.15.6

package/src/features/chat/features/input/utils/chat-inline-token.utils.ts

@@ -1,11 +1,19 @@
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
+import {
+  CHAT_INLINE_TOKENS_METADATA_KEY,
+  CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND,
+  CHAT_WORKSPACE_FILE_TOKEN_KIND,
+  type ChatInlineTokenMetadata,
+} from '@nextclaw/shared';
+import { serializeChatComposerTokenText } from './chat-composer-token-protocol.utils';
 
-export const CHAT_UI_INLINE_TOKENS_METADATA_KEY = 'ui_inline_tokens';
-const CHAT_SKILL_TOKEN_PREFIX = '$';
+export { CHAT_INLINE_TOKENS_METADATA_KEY };
 const CHAT_PANEL_APP_TOKEN_PREFIX = '@panel-app:';
 const CHAT_PANEL_APP_TOKEN_PATTERN = /@panel-app:([A-Za-z0-9_-]+)/g;
+const CHAT_WORKSPACE_FILE_TOKEN_PATTERN = /@file:([^\s]+)/g;
+const CHAT_WORKSPACE_DIRECTORY_TOKEN_PATTERN = /@folder:([^\s]+)/g;
 
-export type ChatInlineTokenSource = { kind: string; key: string; label: string; rawText: string };
+export type ChatInlineTokenSource = ChatInlineTokenMetadata;
 
 function isRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
@@ -33,22 +41,60 @@ function dedupeInlineTokens(tokens: readonly ChatInlineTokenSource[]): ChatInlin
   return output;
 }
 
-export function buildInlineSkillTokensFromComposer(nodes: readonly ChatComposerNode[]): ChatInlineTokenSource[] {
+export function buildInlineTokensFromComposer(nodes: readonly ChatComposerNode[]): ChatInlineTokenSource[] {
   const tokens: ChatInlineTokenSource[] = [];
   for (const node of nodes) {
-    if (node.type !== 'token' || node.tokenKind !== 'skill') {
+    if (node.type !== 'token') {
+      continue;
+    }
+    if (
+      node.tokenKind !== 'skill' &&
+      node.tokenKind !== CHAT_WORKSPACE_FILE_TOKEN_KIND &&
+      node.tokenKind !== CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND
+    ) {
+      continue;
+    }
+    const rawText = serializeChatComposerTokenText(node);
+    if (!rawText) {
       continue;
     }
     tokens.push({
-      kind: 'skill',
+      kind: node.tokenKind,
       key: node.tokenKey,
       label: node.label,
-      rawText: `${CHAT_SKILL_TOKEN_PREFIX}${node.tokenKey}`
+      rawText,
     });
   }
   return dedupeInlineTokens(tokens);
 }
 
+function appendWorkspaceTokens(params: {
+  kind: typeof CHAT_WORKSPACE_FILE_TOKEN_KIND | typeof CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND;
+  pattern: RegExp;
+  text: string;
+  tokens: ChatInlineTokenSource[];
+}): void {
+  const { kind, pattern, text, tokens } = params;
+  for (const match of text.matchAll(pattern)) {
+    const encodedKey = match[1];
+    if (!encodedKey) {
+      continue;
+    }
+    let key: string;
+    try {
+      key = decodeURIComponent(encodedKey);
+    } catch {
+      continue;
+    }
+    tokens.push({
+      kind,
+      key,
+      label: key.split('/').filter(Boolean).at(-1) ?? key,
+      rawText: match[0],
+    });
+  }
+}
+
 export function buildInlineTokensFromTextProtocol(text: string): ChatInlineTokenSource[] {
   const tokens: ChatInlineTokenSource[] = [];
   for (const match of text.matchAll(CHAT_PANEL_APP_TOKEN_PATTERN)) {
@@ -63,6 +109,18 @@ export function buildInlineTokensFromTextProtocol(text: string): ChatInlineToken
       rawText: `${CHAT_PANEL_APP_TOKEN_PREFIX}${key}`
     });
   }
+  appendWorkspaceTokens({
+    kind: CHAT_WORKSPACE_FILE_TOKEN_KIND,
+    pattern: CHAT_WORKSPACE_FILE_TOKEN_PATTERN,
+    text,
+    tokens,
+  });
+  appendWorkspaceTokens({
+    kind: CHAT_WORKSPACE_DIRECTORY_TOKEN_KIND,
+    pattern: CHAT_WORKSPACE_DIRECTORY_TOKEN_PATTERN,
+    text,
+    tokens,
+  });
   return dedupeInlineTokens(tokens);
 }
 
@@ -76,7 +134,7 @@ export function resolveInlineTokensForText(
 export function readInlineTokensFromMetadata(
   metadata: Record<string, unknown> | undefined
 ): ChatInlineTokenSource[] {
-  const raw = metadata?.[CHAT_UI_INLINE_TOKENS_METADATA_KEY];
+  const raw = metadata?.[CHAT_INLINE_TOKENS_METADATA_KEY];
   if (!Array.isArray(raw)) {
     return [];
   }

package/src/features/chat/features/input/utils/chat-input-bar.utils.ts

@@ -278,6 +278,7 @@ export function buildSkillPickerModel(params: {
   const recentKeySet = new Set(groupedRecentSkillValues ?? []);
   return {
     title: texts.title,
+    allGroupsLabel: texts.allSkillsLabel,
     searchPlaceholder: texts.searchPlaceholder,
     emptyLabel: texts.emptyLabel,
     loadingLabel: texts.loadingLabel,

package/src/features/chat/features/ncp/hooks/__tests__/use-hydrated-ncp-agent.test.tsx

@@ -1,19 +1,57 @@
-import { renderHook, waitFor } from "@testing-library/react";
-import type { NcpAgentClientEndpoint } from "@nextclaw/ncp";
-import { useHydratedNcpAgent } from "@nextclaw/ncp-react";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { NcpEventType, type NcpAgentClientEndpoint } from "@nextclaw/ncp";
+import { useHydratedNcpAgent, useNcpAgentRuntime } from "@nextclaw/ncp-react";
+import { DefaultNcpAgentConversationStateManager } from "@nextclaw/ncp-toolkit";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
 const mocks = vi.hoisted(() => ({
+  send: vi.fn(),
   stream: vi.fn(),
   stop: vi.fn(),
 }));
 
 describe("useHydratedNcpAgent", () => {
   beforeEach(() => {
+    mocks.send.mockReset();
     mocks.stream.mockReset();
     mocks.stop.mockReset();
   });
 
+  it("clears a draft conversation error when a valid retry starts", async () => {
+    const client = {
+      send: mocks.send.mockResolvedValue(null),
+      stop: mocks.stop.mockResolvedValue(undefined),
+      stream: mocks.stream.mockResolvedValue(undefined),
+      subscribe: vi.fn(() => () => {}),
+    } as unknown as NcpAgentClientEndpoint;
+    const manager = new DefaultNcpAgentConversationStateManager();
+    const { result } = renderHook(() =>
+      useNcpAgentRuntime({
+        client,
+        manager,
+      }),
+    );
+
+    await act(async () => {
+      await manager.dispatch({
+        occurredAt: new Date().toISOString(),
+        type: NcpEventType.EndpointError,
+        payload: {
+          code: "runtime-error",
+          message: "network error",
+        },
+      });
+    });
+    expect(result.current.snapshot.error?.message).toBe("network error");
+
+    await act(async () => {
+      await result.current.send("retry");
+    });
+
+    expect(result.current.snapshot.error).toBeNull();
+    expect(mocks.send).toHaveBeenCalledOnce();
+  });
+
   it("treats a newly selected session as hydrating immediately on rerender", async () => {
     const client = {
       stop: mocks.stop.mockResolvedValue(undefined),

package/src/features/chat/features/project/components/__tests__/chat-project-create-dialog.test.tsx

@@ -0,0 +1,67 @@
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { ChatProjectCreateDialog } from '@/features/chat/features/project/components/chat-project-create-dialog';
+import { setLanguage } from '@/shared/lib/i18n';
+
+const pathPickerSpy = vi.fn();
+
+vi.mock('@/shared/components/path-picker/server-path-picker-dialog', () => ({
+  ServerPathPickerDialog: (props: unknown) => pathPickerSpy(props),
+}));
+
+describe('ChatProjectCreateDialog', () => {
+  it('selects the optional target directory with the shared path picker', async () => {
+    setLanguage('zh');
+    const user = userEvent.setup();
+    const onCreate = vi.fn(async () => undefined);
+
+    render(
+      <ChatProjectCreateDialog
+        open
+        defaultWorkspacePath="/workspace"
+        templates={[
+          { id: 'empty', name: 'Empty', description: 'Empty project' },
+          {
+            id: 'knowledge-base',
+            name: 'Knowledge base',
+            description: 'Knowledge base project',
+          },
+        ]}
+        isCreating={false}
+        onOpenChange={() => {}}
+        onCreate={onCreate}
+      />,
+    );
+
+    await user.type(screen.getByLabelText('项目名称'), '个人知识库');
+    fireEvent.change(document.querySelector('select')!, {
+      target: { value: 'knowledge-base' },
+    });
+    await user.click(screen.getByRole('button', { name: '浏览' }));
+    expect(pathPickerSpy).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        open: true,
+        currentPath: '',
+        defaultWorkspacePath: '/workspace',
+        title: '选择项目目标目录',
+      }),
+    );
+    const pickerProps = pathPickerSpy.mock.lastCall?.[0] as {
+      onConfirm: (path: string) => void;
+    };
+    act(() => pickerProps.onConfirm('/srv/knowledge'));
+    expect((screen.getByLabelText('目标目录（可选）') as HTMLInputElement).value).toBe(
+      '/srv/knowledge',
+    );
+    await user.click(screen.getByRole('button', { name: '创建项目' }));
+
+    await waitFor(() => {
+      expect(onCreate).toHaveBeenCalledWith({
+        name: '个人知识库',
+        rootPath: '/srv/knowledge',
+        template: 'knowledge-base',
+      });
+    });
+  });
+});

package/src/features/chat/features/project/components/chat-project-create-dialog.tsx

@@ -0,0 +1,203 @@
+import { useState } from 'react';
+import { FolderOpen } from 'lucide-react';
+import type { ProjectCreateRequest, ProjectTemplateView } from '@/shared/lib/api';
+import { ServerPathPickerDialog } from '@/shared/components/path-picker/server-path-picker-dialog';
+import { Button } from '@/shared/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/shared/components/ui/dialog';
+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 { t } from '@/shared/lib/i18n';
+
+type ProjectTemplateId = NonNullable<ProjectCreateRequest['template']>;
+
+type ChatProjectCreateDialogProps = {
+  open: boolean;
+  defaultWorkspacePath?: string | null;
+  templates: readonly ProjectTemplateView[];
+  isCreating: boolean;
+  errorMessage?: string | null;
+  onOpenChange: (open: boolean) => void;
+  onCreate: (input: ProjectCreateRequest) => Promise<void>;
+};
+
+function projectTemplateLabel(templateId: ProjectTemplateId): string {
+  return t(
+    templateId === 'knowledge-base'
+      ? 'chatProjectTemplateKnowledgeBase'
+      : 'chatProjectTemplateEmpty',
+  );
+}
+
+export function ChatProjectCreateDialog({
+  open,
+  defaultWorkspacePath,
+  templates,
+  isCreating,
+  errorMessage,
+  onOpenChange,
+  onCreate,
+}: ChatProjectCreateDialogProps) {
+  const [name, setName] = useState('');
+  const [rootPath, setRootPath] = useState('');
+  const [pathPickerOpen, setPathPickerOpen] = useState(false);
+  const [template, setTemplate] = useState<ProjectTemplateId>('empty');
+  const availableTemplateIds = templates.length > 0
+    ? templates.map((entry) => entry.id)
+    : ['empty' as const];
+  const normalizedName = name.trim();
+
+  const resetForm = () => {
+    setName('');
+    setRootPath('');
+    setTemplate('empty');
+    setPathPickerOpen(false);
+  };
+
+  const closeDialog = () => {
+    if (isCreating) {
+      return;
+    }
+    resetForm();
+    onOpenChange(false);
+  };
+
+  return (
+    <>
+      <Dialog
+        open={open}
+        onOpenChange={(nextOpen) => {
+          if (nextOpen) {
+            onOpenChange(true);
+            return;
+          }
+          closeDialog();
+        }}
+      >
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>{t('chatProjectCreateTitle')}</DialogTitle>
+            <DialogDescription>{t('chatProjectCreateDescription')}</DialogDescription>
+          </DialogHeader>
+          <form
+            className="space-y-4"
+            onSubmit={(event) => {
+              event.preventDefault();
+              if (!normalizedName || isCreating) {
+                return;
+              }
+              const normalizedRootPath = rootPath.trim();
+              void onCreate({
+                name: normalizedName,
+                template,
+                ...(normalizedRootPath ? { rootPath: normalizedRootPath } : {}),
+              }).then(resetForm).catch(() => undefined);
+            }}
+          >
+            <div className="space-y-2">
+              <Label htmlFor="chat-project-name">{t('chatProjectNameLabel')}</Label>
+              <Input
+                id="chat-project-name"
+                value={name}
+                onChange={(event) => setName(event.target.value)}
+                placeholder={t('chatProjectNamePlaceholder')}
+                autoFocus
+                disabled={isCreating}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="chat-project-template">{t('chatProjectTemplateLabel')}</Label>
+              <Select
+                value={template}
+                onValueChange={(value) => setTemplate(value as ProjectTemplateId)}
+                disabled={isCreating}
+              >
+                <SelectTrigger id="chat-project-template">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {availableTemplateIds.map((templateId) => (
+                    <SelectItem key={templateId} value={templateId}>
+                      {projectTemplateLabel(templateId)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="chat-project-root-path">{t('chatProjectPathLabel')}</Label>
+              <div className="flex gap-2">
+                <Input
+                  id="chat-project-root-path"
+                  value={rootPath}
+                  onChange={(event) => setRootPath(event.target.value)}
+                  placeholder={t('chatProjectPathPlaceholder')}
+                  disabled={isCreating}
+                />
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={() => setPathPickerOpen(true)}
+                  disabled={isCreating}
+                >
+                  <FolderOpen className="mr-2 h-4 w-4" />
+                  {t('browse')}
+                </Button>
+              </div>
+              <p className="text-xs leading-relaxed text-muted-foreground">
+                {t('chatProjectPathHint')}
+              </p>
+            </div>
+
+            {errorMessage ? (
+              <p role="alert" className="text-sm text-destructive">
+                {errorMessage}
+              </p>
+            ) : null}
+
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={closeDialog} disabled={isCreating}>
+                {t('cancel')}
+              </Button>
+              <Button type="submit" disabled={!normalizedName || isCreating}>
+                {isCreating ? t('saving') : t('chatProjectCreateAction')}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+      <ServerPathPickerDialog
+        open={pathPickerOpen}
+        currentPath={rootPath}
+        defaultWorkspacePath={defaultWorkspacePath}
+        isSaving={false}
+        onOpenChange={setPathPickerOpen}
+        onConfirm={(path) => {
+          setRootPath(path);
+          setPathPickerOpen(false);
+        }}
+        title={t('chatProjectPathPickerTitle')}
+        description={t('chatProjectPathPickerDescription')}
+        pathLabel={t('chatProjectPathLabel')}
+        pathPlaceholder={t('chatProjectPathPlaceholder')}
+        confirmLabel={t('selectCurrentDirectory')}
+        hint={t('chatProjectPathHint')}
+      />
+    </>
+  );
+}

package/src/features/chat/features/session/components/session-header/__tests__/chat-session-header-actions.test.tsx

@@ -32,7 +32,7 @@ describe('ChatSessionHeaderActions', () => {
         sessionKey="session-1"
         canDeleteSession
         isDeletePending={false}
-        projectRoot="/tmp/project-alpha"
+        currentPath="/tmp/project-alpha"
         isWorkspaceOpen={false}
         onToggleWorkspace={mocks.onToggleWorkspace}
         onDeleteSession={mocks.onDeleteSession}
@@ -55,7 +55,7 @@ describe('ChatSessionHeaderActions', () => {
         sessionKey="draft-session"
         canDeleteSession={false}
         isDeletePending={false}
-        projectRoot={null}
+        currentPath={null}
         isWorkspaceOpen={false}
         onToggleWorkspace={mocks.onToggleWorkspace}
         onDeleteSession={mocks.onDeleteSession}
@@ -77,7 +77,7 @@ describe('ChatSessionHeaderActions', () => {
         sessionKey="session-codex"
         canDeleteSession
         isDeletePending={false}
-        projectRoot={null}
+        currentPath={null}
         metadata={{
           codex_thread_id: 'thread-123',
           runtime: 'codex',
@@ -106,7 +106,7 @@ describe('ChatSessionHeaderActions', () => {
         sessionKey="session-children"
         canDeleteSession
         isDeletePending={false}
-        projectRoot={null}
+        currentPath={null}
         isWorkspaceOpen={false}
         onToggleWorkspace={mocks.onToggleWorkspace}
         onDeleteSession={mocks.onDeleteSession}
@@ -126,7 +126,7 @@ describe('ChatSessionHeaderActions', () => {
         sessionKey="session-actions"
         canDeleteSession
         isDeletePending={false}
-        projectRoot={null}
+        currentPath={null}
         isWorkspaceOpen={false}
         onToggleWorkspace={mocks.onToggleWorkspace}
         onDeleteSession={mocks.onDeleteSession}
@@ -146,7 +146,7 @@ describe('ChatSessionHeaderActions', () => {
         sessionKey="session-actions"
         canDeleteSession
         isDeletePending={false}
-        projectRoot={null}
+        currentPath={null}
         isWorkspaceOpen={false}
         onToggleWorkspace={mocks.onToggleWorkspace}
         onDeleteSession={mocks.onDeleteSession}
@@ -169,7 +169,7 @@ describe('ChatSessionHeaderActions', () => {
         sessionKey="session-actions"
         canDeleteSession
         isDeletePending={false}
-        projectRoot={null}
+        currentPath={null}
         isWorkspaceOpen
         onToggleWorkspace={mocks.onToggleWorkspace}
         onDeleteSession={mocks.onDeleteSession}

package/src/features/chat/features/session/components/session-header/__tests__/chat-session-project-dialog.test.tsx

@@ -0,0 +1,47 @@
+import { render } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { ChatSessionProjectDialog } from "@/features/chat/features/session/components/session-header/chat-session-project-dialog";
+
+const pathPickerSpy = vi.fn((_props: unknown) => null);
+
+vi.mock("@/shared/components/path-picker/server-path-picker-dialog", () => ({
+  ServerPathPickerDialog: (props: unknown) => pathPickerSpy(props),
+}));
+
+describe("ChatSessionProjectDialog", () => {
+  it("uses the default workspace as the browse start and quick-access location", () => {
+    render(
+      <ChatSessionProjectDialog
+        open
+        currentProjectRoot={null}
+        defaultWorkspacePath="/tmp/default-workspace"
+        isSaving={false}
+        onOpenChange={() => undefined}
+        onSave={() => undefined}
+      />,
+    );
+
+    expect(pathPickerSpy).toHaveBeenCalledWith(expect.objectContaining({
+      currentPath: null,
+      defaultWorkspacePath: "/tmp/default-workspace",
+    }));
+  });
+
+  it("prefers an explicit project over the default workdir", () => {
+    render(
+      <ChatSessionProjectDialog
+        open
+        currentProjectRoot="/tmp/project"
+        defaultWorkspacePath="/tmp/default-workspace"
+        isSaving={false}
+        onOpenChange={() => undefined}
+        onSave={() => undefined}
+      />,
+    );
+
+    expect(pathPickerSpy).toHaveBeenLastCalledWith(expect.objectContaining({
+      currentPath: "/tmp/project",
+      defaultWorkspacePath: "/tmp/default-workspace",
+    }));
+  });
+});

package/src/features/chat/features/session/components/session-header/chat-session-header-actions.tsx

@@ -15,7 +15,8 @@ type ChatSessionHeaderActionsProps = {
   sessionKey: string;
   canDeleteSession: boolean;
   isDeletePending: boolean;
-  projectRoot?: string | null;
+  currentPath?: string | null;
+  defaultWorkspacePath?: string | null;
   metadata?: Record<string, unknown> | null;
   isWorkspaceOpen: boolean;
   onToggleWorkspace: () => void;
@@ -26,7 +27,8 @@ export function ChatSessionHeaderActions({
   sessionKey,
   canDeleteSession,
   isDeletePending,
-  projectRoot,
+  currentPath,
+  defaultWorkspacePath,
   metadata,
   isWorkspaceOpen,
   onToggleWorkspace,
@@ -119,7 +121,8 @@ export function ChatSessionHeaderActions({
 
       <ChatSessionProjectDialog
         open={isDialogOpen}
-        currentProjectRoot={projectRoot}
+        currentProjectRoot={currentPath}
+        defaultWorkspacePath={defaultWorkspacePath}
         isSaving={isProjectPending}
         onOpenChange={setIsDialogOpen}
         onSave={runProjectUpdate}

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

@@ -15,6 +15,7 @@ type ChatSessionProjectBadgeProps = {
   sessionKey: string;
   projectName: string;
   projectRoot?: string | null;
+  defaultWorkspacePath?: string | null;
   persistToServer: boolean;
 };
 
@@ -26,6 +27,7 @@ export function ChatSessionProjectBadge({
   sessionKey,
   projectName,
   projectRoot,
+  defaultWorkspacePath,
   persistToServer,
 }: ChatSessionProjectBadgeProps) {
   const updateSessionProject = useChatSessionProject();
@@ -106,6 +108,7 @@ export function ChatSessionProjectBadge({
       <ChatSessionProjectDialog
         open={isDialogOpen}
         currentProjectRoot={projectRoot}
+        defaultWorkspacePath={defaultWorkspacePath}
         isSaving={isProjectPending}
         onOpenChange={setIsDialogOpen}
         onSave={runProjectUpdate}

package/src/features/chat/features/session/components/session-header/chat-session-project-dialog.tsx

@@ -4,6 +4,7 @@ import { t } from '@/shared/lib/i18n';
 type ChatSessionProjectDialogProps = {
   open: boolean;
   currentProjectRoot?: string | null;
+  defaultWorkspacePath?: string | null;
   isSaving: boolean;
   onOpenChange: (open: boolean) => void;
   onSave: (projectRoot: string) => Promise<void> | void;
@@ -12,6 +13,7 @@ type ChatSessionProjectDialogProps = {
 export function ChatSessionProjectDialog({
   open,
   currentProjectRoot,
+  defaultWorkspacePath,
   isSaving,
   onOpenChange,
   onSave,
@@ -20,6 +22,7 @@ export function ChatSessionProjectDialog({
     <ServerPathPickerDialog
       open={open}
       currentPath={currentProjectRoot}
+      defaultWorkspacePath={defaultWorkspacePath}
       isSaving={isSaving}
       onOpenChange={onOpenChange}
       onConfirm={onSave}