@nextclaw/ui 0.6.14 → 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/hooks/useWebSocket.ts

@@ -37,6 +37,36 @@ export function useWebSocket(queryClient?: QueryClient) {
       }
     })();
     const client = new ConfigWebSocket(wsUrl);
+    let isSocketOpen = false;
+
+    const probeHealth = async (): Promise<boolean> => {
+      const base = API_BASE?.replace(/\/$/, '') || window.location.origin;
+      const url = `${base}/api/health`;
+      try {
+        const response = await fetch(url, { method: 'GET', cache: 'no-store' });
+        if (!response.ok) {
+          return false;
+        }
+        const payload = await response.json() as {
+          ok?: boolean;
+          data?: {
+            status?: string;
+          };
+        };
+        return payload.ok === true && payload.data?.status === 'ok';
+      } catch {
+        return false;
+      }
+    };
+
+    const syncConnectionStatusFromHealth = async () => {
+      if (isSocketOpen) {
+        setConnectionStatus('connected');
+        return;
+      }
+      const healthy = await probeHealth();
+      setConnectionStatus(healthy ? 'connected' : 'disconnected');
+    };
 
     const invalidateSessionQueries = (sessionKey?: string) => {
       if (!queryClient) {
@@ -50,10 +80,23 @@ export function useWebSocket(queryClient?: QueryClient) {
       queryClient.invalidateQueries({ queryKey: ['session-history'] });
     };
 
+    setConnectionStatus('connecting');
+
     client.on('connection.open', () => {
+      isSocketOpen = true;
       setConnectionStatus('connected');
     });
 
+    client.on('connection.close', () => {
+      isSocketOpen = false;
+      void syncConnectionStatusFromHealth();
+    });
+
+    client.on('connection.error', () => {
+      isSocketOpen = false;
+      void syncConnectionStatusFromHealth();
+    });
+
     client.on('config.updated', (event) => {
       // Trigger refetch of config
       if (queryClient) {
@@ -100,8 +143,17 @@ export function useWebSocket(queryClient?: QueryClient) {
 
     client.connect();
     setWs(client);
+    void syncConnectionStatusFromHealth();
+    const healthTimer = window.setInterval(() => {
+      void syncConnectionStatusFromHealth();
+    }, 10_000);
 
-    return () => client.disconnect();
+    return () => {
+      window.clearInterval(healthTimer);
+      isSocketOpen = false;
+      client.disconnect();
+      setConnectionStatus('disconnected');
+    };
   }, [setConnectionStatus, queryClient]);
 
   return ws;

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/.eslintrc.cjs

@@ -1,48 +0,0 @@
-module.exports = {
-  root: true,
-  parser: "@typescript-eslint/parser",
-  plugins: ["@typescript-eslint"],
-  extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-    "prettier"
-  ],
-  env: {
-    browser: true,
-    es2022: true,
-    node: true
-  },
-  settings: {
-    react: {
-      version: "detect"
-    }
-  },
-  ignorePatterns: ["dist", "node_modules", "tailwind.config.js"],
-  rules: {
-    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
-    "react-hooks/set-state-in-effect": "off",
-    "prefer-destructuring": ["warn", {
-      "VariableDeclarator": {
-        "array": false,
-        "object": true
-      },
-      "AssignmentExpression": {
-        "array": false,
-        "object": false
-      }
-    }],
-    "max-lines": ["warn", { "max": 800, "skipBlankLines": true, "skipComments": true }],
-    "max-lines-per-function": ["warn", { "max": 150, "skipBlankLines": true, "skipComments": true, "IIFEs": true }]
-  },
-  overrides: [
-    {
-      files: ["src/components/**/*.tsx", "src/App.tsx"],
-      rules: {
-        "max-lines-per-function": ["warn", { "max": 300, "skipBlankLines": true, "skipComments": true, "IIFEs": true }]
-      }
-    }
-  ]
-};