@nextclaw/ui 0.6.14 → 0.7.0

package/src/components/common/StatusBadge.tsx

@@ -1,6 +1,7 @@
 import { cn } from '@/lib/utils';
 import { Loader2 } from 'lucide-react';
 import { t } from '@/lib/i18n';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 
 type Status = 'connected' | 'disconnected' | 'connecting';
 
@@ -11,22 +12,16 @@ interface StatusBadgeProps {
 
 const statusConfig: Record<
   Status,
-  { dotClass: string; textClass: string; bgClass: string }
+  { dotClass: string }
 > = {
   connected: {
     dotClass: 'bg-emerald-500',
-    textClass: 'text-emerald-600',
-    bgClass: 'bg-emerald-50',
   },
   disconnected: {
-    dotClass: 'bg-gray-300',
-    textClass: 'text-gray-400',
-    bgClass: 'bg-gray-100/80',
+    dotClass: 'h-2.5 w-2.5 rounded-full border border-gray-400 bg-transparent',
   },
   connecting: {
-    dotClass: 'bg-amber-400',
-    textClass: 'text-amber-600',
-    bgClass: 'bg-amber-50',
+    dotClass: 'text-amber-600',
   }
 };
 
@@ -35,16 +30,33 @@ export function StatusBadge({ status, className }: StatusBadgeProps) {
   const label = status === 'connected' ? t('connected') : status === 'disconnected' ? t('disconnected') : t('connecting');
 
   return (
-    <div className={cn(
-      'flex items-center gap-1.5 px-2 py-0.5 rounded-full',
-      config.bgClass,
-      className
-    )}>
-      <span className={cn('h-1.5 w-1.5 rounded-full', config.dotClass)} />
-      <span className={cn('text-[11px] font-medium flex items-center gap-1', config.textClass)}>
-        {label}
-        {status === 'connecting' && <Loader2 className="h-2.5 w-2.5 animate-spin" />}
-      </span>
-    </div>
+    <TooltipProvider delayDuration={250}>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <span
+            role="status"
+            aria-label={label}
+            className={cn(
+              'inline-flex h-5 w-5 items-center justify-center',
+              className
+            )}
+          >
+            {status === 'connecting' ? (
+              <Loader2 className={cn('h-3 w-3 animate-spin', config.dotClass)} />
+            ) : (
+              <span
+                className={cn(
+                  status === 'connected' ? 'h-2 w-2 rounded-full' : '',
+                  config.dotClass
+                )}
+              />
+            )}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent side="bottom" className="text-xs">
+          {label}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 }

package/src/components/config/runtime-security-card.tsx

@@ -0,0 +1,276 @@
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import {
+  useAuthStatus,
+  useLogoutAuth,
+  useSetupAuth,
+  useUpdateAuthEnabled,
+  useUpdateAuthPassword
+} from '@/hooks/use-auth';
+import { t } from '@/lib/i18n';
+import { toast } from 'sonner';
+
+const MIN_PASSWORD_LENGTH = 8;
+
+function hasValidPasswordLength(password: string): boolean {
+  return password.trim().length >= MIN_PASSWORD_LENGTH;
+}
+
+function validatePasswordConfirmation(password: string, confirmPassword: string): boolean {
+  if (password !== confirmPassword) {
+    toast.error(t('authPasswordMismatch'));
+    return false;
+  }
+  return true;
+}
+
+export function RuntimeSecurityCard() {
+  const authStatus = useAuthStatus();
+  const setupAuth = useSetupAuth();
+  const updateAuthEnabled = useUpdateAuthEnabled();
+  const updateAuthPassword = useUpdateAuthPassword();
+  const logoutAuth = useLogoutAuth();
+
+  const [setupUsername, setSetupUsername] = useState('');
+  const [setupPassword, setSetupPassword] = useState('');
+  const [setupConfirmPassword, setSetupConfirmPassword] = useState('');
+  const [nextPassword, setNextPassword] = useState('');
+  const [nextConfirmPassword, setNextConfirmPassword] = useState('');
+
+  const auth = authStatus.data;
+  const canSubmitSetup = (
+    setupUsername.trim().length > 0 &&
+    hasValidPasswordLength(setupPassword) &&
+    setupPassword === setupConfirmPassword &&
+    !setupAuth.isPending
+  );
+  const canUpdatePassword = (
+    hasValidPasswordLength(nextPassword) &&
+    nextPassword === nextConfirmPassword &&
+    !updateAuthPassword.isPending
+  );
+
+  const handleSetup = async () => {
+    if (!validatePasswordConfirmation(setupPassword, setupConfirmPassword)) {
+      return;
+    }
+    try {
+      await setupAuth.mutateAsync({
+        username: setupUsername.trim(),
+        password: setupPassword
+      });
+      setSetupPassword('');
+      setSetupConfirmPassword('');
+    } catch {
+      // handled by mutation toast
+    }
+  };
+
+  const handlePasswordUpdate = async () => {
+    if (!validatePasswordConfirmation(nextPassword, nextConfirmPassword)) {
+      return;
+    }
+    try {
+      await updateAuthPassword.mutateAsync({
+        password: nextPassword
+      });
+      setNextPassword('');
+      setNextConfirmPassword('');
+    } catch {
+      // handled by mutation toast
+    }
+  };
+
+  const handleEnabledChange = async (enabled: boolean) => {
+    try {
+      await updateAuthEnabled.mutateAsync({ enabled });
+    } catch {
+      // handled by mutation toast
+    }
+  };
+
+  const handleLogout = async () => {
+    try {
+      await logoutAuth.mutateAsync();
+    } catch {
+      // handled by mutation toast
+    }
+  };
+
+  if (authStatus.isLoading && !auth) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('authSecurityTitle')}</CardTitle>
+          <CardDescription>{t('authSecurityDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent className="text-sm text-gray-500">{t('loading')}</CardContent>
+      </Card>
+    );
+  }
+
+  if (authStatus.isError || !auth) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('authSecurityTitle')}</CardTitle>
+          <CardDescription>{t('authSecurityDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <p className="text-sm text-gray-500">{t('authStatusLoadFailed')}</p>
+          <Button
+            variant="outline"
+            onClick={() => {
+              void authStatus.refetch();
+            }}
+          >
+            {t('authRetryStatus')}
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!auth.configured) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('authSecurityTitle')}</CardTitle>
+          <CardDescription>{t('authSecurityDescription')}</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-5">
+          <div className="rounded-xl border border-dashed border-gray-200 bg-gray-50/70 p-4">
+            <p className="text-sm font-medium text-gray-900">{t('authSetupTitle')}</p>
+            <p className="mt-1 text-sm text-gray-500">{t('authSetupDescription')}</p>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="auth-setup-username">{t('authUsername')}</Label>
+              <Input
+                id="auth-setup-username"
+                value={setupUsername}
+                onChange={(event) => setSetupUsername(event.target.value)}
+                placeholder={t('authUsernamePlaceholder')}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="auth-setup-password">{t('authPassword')}</Label>
+              <Input
+                id="auth-setup-password"
+                type="password"
+                value={setupPassword}
+                onChange={(event) => setSetupPassword(event.target.value)}
+                placeholder={t('authPasswordPlaceholder')}
+              />
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="auth-setup-confirm">{t('authConfirmPassword')}</Label>
+            <Input
+              id="auth-setup-confirm"
+              type="password"
+              value={setupConfirmPassword}
+              onChange={(event) => setSetupConfirmPassword(event.target.value)}
+              placeholder={t('authConfirmPasswordPlaceholder')}
+            />
+            <p className="text-xs text-gray-500">{t('authPasswordMinLengthHint')}</p>
+          </div>
+
+          <Button type="button" disabled={!canSubmitSetup} onClick={() => void handleSetup()}>
+            {setupAuth.isPending ? t('authSettingUp') : t('authSetupAction')}
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('authSecurityTitle')}</CardTitle>
+        <CardDescription>{t('authSecurityDescription')}</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="rounded-xl border border-gray-200 p-4">
+          <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+            <div className="space-y-1">
+              <p className="text-sm font-medium text-gray-900">{t('authStatusLabel')}</p>
+              <p className="text-sm text-gray-600">
+                {t('authStatusConfiguredUser').replace('{username}', auth.username ?? '')}
+              </p>
+              <p className="text-xs text-gray-500">{t('authUsernameFixedHelp')}</p>
+            </div>
+            <span className="inline-flex items-center rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700">
+              {auth.enabled ? t('enabled') : t('disabled')}
+            </span>
+          </div>
+
+          <div className="mt-4 flex flex-col gap-4 border-t border-gray-200 pt-4 md:flex-row md:items-center md:justify-between">
+            <div className="space-y-1">
+              <p className="text-sm font-medium text-gray-900">{t('authEnableLabel')}</p>
+              <p className="text-xs text-gray-500">
+                {auth.enabled ? t('authEnableOnHelp') : t('authEnableOffHelp')}
+              </p>
+            </div>
+            <Switch
+              checked={auth.enabled}
+              disabled={updateAuthEnabled.isPending}
+              onCheckedChange={(checked) => {
+                void handleEnabledChange(checked);
+              }}
+            />
+          </div>
+        </div>
+
+        <div className="rounded-xl border border-gray-200 p-4 space-y-4">
+          <div className="space-y-1">
+            <p className="text-sm font-medium text-gray-900">{t('authPasswordSectionTitle')}</p>
+            <p className="text-xs text-gray-500">{t('authPasswordSectionDescription')}</p>
+          </div>
+
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label htmlFor="auth-password-next">{t('authPassword')}</Label>
+              <Input
+                id="auth-password-next"
+                type="password"
+                value={nextPassword}
+                onChange={(event) => setNextPassword(event.target.value)}
+                placeholder={t('authPasswordPlaceholder')}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="auth-password-confirm">{t('authConfirmPassword')}</Label>
+              <Input
+                id="auth-password-confirm"
+                type="password"
+                value={nextConfirmPassword}
+                onChange={(event) => setNextConfirmPassword(event.target.value)}
+                placeholder={t('authConfirmPasswordPlaceholder')}
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-3">
+            <Button type="button" disabled={!canUpdatePassword} onClick={() => void handlePasswordUpdate()}>
+              {updateAuthPassword.isPending ? t('authPasswordUpdating') : t('authPasswordAction')}
+            </Button>
+            {auth.enabled && auth.authenticated ? (
+              <Button type="button" variant="outline" disabled={logoutAuth.isPending} onClick={() => void handleLogout()}>
+                {logoutAuth.isPending ? t('authLoggingOut') : t('authLogoutAction')}
+              </Button>
+            ) : null}
+          </div>
+
+          <p className="text-xs text-gray-500">{t('authSessionMemoryNotice')}</p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/config/security-config.tsx

