@nextclaw/ui 0.6.15 → 0.7.0

package/src/components/marketplace/MarketplacePage.tsx

@@ -11,6 +11,7 @@ import type {
 } from '@/api/types';
 import { fetchMarketplacePluginContent, fetchMarketplaceSkillContent } from '@/api/marketplace';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Skeleton } from '@/components/ui/skeleton';
 import { Tabs } from '@/components/ui/tabs-custom';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { useDocBrowser } from '@/components/doc-browser';
@@ -30,6 +31,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 const PAGE_SIZE = 12;
+const SKELETON_CARD_COUNT = PAGE_SIZE;
 
 type ScopeType = 'all' | 'installed';
 
@@ -362,16 +364,16 @@ function MarketplaceListCard(props: {
   onInstall: (item: MarketplaceItemSummary) => void;
   onManage: (action: MarketplaceManageAction, record: MarketplaceInstalledRecord) => void;
 }) {
-  const record = props.record;
+  const { item, record, localeFallbacks, installState, manageState, onOpen, onInstall, onManage } = props;
   const pluginRecord = record?.type === 'plugin' ? record : undefined;
-  const type = props.item?.type ?? record?.type;
-  const title = props.item?.name ?? record?.label ?? record?.id ?? record?.spec ?? t('marketplaceUnknownItem');
-  const summary = pickLocalizedText(props.item?.summaryI18n, props.item?.summary, props.localeFallbacks)
+  const type = item?.type ?? record?.type;
+  const title = item?.name ?? record?.label ?? record?.id ?? record?.spec ?? t('marketplaceUnknownItem');
+  const summary = pickLocalizedText(item?.summaryI18n, item?.summary, localeFallbacks)
     || (record ? t('marketplaceInstalledLocalSummary') : '');
-  const spec = props.item?.install.spec ?? record?.spec ?? '';
+  const spec = item?.install.spec ?? record?.spec ?? '';
 
   const targetId = record?.id || record?.spec;
-  const busyForRecord = Boolean(targetId) && props.manageState.isPending && props.manageState.targetId === targetId;
+  const busyForRecord = Boolean(targetId) && manageState.isPending && manageState.targetId === targetId;
 
   const canToggle = Boolean(pluginRecord);
   const canUninstallPlugin = record?.type === 'plugin' && record.origin !== 'bundled';
@@ -379,14 +381,14 @@ function MarketplaceListCard(props: {
   const canUninstall = Boolean(canUninstallPlugin || canUninstallSkill);
 
   const isDisabled = record ? (record.enabled === false || record.runtimeStatus === 'disabled') : false;
-  const installSpec = props.item?.install.spec;
-  const isInstalling = typeof installSpec === 'string' && props.installState.installingSpecs.has(installSpec);
+  const installSpec = item?.install.spec;
+  const isInstalling = typeof installSpec === 'string' && installState.installingSpecs.has(installSpec);
 
   const displayType = type === 'plugin' ? t('marketplaceTypePlugin') : type === 'skill' ? t('marketplaceTypeSkill') : t('marketplaceTypeExtension');
 
   return (
     <article
-      onClick={props.onOpen}
+      onClick={onOpen}
       className="group bg-white border border-gray-200/40 hover:border-blue-300/80 rounded-2xl px-5 py-4 hover:shadow-md shadow-sm transition-all flex items-start gap-3.5 justify-between cursor-pointer"
     >
       <div className="flex gap-3 min-w-0 flex-1 h-full items-start">
@@ -434,11 +436,11 @@ function MarketplaceListCard(props: {
       </div>
 
       <div className="shrink-0 flex items-center h-full">
-        {props.item && !record && (
+        {item && !record && (
           <button
             onClick={(event) => {
               event.stopPropagation();
-              props.onInstall(props.item as MarketplaceItemSummary);
+              onInstall(item);
             }}
             disabled={isInstalling}
             className="inline-flex items-center gap-1.5 h-8 px-4 rounded-xl text-xs font-medium bg-primary text-white hover:bg-primary-600 disabled:opacity-50 transition-colors"
@@ -449,29 +451,29 @@ function MarketplaceListCard(props: {
 
         {pluginRecord && canToggle && (
           <button
-            disabled={props.manageState.isPending}
+            disabled={manageState.isPending}
             onClick={(event) => {
               event.stopPropagation();
-              props.onManage(isDisabled ? 'enable' : 'disable', pluginRecord);
+              onManage(isDisabled ? 'enable' : 'disable', pluginRecord);
             }}
             className="inline-flex items-center h-8 px-4 rounded-xl text-xs font-medium border border-gray-200/80 text-gray-600 bg-white hover:bg-gray-50 hover:border-gray-300 disabled:opacity-50 transition-colors"
           >
-            {busyForRecord && props.manageState.action !== 'uninstall'
-              ? (props.manageState.action === 'enable' ? t('marketplaceEnabling') : t('marketplaceDisabling'))
+            {busyForRecord && manageState.action !== 'uninstall'
+              ? (manageState.action === 'enable' ? t('marketplaceEnabling') : t('marketplaceDisabling'))
               : (isDisabled ? t('marketplaceEnable') : t('marketplaceDisable'))}
           </button>
         )}
 
         {record && canUninstall && (
           <button
-            disabled={props.manageState.isPending}
+            disabled={manageState.isPending}
             onClick={(event) => {
               event.stopPropagation();
-              props.onManage('uninstall', record);
+              onManage('uninstall', record);
             }}
             className="inline-flex items-center h-8 px-4 rounded-xl text-xs font-medium border border-rose-100 text-rose-500 bg-white hover:bg-rose-50 hover:border-rose-200 disabled:opacity-50 transition-colors"
           >
-            {busyForRecord && props.manageState.action === 'uninstall' ? t('marketplaceRemoving') : t('marketplaceUninstall')}
+            {busyForRecord && manageState.action === 'uninstall' ? t('marketplaceRemoving') : t('marketplaceUninstall')}
           </button>
         )}
       </div>
@@ -479,6 +481,38 @@ function MarketplaceListCard(props: {
   );
 }
 
+function MarketplaceListSkeleton(props: {
+  count?: number;
+}) {
+  const count = props.count ?? SKELETON_CARD_COUNT;
+
+  return (
+    <>
+      {Array.from({ length: count }, (_, index) => (
+        <article
+          key={`marketplace-skeleton-${index}`}
+          className="rounded-2xl border border-gray-200/40 bg-white px-5 py-4 shadow-sm"
+        >
+          <div className="flex items-start gap-3.5 justify-between">
+            <div className="flex min-w-0 flex-1 gap-3">
+              <Skeleton className="h-10 w-10 shrink-0 rounded-xl" />
+              <div className="min-w-0 flex-1 space-y-2 pt-0.5">
+                <Skeleton className="h-4 w-32 max-w-[70%]" />
+                <div className="flex items-center gap-2">
+                  <Skeleton className="h-3 w-12" />
+                  <Skeleton className="h-3 w-24" />
+                </div>
+                <Skeleton className="h-3 w-full" />
+              </div>
+            </div>
+            <Skeleton className="h-8 w-20 shrink-0 rounded-xl" />
+          </div>
+        </article>
+      ))}
+    </>
+  );
+}
+
 function PaginationBar(props: {
   page: number;
   totalPages: number;
@@ -510,11 +544,11 @@ function PaginationBar(props: {
 }
 
 export function MarketplacePage(props: MarketplacePageProps = {}) {
+  const { forcedType } = props;
   const navigate = useNavigate();
   const params = useParams<{ type?: string }>();
   const { language } = useI18n();
   const docBrowser = useDocBrowser();
-  const forcedType = props.forcedType;
 
   const routeType: MarketplaceRouteType | null = useMemo(() => {
     if (forcedType === 'plugins' || forcedType === 'skills') {
@@ -650,10 +684,17 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
 
   const total = scope === 'installed' ? installedEntries.length : (itemsQuery.data?.total ?? 0);
   const totalPages = scope === 'installed' ? 1 : (itemsQuery.data?.totalPages ?? 0);
+  const showCatalogSkeleton = scope === 'all' && itemsQuery.isLoading && !itemsQuery.data;
+  const showInstalledSkeleton = scope === 'installed' && installedQuery.isLoading && !installedQuery.data;
+  const showListSkeleton = showCatalogSkeleton || showInstalledSkeleton;
+  const isListRefreshing = !showListSkeleton && (
+    (scope === 'all' && itemsQuery.isFetching)
+    || (scope === 'installed' && installedQuery.isFetching)
+  );
 
   const listSummary = useMemo(() => {
     if (scope === 'installed') {
-      if (installedQuery.isLoading) {
+      if (installedQuery.isLoading && !installedQuery.data) {
         return t('loading');
       }
       return `${installedEntries.length} ${t(copyKeys.installedCountSuffix)}`;
@@ -664,7 +705,7 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
     }
 
     return `${allItems.length} / ${total}`;
-  }, [scope, installedQuery.isLoading, installedEntries.length, itemsQuery.data, allItems.length, total, copyKeys.installedCountSuffix]);
+  }, [scope, installedQuery.data, installedQuery.isLoading, installedEntries.length, itemsQuery.data, allItems.length, total, copyKeys.installedCountSuffix]);
 
   const installState: InstallState = { installingSpecs };
 
@@ -868,9 +909,17 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
           </div>
         )}
 
-        <div className="min-h-0 flex-1 overflow-y-auto custom-scrollbar pr-1">
-          <div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-3">
-            {scope === 'all' && allItems.map((item) => (
+        <div className="min-h-0 flex-1 overflow-y-auto custom-scrollbar pr-1" aria-busy={showListSkeleton || isListRefreshing}>
+          <div
+            data-testid={showListSkeleton ? 'marketplace-list-skeleton' : undefined}
+            className={cn(
+              'grid grid-cols-1 gap-3 lg:grid-cols-2 2xl:grid-cols-3 transition-opacity',
+              isListRefreshing ? 'opacity-70' : 'opacity-100'
+            )}
+          >
+            {showListSkeleton && <MarketplaceListSkeleton />}
+
+            {!showListSkeleton && scope === 'all' && allItems.map((item) => (
               <MarketplaceListCard
                 key={item.id}
                 item={item}
@@ -884,7 +933,7 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
               />
             ))}
 
-            {scope === 'installed' && installedEntries.map((entry) => (
+            {!showListSkeleton && scope === 'installed' && installedEntries.map((entry) => (
               <MarketplaceListCard
                 key={entry.key}
                 item={entry.item}
@@ -899,16 +948,16 @@ export function MarketplacePage(props: MarketplacePageProps = {}) {
             ))}
           </div>
 
-          {scope === 'all' && !itemsQuery.isLoading && !itemsQuery.isError && allItems.length === 0 && (
+          {scope === 'all' && !showListSkeleton && !itemsQuery.isError && allItems.length === 0 && (
             <div className="text-[13px] text-gray-500 py-8 text-center">{t(copyKeys.emptyData)}</div>
           )}
-          {scope === 'installed' && !installedQuery.isLoading && !installedQuery.isError && installedEntries.length === 0 && (
+          {scope === 'installed' && !showListSkeleton && !installedQuery.isError && installedEntries.length === 0 && (
             <div className="text-[13px] text-gray-500 py-8 text-center">{t(copyKeys.emptyInstalled)}</div>
           )}
         </div>
       </section>
 
-      {scope === 'all' && (
+      {scope === 'all' && !showCatalogSkeleton && (
         <div className="shrink-0">
           <PaginationBar
             page={page}

package/src/hooks/use-auth.ts

@@ -0,0 +1,111 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  fetchAuthStatus,
+  loginAuth,
+  logoutAuth,
+  setupAuth,
+  updateAuthEnabled,
+  updateAuthPassword
+} from '@/api/config';
+import { toast } from 'sonner';
+import { t } from '@/lib/i18n';
+
+export function useAuthStatus() {
+  return useQuery({
+    queryKey: ['auth-status'],
+    queryFn: fetchAuthStatus,
+    staleTime: 5_000,
+    retry: 3,
+    retryDelay: (attempt) => Math.min(1000 * attempt, 3000),
+    refetchOnWindowFocus: true
+  });
+}
+
+function invalidateProtectedQueries(queryClient: ReturnType<typeof useQueryClient>): Promise<unknown[]> {
+  return Promise.all([
+    queryClient.invalidateQueries({ queryKey: ['auth-status'] }),
+    queryClient.invalidateQueries({ queryKey: ['app-meta'] }),
+    queryClient.invalidateQueries({ queryKey: ['config'] }),
+    queryClient.invalidateQueries({ queryKey: ['config-meta'] }),
+    queryClient.invalidateQueries({ queryKey: ['config-schema'] }),
+    queryClient.invalidateQueries({ queryKey: ['sessions'] }),
+    queryClient.invalidateQueries({ queryKey: ['session-history'] }),
+    queryClient.invalidateQueries({ queryKey: ['chat-runs'] }),
+    queryClient.invalidateQueries({ queryKey: ['cron-jobs'] })
+  ]);
+}
+
+export function useSetupAuth() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: setupAuth,
+    onSuccess: async () => {
+      await invalidateProtectedQueries(queryClient);
+      toast.success(t('authSetupSuccess'));
+    },
+    onError: (error: Error) => {
+      toast.error(`${t('authActionFailed')}: ${error.message}`);
+    }
+  });
+}
+
+export function useLoginAuth() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: loginAuth,
+    onSuccess: async () => {
+      await invalidateProtectedQueries(queryClient);
+      toast.success(t('authLoginSuccess'));
+    },
+    onError: (error: Error) => {
+      toast.error(`${t('authActionFailed')}: ${error.message}`);
+    }
+  });
+}
+
+export function useLogoutAuth() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: logoutAuth,
+    onSuccess: async () => {
+      await invalidateProtectedQueries(queryClient);
+      toast.success(t('authLogoutSuccess'));
+    },
+    onError: (error: Error) => {
+      toast.error(`${t('authActionFailed')}: ${error.message}`);
+    }
+  });
+}
+
+export function useUpdateAuthPassword() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: updateAuthPassword,
+    onSuccess: async () => {
+      await invalidateProtectedQueries(queryClient);
+      toast.success(t('authPasswordUpdated'));
+    },
+    onError: (error: Error) => {
+      toast.error(`${t('authActionFailed')}: ${error.message}`);
+    }
+  });
+}
+
+export function useUpdateAuthEnabled() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: updateAuthEnabled,
+    onSuccess: async (_, variables) => {
+      await invalidateProtectedQueries(queryClient);
+      toast.success(variables.enabled ? t('authEnabledSuccess') : t('authDisabledSuccess'));
+    },
+    onError: (error: Error) => {
+      toast.error(`${t('authActionFailed')}: ${error.message}`);
+    }
+  });
+}

package/src/hooks/useMarketplace.ts

@@ -16,6 +16,15 @@ export function useMarketplaceItems(params: MarketplaceListParams) {
   return useQuery({
     queryKey: ['marketplace-items', params],
     queryFn: () => fetchMarketplaceItems(params),
+    placeholderData: (previousData, previousQuery) => {
+      const previousParams = previousQuery?.queryKey?.[1];
+      if (!previousParams || typeof previousParams !== 'object' || previousParams === null) {
+        return undefined;
+      }
+
+      const previousType = 'type' in previousParams ? previousParams.type : undefined;
+      return previousType === params.type ? previousData : undefined;
+    },
     staleTime: 15_000
   });
 }

package/src/lib/i18n.ts

@@ -134,6 +134,7 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   marketplace: { zh: '市场', en: 'Marketplace' },
   advanced: { zh: '高级', en: 'Advanced' },
   settings: { zh: '设置', en: 'Settings' },
+  security: { zh: '安全', en: 'Security' },
   backToMain: { zh: '返回主界面', en: 'Back to Main' },
 
   // Common
@@ -401,10 +402,80 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   textChunkLimit: { zh: '文本分块上限', en: 'Text Chunk Limit' },
   invalidJson: { zh: 'JSON 格式无效', en: 'Invalid JSON' },
 
+  // Auth
+  authBrand: { zh: 'NextClaw UI', en: 'NextClaw UI' },
+  authLoginTitle: { zh: '管理员登录', en: 'Admin Sign In' },
+  authLoginDescription: {
+    zh: '认证已开启。登录后才能查看这台机器的 NextClaw UI。',
+    en: 'Authentication is enabled. Sign in to access this machine’s NextClaw UI.'
+  },
+  authUsername: { zh: '管理员用户名', en: 'Admin Username' },
+  authUsernamePlaceholder: { zh: '输入管理员用户名', en: 'Enter admin username' },
+  authPassword: { zh: '管理员密码', en: 'Admin Password' },
+  authPasswordPlaceholder: { zh: '输入管理员密码', en: 'Enter admin password' },
+  authConfirmPassword: { zh: '确认密码', en: 'Confirm Password' },
+  authConfirmPasswordPlaceholder: { zh: '再次输入密码', en: 'Enter password again' },
+  authLoginAction: { zh: '登录', en: 'Sign In' },
+  authLoggingIn: { zh: '登录中...', en: 'Signing in...' },
+  authLoggingOut: { zh: '退出中...', en: 'Signing out...' },
+  authActionFailed: { zh: '认证操作失败', en: 'Authentication action failed' },
+  authLoginSuccess: { zh: '登录成功', en: 'Signed in successfully' },
+  authLogoutSuccess: { zh: '已退出登录', en: 'Signed out successfully' },
+  authSetupSuccess: { zh: '认证已开启，当前标签页已自动登录，可直接继续使用', en: 'Authentication enabled. This tab is now signed in and ready to use.' },
+  authPasswordUpdated: { zh: '管理员密码已更新', en: 'Admin password updated' },
+  authEnabledSuccess: { zh: '认证已开启', en: 'Authentication enabled' },
+  authDisabledSuccess: { zh: '认证已关闭', en: 'Authentication disabled' },
+  authRetryStatus: { zh: '重试', en: 'Retry' },
+  authStatusLoadFailed: { zh: '无法获取认证状态，请检查 UI 服务是否正常。', en: 'Failed to load authentication status. Check whether the UI server is healthy.' },
+
   // Runtime
   runtimePageTitle: { zh: '路由与运行时', en: 'Routing & Runtime' },
   runtimePageDescription: { zh: '对齐 OpenClaw 的多 Agent 路由：绑定规则、Agent 池、私聊范围。', en: 'Align multi-agent routing with OpenClaw: bindings, agent pool, and DM scope.' },
   runtimeLoading: { zh: '加载运行时配置中...', en: 'Loading runtime settings...' },
+  authSecurityTitle: { zh: 'Security', en: 'Security' },
+  authSecurityDescription: {
+    zh: '保持本机控制台默认简单；只有在你需要远程暴露时，再给 UI 加一层登录门。',
+    en: 'Keep the local console simple by default, and add a lightweight login gate only when you expose the UI remotely.'
+  },
+  authSetupTitle: { zh: '开启轻量认证', en: 'Enable Lightweight Authentication' },
+  authSetupDescription: {
+    zh: '首次开启时设置单个管理员账号。完成后当前标签页会自动登录。',
+    en: 'Create the single admin account the first time you enable authentication. This tab will be signed in automatically.'
+  },
+  authSetupAction: { zh: '开启认证', en: 'Enable Authentication' },
+  authSettingUp: { zh: '开启中...', en: 'Enabling...' },
+  authPasswordMismatch: { zh: '两次输入的密码不一致', en: 'Passwords do not match' },
+  authPasswordMinLengthHint: {
+    zh: '密码至少 8 个字符。当前版本只支持单管理员账号。',
+    en: 'Passwords must be at least 8 characters. This version supports a single admin account only.'
+  },
+  authStatusLabel: { zh: '当前状态', en: 'Current Status' },
+  authStatusConfiguredUser: { zh: '管理员账号：{username}', en: 'Admin account: {username}' },
+  authUsernameFixedHelp: {
+    zh: '首版不提供修改用户名和多用户管理；如需重新定义账号，请后续扩展这套边界。',
+    en: 'This first version does not support renaming the admin account or managing multiple users.'
+  },
+  authEnableLabel: { zh: '要求登录', en: 'Require Login' },
+  authEnableOnHelp: {
+    zh: '已开启后，除健康检查与认证接口外，其余 UI API 和 WebSocket 都需要登录。',
+    en: 'When enabled, every UI API and WebSocket except health and auth endpoints requires login.'
+  },
+  authEnableOffHelp: {
+    zh: '当前保持即开即用。重新打开后，这个标签页会自动拿到新的登录会话。',
+    en: 'The UI is currently open for local-style use. Re-enabling will issue a fresh signed-in session to this tab.'
+  },
+  authPasswordSectionTitle: { zh: '修改管理员密码', en: 'Change Admin Password' },
+  authPasswordSectionDescription: {
+    zh: '更新密码后，旧会话会立即失效；当前标签页会自动续成新会话（仅在认证开启时）。',
+    en: 'Updating the password invalidates old sessions immediately. This tab gets a fresh session automatically while auth is enabled.'
+  },
+  authPasswordAction: { zh: '更新密码', en: 'Update Password' },
+  authPasswordUpdating: { zh: '更新中...', en: 'Updating...' },
+  authLogoutAction: { zh: '退出当前标签页', en: 'Sign Out This Tab' },
+  authSessionMemoryNotice: {
+    zh: '当前版本的会话只保存在服务端内存里。NextClaw UI 进程重启后，需要重新登录。',
+    en: 'Sessions are stored only in server memory for now. You will need to sign in again after the NextClaw UI process restarts.'
+  },
   dmScope: { zh: '私聊范围', en: 'DM Scope' },
   dmScopeHelp: { zh: '控制私聊会话如何隔离。', en: 'Control how direct-message sessions are isolated.' },
   defaultContextTokens: { zh: '默认上下文 Token', en: 'Default Context Tokens' },
@@ -600,6 +671,7 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   chatToolOutput: { zh: '查看输出', en: 'View Output' },
   chatToolNoOutput: { zh: '无输出（执行完成）', en: 'No output (completed)' },
   chatReasoning: { zh: '查看推理内容', en: 'Show reasoning' },
+  chatUnknownPart: { zh: '未知消息片段', en: 'Unknown message part' },
   chatCodeCopy: { zh: '复制代码', en: 'Copy' },
   chatCodeCopied: { zh: '已复制', en: 'Copied' },
 

package/src/test/setup.ts

@@ -0,0 +1,16 @@
+import { vi } from 'vitest';
+
+Object.defineProperty(HTMLElement.prototype, 'scrollIntoView', {
+  value: vi.fn(),
+  writable: true
+});
+
+class MockResizeObserver {
+  observe() {}
+
+  unobserve() {}
+
+  disconnect() {}
+}
+
+vi.stubGlobal('ResizeObserver', MockResizeObserver);

package/tsconfig.json

@@ -8,11 +8,12 @@
     "jsx": "react-jsx",
     "noEmit": true,
     "allowImportingTsExtensions": true,
-    "types": ["vite/client"],
+    "types": ["vite/client", "vitest/globals"],
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"],
-      "@nextclaw/agent-chat": ["../nextclaw-agent-chat/src/index.ts"]
+      "@nextclaw/agent-chat": ["../nextclaw-agent-chat/src/index.ts"],
+      "@nextclaw/agent-chat-ui": ["../nextclaw-agent-chat-ui/src/index.ts"]
     }
   },
   "include": ["src"]

package/vite.config.ts

@@ -10,7 +10,8 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),
-      '@nextclaw/agent-chat': path.resolve(__dirname, '../nextclaw-agent-chat/src/index.ts')
+      '@nextclaw/agent-chat': path.resolve(__dirname, '../nextclaw-agent-chat/src/index.ts'),
+      '@nextclaw/agent-chat-ui': path.resolve(__dirname, '../nextclaw-agent-chat-ui/src/index.ts')
     }
   },
   server: {

package/vitest.config.ts

@@ -0,0 +1,16 @@
+import path from 'path';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@nextclaw/agent-chat': path.resolve(__dirname, '../nextclaw-agent-chat/src/index.ts')
+    }
+  },
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./src/test/setup.ts']
+  }
+});

package/dist/assets/ChannelsList-DzeVn-JC.js

@@ -1 +0,0 @@
-import{r as v,j as a,an as Z,D as ee,d as T,K as ae,ad as te,aQ as se,aR as ne,aS as le,x as re,q as oe,ai as ce,s as ie}from"./vendor-BKtTvQYU.js";import{t as e,c as I,O as me,u as q,a as $,b as H,Q as pe,R as de,S as be,e as ue,f as xe,g as ye,h as ge}from"./index-DJZ5y7t1.js";import{B as E,P as he,a as fe}from"./page-layout-CERNdqzB.js";import{I as D}from"./input-BoelTiYL.js";import{L as we}from"./label-DkL14Jvl.js";import{S as ve}from"./switch-CgbPbIX3.js";import{L as K,S as J}from"./LogoBadge-Cer0jX6t.js";import{h as O}from"./config-hints-CApS3K_7.js";import{c as je,b as ke,a as Se,C as Ce}from"./config-layout-BHnOoweL.js";import{T as Ne}from"./tabs-custom-pDyl95el.js";function Pe({value:t,onChange:m,className:i,placeholder:r=""}){const[o,u]=v.useState(""),d=x=>{x.key==="Enter"&&o.trim()?(x.preventDefault(),m([...t,o.trim()]),u("")):x.key==="Backspace"&&!o&&t.length>0&&m(t.slice(0,-1))},g=x=>{m(t.filter((j,h)=>h!==x))};return a.jsxs("div",{className:I("flex flex-wrap gap-2 p-2 border rounded-md min-h-[42px]",i),children:[t.map((x,j)=>a.jsxs("span",{className:"inline-flex items-center gap-1 px-2 py-1 bg-primary text-primary-foreground rounded text-sm",children:[x,a.jsx("button",{type:"button",onClick:()=>g(j),className:"hover:text-red-300 transition-colors",children:a.jsx(Z,{className:"h-3 w-3"})})]},j)),a.jsx("input",{type:"text",value:o,onChange:x=>u(x.target.value),onKeyDown:d,className:"flex-1 outline-none min-w-[100px] bg-transparent text-sm",placeholder:r||e("enterTag")})]})}function z(t){var r,o;const m=me();return((r=t.tutorialUrls)==null?void 0:r[m])||((o=t.tutorialUrls)==null?void 0:o.default)||t.tutorialUrl}const Ie={telegram:"telegram.svg",slack:"slack.svg",discord:"discord.svg",whatsapp:"whatsapp.svg",qq:"qq.svg",feishu:"feishu.svg",dingtalk:"dingtalk.svg",wecom:"wecom.svg",mochat:"mochat.svg",email:"email.svg"};function Fe(t,m){const i=m.toLowerCase(),r=t[i];return r?`/logos/${r}`:null}function Q(t){return Fe(Ie,t)}const R=[{value:"pairing",label:"pairing"},{value:"allowlist",label:"allowlist"},{value:"open",label:"open"},{value:"disabled",label:"disabled"}],B=[{value:"open",label:"open"},{value:"allowlist",label:"allowlist"},{value:"disabled",label:"disabled"}],Te=[{value:"off",label:"off"},{value:"partial",label:"partial"},{value:"block",label:"block"},{value:"progress",label:"progress"}],De=t=>t.includes("token")||t.includes("secret")||t.includes("password")?a.jsx(ae,{className:"h-3.5 w-3.5 text-gray-500"}):t.includes("url")||t.includes("host")?a.jsx(te,{className:"h-3.5 w-3.5 text-gray-500"}):t.includes("email")||t.includes("mail")?a.jsx(se,{className:"h-3.5 w-3.5 text-gray-500"}):t.includes("id")||t.includes("from")?a.jsx(ne,{className:"h-3.5 w-3.5 text-gray-500"}):t==="enabled"||t==="consentGranted"?a.jsx(le,{className:"h-3.5 w-3.5 text-gray-500"}):a.jsx(re,{className:"h-3.5 w-3.5 text-gray-500"});function G(){return{telegram:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"token",type:"password",label:e("botToken")},{name:"allowFrom",type:"tags",label:e("allowFrom")},{name:"proxy",type:"text",label:e("proxy")},{name:"accountId",type:"text",label:e("accountId")},{name:"dmPolicy",type:"select",label:e("dmPolicy"),options:R},{name:"groupPolicy",type:"select",label:e("groupPolicy"),options:B},{name:"groupAllowFrom",type:"tags",label:e("groupAllowFrom")},{name:"requireMention",type:"boolean",label:e("requireMention")},{name:"mentionPatterns",type:"tags",label:e("mentionPatterns")},{name:"groups",type:"json",label:e("groupRulesJson")}],discord:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"token",type:"password",label:e("botToken")},{name:"allowBots",type:"boolean",label:e("allowBotMessages")},{name:"allowFrom",type:"tags",label:e("allowFrom")},{name:"gatewayUrl",type:"text",label:e("gatewayUrl")},{name:"intents",type:"number",label:e("intents")},{name:"proxy",type:"text",label:e("proxy")},{name:"mediaMaxMb",type:"number",label:e("attachmentMaxSizeMb")},{name:"streaming",type:"select",label:e("streamingMode"),options:Te},{name:"draftChunk",type:"json",label:e("draftChunkingJson")},{name:"textChunkLimit",type:"number",label:e("textChunkLimit")},{name:"accountId",type:"text",label:e("accountId")},{name:"dmPolicy",type:"select",label:e("dmPolicy"),options:R},{name:"groupPolicy",type:"select",label:e("groupPolicy"),options:B},{name:"groupAllowFrom",type:"tags",label:e("groupAllowFrom")},{name:"requireMention",type:"boolean",label:e("requireMention")},{name:"mentionPatterns",type:"tags",label:e("mentionPatterns")},{name:"groups",type:"json",label:e("groupRulesJson")}],whatsapp:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"bridgeUrl",type:"text",label:e("bridgeUrl")},{name:"allowFrom",type:"tags",label:e("allowFrom")}],feishu:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"appId",type:"text",label:e("appId")},{name:"appSecret",type:"password",label:e("appSecret")},{name:"encryptKey",type:"password",label:e("encryptKey")},{name:"verificationToken",type:"password",label:e("verificationToken")},{name:"allowFrom",type:"tags",label:e("allowFrom")}],dingtalk:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"clientId",type:"text",label:e("clientId")},{name:"clientSecret",type:"password",label:e("clientSecret")},{name:"allowFrom",type:"tags",label:e("allowFrom")}],wecom:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"corpId",type:"text",label:e("corpId")},{name:"agentId",type:"text",label:e("agentId")},{name:"secret",type:"password",label:e("secret")},{name:"token",type:"password",label:e("token")},{name:"callbackPort",type:"number",label:e("callbackPort")},{name:"callbackPath",type:"text",label:e("callbackPath")},{name:"allowFrom",type:"tags",label:e("allowFrom")}],slack:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"mode",type:"text",label:e("mode")},{name:"webhookPath",type:"text",label:e("webhookPath")},{name:"allowBots",type:"boolean",label:e("allowBotMessages")},{name:"botToken",type:"password",label:e("botToken")},{name:"appToken",type:"password",label:e("appToken")}],email:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"consentGranted",type:"boolean",label:e("consentGranted")},{name:"imapHost",type:"text",label:e("imapHost")},{name:"imapPort",type:"number",label:e("imapPort")},{name:"imapUsername",type:"text",label:e("imapUsername")},{name:"imapPassword",type:"password",label:e("imapPassword")},{name:"fromAddress",type:"email",label:e("fromAddress")}],mochat:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"baseUrl",type:"text",label:e("baseUrl")},{name:"clawToken",type:"password",label:e("clawToken")},{name:"agentUserId",type:"text",label:e("agentUserId")},{name:"allowFrom",type:"tags",label:e("allowFrom")}],qq:[{name:"enabled",type:"boolean",label:e("enabled")},{name:"appId",type:"text",label:e("appId")},{name:"secret",type:"password",label:e("appSecret")},{name:"markdownSupport",type:"boolean",label:e("markdownSupport")},{name:"allowFrom",type:"tags",label:e("allowFrom")}]}}function A(t){return typeof t=="object"&&t!==null&&!Array.isArray(t)}function Y(t,m){const i={...t};for(const[r,o]of Object.entries(m)){const u=i[r];if(A(u)&&A(o)){i[r]=Y(u,o);continue}i[r]=o}return i}function Ae(t,m){const i=t.split("."),r={};let o=r;for(let u=0;u<i.length-1;u+=1){const d=i[u];o[d]={},o=o[d]}return o[i[i.length-1]]=m,r}function Le({channelName:t}){var _,U;const{data:m}=q(),{data:i}=$(),{data:r}=H(),o=pe(),u=de(),[d,g]=v.useState({}),[x,j]=v.useState({}),[h,f]=v.useState(null),k=t?m==null?void 0:m.channels[t]:null,w=t?G()[t]??[]:[],c=r==null?void 0:r.uiHints,p=t?`channels.${t}`:null,S=((_=r==null?void 0:r.actions)==null?void 0:_.filter(s=>s.scope===p))??[],C=t&&(((U=O(`channels.${t}`,c))==null?void 0:U.label)??t),P=i==null?void 0:i.channels.find(s=>s.name===t),F=P?z(P):void 0;v.useEffect(()=>{if(k){g({...k});const s={};(t?G()[t]??[]:[]).filter(l=>l.type==="json").forEach(l=>{const y=k[l.name];s[l.name]=JSON.stringify(y??{},null,2)}),j(s)}else g({}),j({})},[k,t]);const N=(s,n)=>{g(l=>({...l,[s]:n}))},L=s=>{if(s.preventDefault(),!t)return;const n={...d};for(const l of w){if(l.type!=="password")continue;const y=n[l.name];(typeof y!="string"||y.length===0)&&delete n[l.name]}for(const l of w){if(l.type!=="json")continue;const y=x[l.name]??"";try{n[l.name]=y.trim()?JSON.parse(y):{}}catch{T.error(`${e("invalidJson")}: ${l.name}`);return}}o.mutate({channel:t,data:n})},V=s=>{if(!s||!t)return;const n=s.channels;if(!A(n))return;const l=n[t];A(l)&&g(y=>Y(y,l))},W=async s=>{if(!(!t||!p)){f(s.id);try{let n={...d};s.saveBeforeRun&&(n={...n,...s.savePatch??{}},g(n),await o.mutateAsync({channel:t,data:n}));const l=await u.mutateAsync({actionId:s.id,data:{scope:p,draftConfig:Ae(p,n)}});V(l.patch),l.ok?T.success(l.message||e("success")):T.error(l.message||e("error"))}catch(n){const l=n instanceof Error?n.message:String(n);T.error(`${e("error")}: ${l}`)}finally{f(null)}}};if(!t||!P||!k)return a.jsx("div",{className:je,children:a.jsxs("div",{children:[a.jsx("h3",{className:"text-base font-semibold text-gray-900",children:e("channelsSelectTitle")}),a.jsx("p",{className:"mt-2 text-sm text-gray-500",children:e("channelsSelectDescription")})]})});const M=!!k.enabled;return a.jsxs("div",{className:ke,children:[a.jsx("div",{className:"border-b border-gray-100 px-6 py-5",children:a.jsxs("div",{className:"flex flex-wrap items-center justify-between gap-3",children:[a.jsxs("div",{className:"min-w-0",children:[a.jsxs("div",{className:"flex items-center gap-3",children:[a.jsx(K,{name:t,src:Q(t),className:I("h-9 w-9 rounded-lg border",M?"border-primary/30 bg-white":"border-gray-200/70 bg-white"),imgClassName:"h-5 w-5 object-contain",fallback:a.jsx("span",{className:"text-sm font-semibold uppercase text-gray-500",children:t[0]})}),a.jsx("h3",{className:"truncate text-lg font-semibold text-gray-900 capitalize",children:C})]}),a.jsx("p",{className:"mt-2 text-sm text-gray-500",children:e("channelsFormDescription")}),F&&a.jsxs("a",{href:F,className:"mt-2 inline-flex items-center gap-1.5 text-xs text-primary transition-colors hover:text-primary-hover",children:[a.jsx(ee,{className:"h-3.5 w-3.5"}),e("channelsGuideTitle")]})]}),a.jsx(J,{status:M?"active":"inactive",label:M?e("statusActive"):e("statusInactive")})]})}),a.jsxs("form",{onSubmit:L,className:"flex min-h-0 flex-1 flex-col",children:[a.jsx("div",{className:"min-h-0 flex-1 space-y-6 overflow-y-auto overscroll-contain px-6 py-5",children:w.map(s=>{const n=t?O(`channels.${t}.${s.name}`,c):void 0,l=(n==null?void 0:n.label)??s.label,y=n==null?void 0:n.placeholder;return a.jsxs("div",{className:"space-y-2.5",children:[a.jsxs(we,{htmlFor:s.name,className:"flex items-center gap-2 text-sm font-medium text-gray-900",children:[De(s.name),l]}),s.type==="boolean"&&a.jsxs("div",{className:"flex items-center justify-between rounded-xl bg-gray-50 p-3",children:[a.jsx("span",{className:"text-sm text-gray-500",children:d[s.name]?e("enabled"):e("disabled")}),a.jsx(ve,{id:s.name,checked:d[s.name]||!1,onCheckedChange:b=>N(s.name,b),className:"data-[state=checked]:bg-emerald-500"})]}),(s.type==="text"||s.type==="email")&&a.jsx(D,{id:s.name,type:s.type,value:d[s.name]||"",onChange:b=>N(s.name,b.target.value),placeholder:y,className:"rounded-xl"}),s.type==="password"&&a.jsx(D,{id:s.name,type:"password",value:d[s.name]||"",onChange:b=>N(s.name,b.target.value),placeholder:y??e("leaveBlankToKeepUnchanged"),className:"rounded-xl"}),s.type==="number"&&a.jsx(D,{id:s.name,type:"number",value:d[s.name]||0,onChange:b=>N(s.name,parseInt(b.target.value,10)||0),placeholder:y,className:"rounded-xl"}),s.type==="tags"&&a.jsx(Pe,{value:d[s.name]||[],onChange:b=>N(s.name,b)}),s.type==="select"&&a.jsxs(be,{value:d[s.name]||"",onValueChange:b=>N(s.name,b),children:[a.jsx(ue,{className:"rounded-xl",children:a.jsx(xe,{})}),a.jsx(ye,{children:(s.options??[]).map(b=>a.jsx(ge,{value:b.value,children:b.label},b.value))})]}),s.type==="json"&&a.jsx("textarea",{id:s.name,value:x[s.name]??"{}",onChange:b=>j(X=>({...X,[s.name]:b.target.value})),className:"min-h-[120px] w-full resize-none rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs font-mono"})]},s.name)})}),a.jsxs("div",{className:"flex flex-wrap items-center justify-between gap-3 border-t border-gray-100 px-6 py-4",children:[a.jsx("div",{className:"flex flex-wrap items-center gap-2",children:S.filter(s=>s.trigger==="manual").map(s=>a.jsx(E,{type:"button",onClick:()=>W(s),disabled:o.isPending||!!h,variant:"secondary",children:h===s.id?e("connecting"):s.title},s.id))}),a.jsx(E,{type:"submit",disabled:o.isPending||!!h,children:o.isPending?e("saving"):e("save")})]})]})]})}const Me={telegram:"channelDescTelegram",slack:"channelDescSlack",email:"channelDescEmail",webhook:"channelDescWebhook",discord:"channelDescDiscord",feishu:"channelDescFeishu"};function Ke(){const{data:t}=q(),{data:m}=$(),{data:i}=H(),[r,o]=v.useState("enabled"),[u,d]=v.useState(),[g,x]=v.useState(""),j=i==null?void 0:i.uiHints,h=m==null?void 0:m.channels,f=t==null?void 0:t.channels,k=[{id:"enabled",label:e("channelsTabEnabled"),count:(h??[]).filter(c=>{var p;return(p=f==null?void 0:f[c.name])==null?void 0:p.enabled}).length},{id:"all",label:e("channelsTabAll"),count:(h??[]).length}],w=v.useMemo(()=>{const c=g.trim().toLowerCase();return(h??[]).filter(p=>{var C;const S=((C=f==null?void 0:f[p.name])==null?void 0:C.enabled)||!1;return r==="enabled"?S:!0}).filter(p=>c?(p.displayName||p.name).toLowerCase().includes(c)||p.name.toLowerCase().includes(c):!0)},[r,f,h,g]);return v.useEffect(()=>{if(w.length===0){d(void 0);return}w.some(p=>p.name===u)||d(w[0].name)},[w,u]),!t||!m?a.jsx("div",{className:"p-8 text-gray-400",children:e("channelsLoading")}):a.jsxs(he,{className:"xl:flex xl:h-full xl:min-h-0 xl:flex-col xl:pb-0",children:[a.jsx(fe,{title:e("channelsPageTitle"),description:e("channelsPageDescription")}),a.jsxs("div",{className:I(Ce,"xl:min-h-0 xl:flex-1"),children:[a.jsxs("section",{className:Se,children:[a.jsx("div",{className:"border-b border-gray-100 px-4 pt-4",children:a.jsx(Ne,{tabs:k,activeTab:r,onChange:o,className:"mb-0"})}),a.jsx("div",{className:"border-b border-gray-100 px-4 py-3",children:a.jsxs("div",{className:"relative",children:[a.jsx(oe,{className:"pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400"}),a.jsx(D,{value:g,onChange:c=>x(c.target.value),placeholder:e("channelsFilterPlaceholder"),className:"h-10 rounded-xl pl-9"})]})}),a.jsxs("div",{className:"min-h-0 flex-1 space-y-2 overflow-y-auto overscroll-contain p-3",children:[w.map(c=>{const p=t.channels[c.name],S=(p==null?void 0:p.enabled)||!1,C=O(`channels.${c.name}`,j),P=z(c),F=(C==null?void 0:C.help)||e(Me[c.name]||"channelDescriptionDefault"),N=u===c.name;return a.jsx("button",{type:"button",onClick:()=>d(c.name),className:I("w-full rounded-xl border p-2.5 text-left transition-all",N?"border-primary/30 bg-primary-50/40 shadow-sm":"border-gray-200/70 bg-white hover:border-gray-300 hover:bg-gray-50/70"),children:a.jsxs("div",{className:"flex items-start justify-between gap-3",children:[a.jsxs("div",{className:"flex min-w-0 items-center gap-3",children:[a.jsx(K,{name:c.name,src:Q(c.name),className:I("h-10 w-10 rounded-lg border",S?"border-primary/30 bg-white":"border-gray-200/70 bg-white"),imgClassName:"h-5 w-5 object-contain",fallback:a.jsx("span",{className:"text-sm font-semibold uppercase text-gray-500",children:c.name[0]})}),a.jsxs("div",{className:"min-w-0",children:[a.jsx("p",{className:"truncate text-sm font-semibold text-gray-900",children:c.displayName||c.name}),a.jsx("p",{className:"line-clamp-1 text-[11px] text-gray-500",children:F})]})]}),a.jsxs("div",{className:"flex items-center gap-2",children:[P&&a.jsx("a",{href:P,onClick:L=>L.stopPropagation(),className:"inline-flex h-7 w-7 items-center justify-center rounded-md text-gray-300 transition-colors hover:bg-gray-100/70 hover:text-gray-500",title:e("channelsGuideTitle"),children:a.jsx(ce,{className:"h-3.5 w-3.5"})}),a.jsx(J,{status:S?"active":"inactive",label:S?e("statusActive"):e("statusInactive"),className:"min-w-[56px] justify-center"})]})]})},c.name)}),w.length===0&&a.jsxs("div",{className:"flex h-full min-h-[220px] flex-col items-center justify-center rounded-xl border border-dashed border-gray-200 bg-gray-50/70 py-10 text-center",children:[a.jsx("div",{className:"mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-white",children:a.jsx(ie,{className:"h-5 w-5 text-gray-300"})}),a.jsx("p",{className:"text-sm font-medium text-gray-700",children:e("channelsNoMatch")})]})]})]}),a.jsx(Le,{channelName:u})]})]})}export{Ke as ChannelsList};