@nextclaw/ui 0.5.9 → 0.5.11

package/src/components/layout/Sidebar.tsx

@@ -1,49 +1,61 @@
 import { cn } from '@/lib/utils';
-import { t } from '@/lib/i18n';
-import { Cpu, GitBranch, History, MessageSquare, Sparkles, BookOpen, Store, AlarmClock } from 'lucide-react';
+import { LANGUAGE_OPTIONS, t, type I18nLanguage } from '@/lib/i18n';
+import { Cpu, GitBranch, History, MessageSquare, Sparkles, BookOpen, Store, AlarmClock, Languages } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
 import { useDocBrowser } from '@/components/doc-browser';
-
-const navItems = [
-  {
-    target: '/model',
-    label: 'Models',
-    icon: Cpu,
-  },
-  {
-    target: '/providers',
-    label: 'Providers',
-    icon: Sparkles,
-  },
-  {
-    target: '/channels',
-    label: 'Channels',
-    icon: MessageSquare,
-  },
-  {
-    target: '/runtime',
-    label: 'Routing & Runtime',
-    icon: GitBranch,
-  },
-  {
-    target: '/sessions',
-    label: t('sessions'),
-    icon: History,
-  },
-  {
-    target: '/cron',
-    label: t('cron'),
-    icon: AlarmClock,
-  },
-  {
-    target: '/marketplace',
-    label: 'Marketplace',
-    icon: Store,
-  }
-];
+import { useI18n } from '@/components/providers/I18nProvider';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
 
 export function Sidebar() {
   const docBrowser = useDocBrowser();
+  const { language, setLanguage } = useI18n();
+  const currentLanguageLabel = LANGUAGE_OPTIONS.find((option) => option.value === language)?.label ?? language;
+
+  const handleLanguageSwitch = (nextLanguage: I18nLanguage) => {
+    if (language === nextLanguage) {
+      return;
+    }
+    setLanguage(nextLanguage);
+    window.location.reload();
+  };
+
+  const navItems = [
+    {
+      target: '/model',
+      label: t('model'),
+      icon: Cpu,
+    },
+    {
+      target: '/providers',
+      label: t('providers'),
+      icon: Sparkles,
+    },
+    {
+      target: '/channels',
+      label: t('channels'),
+      icon: MessageSquare,
+    },
+    {
+      target: '/runtime',
+      label: t('runtime'),
+      icon: GitBranch,
+    },
+    {
+      target: '/sessions',
+      label: t('sessions'),
+      icon: History,
+    },
+    {
+      target: '/cron',
+      label: t('cron'),
+      icon: AlarmClock,
+    },
+    {
+      target: '/marketplace',
+      label: t('marketplace'),
+      icon: Store,
+    }
+  ];
 
   return (
     <aside className="w-[240px] bg-[#f0f2f7] flex flex-col h-full py-6 px-4">
@@ -92,6 +104,24 @@ export function Sidebar() {
 
       {/* Help Button */}
       <div className="pt-3 border-t border-[#dde0ea] mt-3">
+        <div className="mb-2">
+          <Select value={language} onValueChange={(value) => handleLanguageSwitch(value as I18nLanguage)}>
+            <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent shadow-none px-3 py-2.5 text-[14px] font-medium text-gray-600 hover:bg-[#e4e7ef] focus:ring-0">
+              <div className="flex items-center gap-3 min-w-0">
+                <Languages className="h-[17px] w-[17px] text-gray-400" />
+                <span className="text-left">{t('language')}</span>
+              </div>
+              <span className="ml-auto text-xs text-gray-500">{currentLanguageLabel}</span>
+            </SelectTrigger>
+            <SelectContent>
+              {LANGUAGE_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value} className="text-xs">
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
         <button
           onClick={() => docBrowser.open()}
           className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-[14px] font-medium transition-all duration-base text-gray-600 hover:bg-[#e4e7ef] hover:text-gray-800"

package/src/components/layout/page-layout.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+/* ============================================================================
+   PageLayout — Unified page container
+   ============================================================================ */
+
+interface PageLayoutProps {
+    children: React.ReactNode;
+    /** When true, the page fills the full viewport height (e.g. Sessions, Cron) */
+    fullHeight?: boolean;
+    className?: string;
+}
+
+export function PageLayout({ children, fullHeight = false, className }: PageLayoutProps) {
+    return (
+        <div
+            className={cn(
+                'animate-fade-in',
+                fullHeight
+                    ? 'h-[calc(100vh-80px)] w-full flex flex-col'
+                    : 'pb-16',
+                className
+            )}
+        >
+            {children}
+        </div>
+    );
+}
+
+/* ============================================================================
+   PageHeader — Unified page title + subtitle + optional actions
+   ============================================================================ */
+
+interface PageHeaderProps {
+    title: string;
+    description?: string;
+    actions?: React.ReactNode;
+    className?: string;
+}
+
+export function PageHeader({ title, description, actions, className }: PageHeaderProps) {
+    return (
+        <div className={cn('flex items-center justify-between mb-6 shrink-0', className)}>
+            <div>
+                <h2 className="text-xl font-semibold text-gray-900">{title}</h2>
+                {description && (
+                    <p className="text-sm text-gray-500 mt-1">{description}</p>
+                )}
+            </div>
+            {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
+        </div>
+    );
+}
+
+/* ============================================================================
+   PageBody — Unified body container (flex-1 when inside fullHeight layout)
+   ============================================================================ */
+
+interface PageBodyProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+export function PageBody({ children, className }: PageBodyProps) {
+    return (
+        <div className={cn('flex-1 min-h-0', className)}>
+            {children}
+        </div>
+    );
+}

package/src/components/marketplace/MarketplacePage.tsx

@@ -10,6 +10,8 @@ import {
   useMarketplaceInstalled,
   useMarketplaceItems
 } from '@/hooks/useMarketplace';
+import { t } from '@/lib/i18n';
+import { PageLayout, PageHeader } from '@/components/layout/page-layout';
 import { cn } from '@/lib/utils';
 import { PackageSearch } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
@@ -180,16 +182,16 @@ function FilterPanel(props: {
           <input
             value={props.searchText}
             onChange={(event) => props.onSearchTextChange(event.target.value)}
-            placeholder="Search extensions..."
+            placeholder={t('marketplaceSearchPlaceholder')}
             className="w-full h-9 border border-gray-200/80 rounded-xl pl-9 pr-3 text-sm focus:outline-none focus:ring-1 focus:ring-primary/40"
           />
         </div>
 
         <div className="inline-flex h-9 rounded-xl bg-gray-100/80 p-1 shrink-0">
           {([
-            { value: 'all', label: 'All' },
-            { value: 'plugin', label: 'Plugins' },
-            { value: 'skill', label: 'Skills' },
+            { value: 'all', label: t('marketplaceFilterAll') },
+            { value: 'plugin', label: t('marketplaceFilterPlugins') },
+            { value: 'skill', label: t('marketplaceFilterSkills') },
           ] as const).map((opt) => (
             <button
               key={opt.value}
@@ -213,8 +215,8 @@ function FilterPanel(props: {
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem value="relevance">Relevance</SelectItem>
-              <SelectItem value="updated">Recently Updated</SelectItem>
+              <SelectItem value="relevance">{t('marketplaceSortRelevance')}</SelectItem>
+              <SelectItem value="updated">{t('marketplaceSortUpdated')}</SelectItem>
             </SelectContent>
           </Select>
         )}
@@ -234,8 +236,8 @@ function MarketplaceListCard(props: {
   const record = props.record;
   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 ?? 'Unknown Item';
-  const summary = props.item?.summary ?? (record ? 'Installed locally. Details are currently unavailable from marketplace.' : '');
+  const title = props.item?.name ?? record?.label ?? record?.id ?? record?.spec ?? t('marketplaceUnknownItem');
+  const summary = props.item?.summary ?? (record ? t('marketplaceInstalledLocalSummary') : '');
   const spec = props.item?.install.spec ?? record?.spec ?? '';
 
   const targetId = record?.id || record?.spec;
@@ -249,12 +251,12 @@ function MarketplaceListCard(props: {
   const isDisabled = record ? (record.enabled === false || record.runtimeStatus === 'disabled') : false;
   const isInstalling = props.installState.isPending && props.item && props.installState.installingSpec === props.item.install.spec;
 
-  const displayType = type === 'plugin' ? 'Plugin' : type === 'skill' ? 'Skill' : 'Extension';
+  const displayType = type === 'plugin' ? t('marketplaceTypePlugin') : type === 'skill' ? t('marketplaceTypeSkill') : t('marketplaceTypeExtension');
 
   return (
     <article className="group bg-white border border-gray-200/40 hover:border-gray-200/80 rounded-2xl px-5 py-4 hover:shadow-md shadow-sm transition-all flex items-start gap-3.5 justify-between cursor-default">
       <div className="flex gap-3 min-w-0 flex-1 h-full items-start">
-        <ItemIcon name={title} fallback={spec || 'Ext'} />
+        <ItemIcon name={title} fallback={spec || t('marketplaceTypeExtension')} />
         <div className="min-w-0 flex-1 flex flex-col justify-center h-full">
           <TooltipProvider delayDuration={400}>
             <Tooltip>
@@ -304,7 +306,7 @@ function MarketplaceListCard(props: {
             disabled={props.installState.isPending}
             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"
           >
-            {isInstalling ? 'Installing...' : 'Install'}
+            {isInstalling ? t('marketplaceInstalling') : t('marketplaceInstall')}
           </button>
         )}
 
@@ -315,8 +317,8 @@ function MarketplaceListCard(props: {
             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' ? 'Enabling...' : 'Disabling...')
-              : (isDisabled ? 'Enable' : 'Disable')}
+              ? (props.manageState.action === 'enable' ? t('marketplaceEnabling') : t('marketplaceDisabling'))
+              : (isDisabled ? t('marketplaceEnable') : t('marketplaceDisable'))}
           </button>
         )}
 
@@ -326,7 +328,7 @@ function MarketplaceListCard(props: {
             onClick={() => props.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' ? 'Removing...' : 'Uninstall'}
+            {busyForRecord && props.manageState.action === 'uninstall' ? t('marketplaceRemoving') : t('marketplaceUninstall')}
           </button>
         )}
       </div>
@@ -348,7 +350,7 @@ function PaginationBar(props: {
         onClick={props.onPrev}
         disabled={props.page <= 1 || props.busy}
       >
-        Prev
+        {t('prev')}
       </button>
       <div className="text-sm text-gray-600 min-w-20 text-center">
         {props.totalPages === 0 ? '0 / 0' : `${props.page} / ${props.totalPages}`}
@@ -358,7 +360,7 @@ function PaginationBar(props: {
         onClick={props.onNext}
         disabled={props.totalPages === 0 || props.page >= props.totalPages || props.busy}
       >
-        Next
+        {t('next')}
       </button>
     </div>
   );
@@ -446,13 +448,13 @@ export function MarketplacePage() {
   const listSummary = useMemo(() => {
     if (scope === 'installed') {
       if (installedQuery.isLoading) {
-        return 'Loading...';
+        return t('loading');
       }
-      return `${installedEntries.length} installed`;
+      return `${installedEntries.length} ${t('marketplaceInstalledCountSuffix')}`;
     }
 
     if (!itemsQuery.data) {
-      return 'Loading...';
+      return t('loading');
     }
 
     return `${allItems.length} / ${total}`;
@@ -470,8 +472,8 @@ export function MarketplacePage() {
   };
 
   const tabs = [
-    { id: 'all', label: 'Marketplace' },
-    { id: 'installed', label: 'Installed', count: installedQuery.data?.total ?? 0 }
+    { id: 'all', label: t('marketplaceTabMarketplace') },
+    { id: 'installed', label: t('marketplaceTabInstalled'), count: installedQuery.data?.total ?? 0 }
   ];
 
   const handleInstall = (item: MarketplaceItemSummary) => {
@@ -493,9 +495,9 @@ export function MarketplacePage() {
 
     if (action === 'uninstall') {
       const confirmed = await confirm({
-        title: `Uninstall ${targetId}?`,
-        description: 'This will remove the extension. You can install it again from the marketplace.',
-        confirmLabel: 'Uninstall',
+        title: `${t('marketplaceUninstallTitle')} ${targetId}?`,
+        description: t('marketplaceUninstallDescription'),
+        confirmLabel: t('marketplaceUninstall'),
         variant: 'destructive'
       });
       if (!confirmed) {
@@ -512,11 +514,8 @@ export function MarketplacePage() {
   };
 
   return (
-    <div className="animate-fade-in pb-20">
-      <div className="mb-4">
-        <h2 className="text-xl font-semibold text-gray-900">Marketplace</h2>
-        <p className="text-[12px] text-gray-400 mt-0.5">A cleaner extension list focused on install / enable / disable.</p>
-      </div>
+    <PageLayout>
+      <PageHeader title={t('marketplacePageTitle')} description={t('marketplacePageDescription')} />
 
       <Tabs
         tabs={tabs}
@@ -546,18 +545,18 @@ export function MarketplacePage() {
 
       <section>
         <div className="flex items-center justify-between mb-3">
-          <h3 className="text-[14px] font-semibold text-gray-900">{scope === 'installed' ? 'Installed' : 'Extensions'}</h3>
+          <h3 className="text-[14px] font-semibold text-gray-900">{scope === 'installed' ? t('marketplaceSectionInstalled') : t('marketplaceSectionExtensions')}</h3>
           <span className="text-[12px] text-gray-500">{listSummary}</span>
         </div>
 
         {scope === 'all' && itemsQuery.isError && (
           <div className="p-4 rounded-xl bg-rose-50 border border-rose-200 text-rose-700 text-sm">
-            Failed to load marketplace data: {itemsQuery.error.message}
+            {t('marketplaceErrorLoadingData')}: {itemsQuery.error.message}
           </div>
         )}
         {scope === 'installed' && installedQuery.isError && (
           <div className="p-4 rounded-xl bg-rose-50 border border-rose-200 text-rose-700 text-sm">
-            Failed to load installed items: {installedQuery.error.message}
+            {t('marketplaceErrorLoadingInstalled')}: {installedQuery.error.message}
           </div>
         )}
 
@@ -588,10 +587,10 @@ export function MarketplacePage() {
         </div>
 
         {scope === 'all' && !itemsQuery.isLoading && !itemsQuery.isError && allItems.length === 0 && (
-          <div className="text-[13px] text-gray-500 py-8 text-center">No items found.</div>
+          <div className="text-[13px] text-gray-500 py-8 text-center">{t('marketplaceNoItems')}</div>
         )}
         {scope === 'installed' && !installedQuery.isLoading && !installedQuery.isError && installedEntries.length === 0 && (
-          <div className="text-[13px] text-gray-500 py-8 text-center">No installed items found.</div>
+          <div className="text-[13px] text-gray-500 py-8 text-center">{t('marketplaceNoInstalledItems')}</div>
         )}
       </section>
 
@@ -605,6 +604,6 @@ export function MarketplacePage() {
         />
       )}
       <ConfirmDialog />
-    </div>
+    </PageLayout>
   );
 }

package/src/components/providers/I18nProvider.tsx

@@ -0,0 +1,64 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react';
+import {
+  getLanguage,
+  initializeI18n,
+  setLanguage as applyLanguage,
+  subscribeLanguageChange,
+  t,
+  type I18nLanguage,
+} from '@/lib/i18n';
+
+type I18nContextValue = {
+  language: I18nLanguage;
+  setLanguage: (lang: I18nLanguage) => void;
+  toggleLanguage: () => void;
+};
+
+const I18nContext = createContext<I18nContextValue | null>(null);
+
+export function I18nProvider({ children }: { children: ReactNode }) {
+  const [language, setLanguageState] = useState<I18nLanguage>(() => initializeI18n());
+
+  useEffect(() => {
+    const unsubscribe = subscribeLanguageChange((next) => {
+      setLanguageState(next);
+    });
+    return unsubscribe;
+  }, []);
+
+  const setLanguage = useCallback((lang: I18nLanguage) => {
+    applyLanguage(lang);
+    setLanguageState(getLanguage());
+  }, []);
+
+  const toggleLanguage = useCallback(() => {
+    setLanguage(language === 'en' ? 'zh' : 'en');
+  }, [language, setLanguage]);
+
+  // Ensure descendants re-render when language changes; most text calls global t().
+  const value = useMemo(
+    () => ({ language, setLanguage, toggleLanguage }),
+    [language, setLanguage, toggleLanguage]
+  );
+
+  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
+}
+
+export function useI18n(): I18nContextValue & { t: typeof t } {
+  const ctx = useContext(I18nContext);
+  if (!ctx) {
+    throw new Error('useI18n must be used within I18nProvider');
+  }
+  return {
+    ...ctx,
+    t,
+  };
+}

package/src/components/ui/confirm-dialog.tsx

@@ -8,6 +8,7 @@ import {
   DialogTitle
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
+import { t } from '@/lib/i18n';
 
 export type ConfirmDialogVariant = 'default' | 'destructive';
 
@@ -28,8 +29,8 @@ export const ConfirmDialog = ({
   onOpenChange,
   title,
   description,
-  confirmLabel = 'Confirm',
-  cancelLabel = 'Cancel',
+  confirmLabel = t('confirm'),
+  cancelLabel = t('cancel'),
   variant = 'default',
   onConfirm,
   onCancel

package/src/components/ui/tabs-custom.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { cn } from '@/lib/utils';
+import { formatNumber } from '@/lib/i18n';
 
 interface Tab {
     id: string;
@@ -35,7 +36,7 @@ export function Tabs({ tabs, activeTab, onChange, className }: TabsProps) {
                             <span className={cn(
                                 'text-[11px] font-medium',
                                 isActive ? 'text-gray-500' : 'text-gray-500'
-                            )}>{tab.count.toLocaleString()}</span>
+                            )}>{formatNumber(tab.count)}</span>
                         )}
                         {isActive && (
                             <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-primary rounded-full" />

package/src/hooks/useConfirmDialog.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import { useCallback, useState } from 'react';
 import { ConfirmDialog } from '@/components/ui/confirm-dialog';
+import { t } from '@/lib/i18n';
 
 export type ConfirmOptions = {
   title: string;
@@ -24,8 +25,8 @@ const initial: ConfirmState = {
   open: false,
   title: '',
   description: '',
-  confirmLabel: 'Confirm',
-  cancelLabel: 'Cancel',
+  confirmLabel: t('confirm'),
+  cancelLabel: t('cancel'),
   variant: 'default',
   resolve: null
 };
@@ -42,8 +43,8 @@ export function useConfirmDialog(): {
         open: true,
         title: options.title,
         description: options.description ?? '',
-        confirmLabel: options.confirmLabel ?? 'Confirm',
-        cancelLabel: options.cancelLabel ?? 'Cancel',
+        confirmLabel: options.confirmLabel ?? t('confirm'),
+        cancelLabel: options.cancelLabel ?? t('cancel'),
         variant: options.variant ?? 'default',
         resolve: (value) => {
           resolve(value);

package/src/hooks/useMarketplace.ts

@@ -1,5 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
+import { t } from '@/lib/i18n';
 import {
   fetchMarketplaceItem,
   fetchMarketplaceInstalled,
@@ -53,10 +54,10 @@ export function useInstallMarketplaceItem() {
       queryClient.invalidateQueries({ queryKey: ['marketplace-installed'] });
       queryClient.refetchQueries({ queryKey: ['marketplace-installed'], type: 'active' });
       queryClient.refetchQueries({ queryKey: ['marketplace-items'], type: 'active' });
-      toast.success(result.message || `${result.type} installed`);
+      toast.success(result.message || `${result.type} ${t('marketplaceInstalledCountSuffix')}`);
     },
     onError: (error: Error) => {
-      toast.error(error.message || 'Install failed');
+      toast.error(error.message || t('marketplaceInstallFailed'));
     }
   });
 }
@@ -74,7 +75,7 @@ export function useManageMarketplaceItem() {
       toast.success(result.message || `${result.action} success`);
     },
     onError: (error: Error) => {
-      toast.error(error.message || 'Operation failed');
+      toast.error(error.message || t('marketplaceOperationFailed'));
     }
   });
 }