@@ -0,0 +1,12 @@
+import { RuntimeSecurityCard } from '@/components/config/runtime-security-card';
+import { PageHeader, PageLayout } from '@/components/layout/page-layout';
+import { t } from '@/lib/i18n';
+
+export function SecurityConfig() {
+  return (
+    <PageLayout className="space-y-6">
+      <PageHeader title={t('authSecurityTitle')} description={t('authSecurityDescription')} />
+      <RuntimeSecurityCard />
+    </PageLayout>
+  );
+}

package/src/components/layout/Sidebar.tsx

@@ -1,7 +1,7 @@
 import { cn } from '@/lib/utils';
 import { LANGUAGE_OPTIONS, t, type I18nLanguage } from '@/lib/i18n';
 import { THEME_OPTIONS, type UiTheme } from '@/lib/theme';
-import { Cpu, GitBranch, History, MessageCircle, MessageSquare, Sparkles, BookOpen, Plug, BrainCircuit, AlarmClock, Languages, Palette, KeyRound, Settings, ArrowLeft, Search } from 'lucide-react';
+import { Cpu, GitBranch, History, MessageCircle, MessageSquare, Sparkles, BookOpen, Plug, BrainCircuit, AlarmClock, Languages, Palette, KeyRound, Settings, ArrowLeft, Search, Shield } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
 import { useDocBrowser } from '@/components/doc-browser';
 import { BrandHeader } from '@/components/common/BrandHeader';
@@ -82,6 +82,11 @@ export function Sidebar({ mode }: SidebarProps) {
       label: t('runtime'),
       icon: GitBranch,
     },
+    {
+      target: '/security',
+      label: t('security'),
+      icon: Shield,
+    },
     {
       target: '/sessions',
       label: t('sessions'),

package/src/components/marketplace/MarketplacePage.test.tsx

@@ -0,0 +1,170 @@
+import { render, screen } from '@testing-library/react';
+import { MarketplacePage } from '@/components/marketplace/MarketplacePage';
+import type {
+  MarketplaceInstalledView,
+  MarketplaceItemSummary,
+  MarketplaceListView
+} from '@/api/types';
+
+type ItemsQueryState = {
+  data?: MarketplaceListView;
+  isLoading: boolean;
+  isFetching: boolean;
+  isError: boolean;
+  error: Error | null;
+};
+
+type InstalledQueryState = {
+  data?: MarketplaceInstalledView;
+  isLoading: boolean;
+  isFetching: boolean;
+  isError: boolean;
+  error: Error | null;
+};
+
+const mocks = vi.hoisted(() => ({
+  navigate: vi.fn(),
+  docOpen: vi.fn(),
+  confirm: vi.fn(),
+  itemsQuery: null as unknown as ItemsQueryState,
+  installedQuery: null as unknown as InstalledQueryState,
+  installMutation: {
+    mutateAsync: vi.fn(),
+    isPending: false,
+    variables: undefined
+  },
+  manageMutation: {
+    mutate: vi.fn(),
+    isPending: false,
+    variables: undefined
+  }
+}));
+
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...(actual as object),
+    useNavigate: () => mocks.navigate,
+    useParams: () => ({})
+  };
+});
+
+vi.mock('@/components/doc-browser', () => ({
+  useDocBrowser: () => ({
+    open: mocks.docOpen
+  })
+}));
+
+vi.mock('@/components/providers/I18nProvider', () => ({
+  useI18n: () => ({
+    language: 'en'
+  })
+}));
+
+vi.mock('@/hooks/useConfirmDialog', () => ({
+  useConfirmDialog: () => ({
+    confirm: mocks.confirm,
+    ConfirmDialog: () => null
+  })
+}));
+
+vi.mock('@/hooks/useMarketplace', () => ({
+  useMarketplaceItems: () => mocks.itemsQuery,
+  useMarketplaceInstalled: () => mocks.installedQuery,
+  useInstallMarketplaceItem: () => mocks.installMutation,
+  useManageMarketplaceItem: () => mocks.manageMutation
+}));
+
+function createMarketplaceItem(overrides: Partial<MarketplaceItemSummary> = {}): MarketplaceItemSummary {
+  return {
+    id: 'skill-web-search',
+    slug: 'web-search',
+    type: 'skill',
+    name: 'Web Search',
+    summary: 'Search the web from the marketplace',
+    summaryI18n: { en: 'Search the web from the marketplace' },
+    tags: ['search'],
+    author: 'NextClaw',
+    install: {
+      kind: 'marketplace',
+      spec: '@nextclaw/web-search',
+      command: 'nextclaw skills install @nextclaw/web-search'
+    },
+    updatedAt: '2026-03-17T00:00:00.000Z',
+    ...overrides
+  };
+}
+
+function createItemsQuery(overrides: Partial<Record<string, unknown>> = {}) {
+  return {
+    data: undefined as MarketplaceListView | undefined,
+    isLoading: false,
+    isFetching: false,
+    isError: false,
+    error: null,
+    ...overrides
+  };
+}
+
+function createInstalledQuery(overrides: Partial<Record<string, unknown>> = {}) {
+  return {
+    data: {
+      type: 'skill',
+      total: 0,
+      specs: [],
+      records: []
+    } satisfies MarketplaceInstalledView,
+    isLoading: false,
+    isFetching: false,
+    isError: false,
+    error: null,
+    ...overrides
+  };
+}
+
+describe('MarketplacePage', () => {
+  beforeEach(() => {
+    mocks.navigate.mockReset();
+    mocks.docOpen.mockReset();
+    mocks.confirm.mockReset();
+    mocks.installMutation.mutateAsync.mockReset();
+    mocks.manageMutation.mutate.mockReset();
+    mocks.installMutation.isPending = false;
+    mocks.installMutation.variables = undefined;
+    mocks.manageMutation.isPending = false;
+    mocks.manageMutation.variables = undefined;
+    mocks.itemsQuery = createItemsQuery();
+    mocks.installedQuery = createInstalledQuery();
+  });
+
+  it('renders skeleton cards during initial skills loading', () => {
+    mocks.itemsQuery = createItemsQuery({
+      isLoading: true,
+      isFetching: true
+    });
+
+    const { container } = render(<MarketplacePage forcedType="skills" />);
+
+    expect(screen.getByTestId('marketplace-list-skeleton')).toBeTruthy();
+    expect(container.querySelectorAll('[data-testid="marketplace-list-skeleton"] > article')).toHaveLength(12);
+  });
+
+  it('keeps loaded cards visible during background refresh', () => {
+    mocks.itemsQuery = createItemsQuery({
+      data: {
+        total: 1,
+        page: 1,
+        pageSize: 12,
+        totalPages: 1,
+        sort: 'relevance',
+        items: [createMarketplaceItem()]
+      } satisfies MarketplaceListView,
+      isFetching: true
+    });
+
+    render(<MarketplacePage forcedType="skills" />);
+
+    expect(screen.queryByTestId('marketplace-list-skeleton')).toBeNull();
+    expect(screen.getByText('Web Search')).toBeTruthy();
+  });
+});