@nextclaw/ui 0.2.4 → 0.3.0

package/src/components/ui/input.tsx

@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-10 w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-400 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}

package/src/components/ui/label.tsx

@@ -8,7 +8,7 @@ const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
     <label
       ref={ref}
       className={cn(
-        'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        'text-sm font-medium leading-none text-gray-700 peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
         className
       )}
       {...props}

package/src/components/ui/switch.tsx

@@ -15,8 +15,8 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
         aria-checked={checked}
         ref={ref}
         className={cn(
-          'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
-          checked ? 'bg-primary' : 'bg-input',
+          'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50',
+          checked ? 'bg-primary' : 'bg-gray-200 hover:bg-gray-300',
           className
         )}
         onClick={() => onCheckedChange?.(!checked)}
@@ -24,7 +24,7 @@ const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
       >
         <span
           className={cn(
-            'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform',
+            'pointer-events-none block h-5 w-5 rounded-full bg-white shadow-md ring-0 transition-transform duration-fast',
             checked ? 'translate-x-5' : 'translate-x-0'
           )}
         />

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

@@ -16,7 +16,7 @@ interface TabsProps {
 
 export function Tabs({ tabs, activeTab, onChange, className }: TabsProps) {
     return (
-        <div className={cn('flex items-center gap-8 border-b border-[hsl(40,10%,94%)] mb-8', className)}>
+        <div className={cn('flex items-center gap-8 border-b border-gray-200 mb-8', className)}>
             {tabs.map((tab) => {
                 const isActive = activeTab === tab.id;
                 return (
@@ -24,18 +24,18 @@ export function Tabs({ tabs, activeTab, onChange, className }: TabsProps) {
                         key={tab.id}
                         onClick={() => onChange(tab.id)}
                         className={cn(
-                            'relative pb-4 text-[15px] font-semibold transition-all duration-200 flex items-center gap-2',
+                            'relative pb-4 text-[15px] font-semibold transition-all duration-fast flex items-center gap-2',
                             isActive
-                                ? 'text-[hsl(30,15%,10%)]'
-                                : 'text-[hsl(30,8%,55%)] hover:text-[hsl(30,15%,10%)]'
+                                ? 'text-primary'
+                                : 'text-gray-500 hover:text-gray-700'
                         )}
                     >
                         {tab.label}
                         {tab.count !== undefined && (
-                            <span className="text-[11px] font-medium text-[hsl(30,8%,65%)]">{tab.count.toLocaleString()}</span>
+                            <span className="text-[11px] font-medium text-gray-400">{tab.count.toLocaleString()}</span>
                         )}
                         {isActive && (
-                            <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-[hsl(30,15%,10%)] animate-in fade-in slide-in-from-left-2 duration-300" />
+                            <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary animate-in fade-in slide-in-from-left-2 duration-300" />
                         )}
                     </button>
                 );

package/src/components/ui/tabs.tsx

@@ -42,7 +42,7 @@ export function TabsList({ children, className }: TabsListProps) {
   return (
     <div
       className={cn(
-        'inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground',
+        'inline-flex h-10 items-center justify-center rounded-lg bg-gray-100 p-1 text-gray-600',
         className
       )}
     >
@@ -62,10 +62,10 @@ export function TabsTrigger({ value, children, className }: TabsTriggerProps) {
       type="button"
       onClick={() => context.onValueChange(value)}
       className={cn(
-        'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-white transition-all duration-fast focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
         isActive
-          ? 'bg-background text-foreground shadow-sm'
-          : 'hover:bg-background/50',
+          ? 'bg-white text-gray-900 shadow-sm'
+          : 'hover:bg-white/50 hover:text-gray-700',
         className
       )}
     >
@@ -78,10 +78,11 @@ export function TabsContent({ value, children, className }: TabsContentProps) {
   const context = React.useContext(TabsContext);
   if (!context) throw new Error('TabsContent must be used within Tabs');
 
-  if (context.value !== value) return null;
+  const isActive = context.value === value;
+  if (!isActive) return null;
 
   return (
-    <div className={cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className)}>
+    <div className={cn('mt-2 animate-fade-in', className)}>
       {children}
     </div>
   );

package/src/hooks/useConfig.ts

@@ -1,5 +1,5 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { fetchConfig, fetchConfigMeta, updateModel, updateProvider, updateChannel, updateUiConfig, reloadConfig } from '@/api/config';
+import { fetchConfig, fetchConfigMeta, updateModel, updateProvider, updateChannel } from '@/api/config';
 import { toast } from 'sonner';
 import { t } from '@/lib/i18n';
 
@@ -59,37 +59,10 @@ export function useUpdateChannel() {
       updateChannel(channel, data as Parameters<typeof updateChannel>[1]),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['config'] });
-      toast.success(t('configSaved'));
-    },
-    onError: (error: Error) => {
-      toast.error(t('configSaveFailed') + ': ' + error.message);
-    }
-  });
-}
-
-export function useUpdateUiConfig() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: updateUiConfig,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['config'] });
-      toast.success(t('configSaved'));
+      toast.success(t('configSavedApplied'));
     },
     onError: (error: Error) => {
       toast.error(t('configSaveFailed') + ': ' + error.message);
     }
   });
 }
-
-export function useReloadConfig() {
-  return useMutation({
-    mutationFn: reloadConfig,
-    onSuccess: () => {
-      toast.success(t('configReloaded'));
-    },
-    onError: (error: Error) => {
-      toast.error(t('configReloadFailed') + ': ' + error.message);
-    }
-  });
-}

package/src/index.css

@@ -1,55 +1,67 @@
+/* Import Design System - must be first */
+@import './styles/design-system.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
   :root {
-    /* HappyCapy-inspired cleaner "Milk/Cream" palette */
-    --background: 40 20% 98%;
-    /* Very light cream #F9F9F7 */
-    --foreground: 30 15% 10%;
-    /* Very dark brown/gray */
+    /* ========================================
+       CORE VARIABLES (Mapped to Design System)
+       ======================================== */
+    --background: 210 20% 98%;
+    --foreground: 221 39% 11%;
+
     --card: 0 0% 100%;
-    /* Pure white cards */
-    --card-foreground: 30 15% 10%;
+    --card-foreground: 221 39% 11%;
+
     --popover: 0 0% 100%;
-    --popover-foreground: 30 15% 10%;
-    --primary: 30 15% 10%;
-    /* Dark active states */
+    --popover-foreground: 221 39% 11%;
+
+    /* Primary: Brand Blue */
+    --primary: 217 80% 55%;
     --primary-foreground: 0 0% 100%;
-    --secondary: 40 10% 94%;
-    /* Neutral light gray */
-    --secondary-foreground: 30 15% 10%;
-    --muted: 40 10% 94%;
-    --muted-foreground: 30 8% 45%;
-    --accent: 40 10% 92%;
-    /* Light pill background */
-    --accent-foreground: 30 15% 10%;
+
+    /* Secondary: Light Gray */
+    --secondary: 220 14% 96%;
+    --secondary-foreground: 215 28% 17%;
+
+    /* Muted */
+    --muted: 220 14% 96%;
+    --muted-foreground: 220 9% 46%;
+
+    /* Accent */
+    --accent: 217 100% 97%;
+    --accent-foreground: 217 70% 40%;
+
+    /* Destructive */
     --destructive: 0 84% 60%;
     --destructive-foreground: 0 0% 98%;
-    --border: 40 10% 92%;
-    --input: 40 10% 92%;
-    --ring: 30 15% 10%;
-    --radius: 1.25rem;
-    /* Large rounded corners (20px) */
-
-    /* HappyCapy Neutrals */
-    --milk-50: 40 20% 98%;
-    --milk-100: 40 15% 96%;
-    --milk-200: 40 12% 92%;
-    --milk-300: 40 10% 88%;
-    --milk-400: 40 8% 70%;
-    --milk-500: 30 8% 45%;
-    --milk-600: 30 10% 35%;
-    --milk-700: 30 12% 25%;
-    --milk-800: 30 15% 15%;
-    --milk-900: 30 20% 8%;
+
+    /* UI Elements */
+    --border: 220 13% 91%;
+    --input: 220 13% 91%;
+    --ring: 217 80% 55%;
+    --radius: 0.75rem;
+
+    /* Legacy compatibility */
+    --milk-50: 210 20% 98%;
+    --milk-100: 220 14% 96%;
+    --milk-200: 220 13% 91%;
+    --milk-300: 216 12% 84%;
+    --milk-400: 218 11% 65%;
+    --milk-500: 220 9% 46%;
+    --milk-600: 215 14% 34%;
+    --milk-700: 217 19% 27%;
+    --milk-800: 215 28% 17%;
+    --milk-900: 221 39% 11%;
   }
 }
 
 @layer base {
   * {
-    @apply border-border outline-none transition-colors duration-200;
+    @apply border-border;
   }
 
   html {
@@ -60,20 +72,21 @@
 
   body {
     @apply bg-background text-foreground;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    font-family: var(--font-sans);
     overflow: hidden;
   }
 
-  /* Smooth scrolling for the whole page if needed */
+  /* Smooth scrolling */
   * {
     scrollbar-width: thin;
-    scrollbar-color: hsl(var(--warm-gray-300)) transparent;
+    scrollbar-color: hsl(var(--gray-300)) transparent;
   }
 }
 
 @layer utilities {
-
-  /* Custom scrollbar */
+  /* ========================================
+     SCROLLBAR
+     ======================================== */
   .custom-scrollbar::-webkit-scrollbar {
     width: 6px;
     height: 6px;
@@ -84,24 +97,42 @@
   }
 
   .custom-scrollbar::-webkit-scrollbar-thumb {
-    background: hsl(var(--warm-gray-300));
+    background: hsl(var(--gray-300));
     border-radius: 6px;
   }
 
   .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-    background: hsl(var(--warm-gray-400));
+    background: hsl(var(--gray-400));
   }
 
-  /* Glassmorphism */
+  /* ========================================
+     GLASSMORPHISM
+     ======================================== */
   .glass {
-    @apply bg-white/70 backdrop-blur-md border border-white/20;
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
   }
 
   .glass-dark {
-    @apply bg-black/10 backdrop-blur-md border border-white/10;
+    background: rgba(0, 0, 0, 0.1);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  /* ========================================
+     SHADOWS
+     ======================================== */
+  .shadow-card {
+    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05);
+  }
+
+  .shadow-card-hover {
+    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
   }
 
-  /* Premium Shadows */
   .shadow-premium {
     box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08), 0 4px 10px -4px rgba(0, 0, 0, 0.04);
   }
@@ -109,15 +140,36 @@
   .shadow-premium-hover {
     box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.12), 0 8px 15px -6px rgba(0, 0, 0, 0.06);
   }
+
+  /* ========================================
+     GRADIENTS
+     ======================================== */
+  .bg-gradient-hero {
+    background: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--gray-50)) 100%);
+  }
+
+  .bg-gradient-subtle {
+    background: linear-gradient(180deg, hsl(var(--gray-50)) 0%, hsl(var(--background)) 100%);
+  }
+
+  /* ========================================
+     FOCUS STATES
+     ======================================== */
+  .focus-ring {
+    @apply focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
+    --tw-ring-color: hsl(var(--ring));
+    --tw-ring-offset-color: hsl(var(--ring-offset));
+  }
 }
 
-/* Animation keyframes */
+/* ========================================
+   ANIMATIONS
+   ======================================== */
 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(12px);
   }
-
   to {
     opacity: 1;
     transform: translateY(0);
@@ -129,7 +181,6 @@
     opacity: 0;
     transform: translateX(-12px);
   }
-
   to {
     opacity: 1;
     transform: translateX(0);
@@ -141,7 +192,6 @@
     opacity: 0;
     transform: scale(0.97);
   }
-
   to {
     opacity: 1;
     transform: scale(1);
@@ -149,12 +199,9 @@
 }
 
 @keyframes pulse-soft {
-
-  0%,
-  100% {
+  0%, 100% {
     opacity: 1;
   }
-
   50% {
     opacity: 0.8;
   }
@@ -174,4 +221,4 @@
 
 .animate-pulse-soft {
   animation: pulse-soft 3s ease-in-out infinite;
-}
+}

package/src/lib/i18n.ts

@@ -4,7 +4,6 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   model: { zh: '模型', en: 'Model' },
   providers: { zh: '提供商', en: 'Providers' },
   channels: { zh: '渠道', en: 'Channels' },
-  uiConfig: { zh: '界面', en: 'UI' },
 
   // Common
   enabled: { zh: '启用', en: 'Enabled' },
@@ -29,6 +28,10 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   apiKey: { zh: 'API 密钥', en: 'API Key' },
   apiBase: { zh: 'API Base', en: 'API Base' },
   extraHeaders: { zh: '额外请求头', en: 'Extra Headers' },
+  wireApi: { zh: '请求接口', en: 'Wire API' },
+  wireApiAuto: { zh: '自动（优先 Chat，必要时 Responses）', en: 'Auto (Chat with fallback)' },
+  wireApiChat: { zh: 'Chat Completions', en: 'Chat Completions' },
+  wireApiResponses: { zh: 'Responses', en: 'Responses' },
   apiKeySet: { zh: '已设置', en: 'Set' },
   apiKeyNotSet: { zh: '未设置', en: 'Not Set' },
   showKey: { zh: '显示密钥', en: 'Show Key' },
@@ -41,6 +44,7 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   appToken: { zh: 'App Token', en: 'App Token' },
   appId: { zh: 'App ID', en: 'App ID' },
   appSecret: { zh: 'App Secret', en: 'App Secret' },
+  markdownSupport: { zh: 'Markdown 支持', en: 'Markdown Support' },
   clientId: { zh: 'Client ID', en: 'Client ID' },
   clientSecret: { zh: 'Client Secret', en: 'Client Secret' },
   encryptKey: { zh: '加密密钥', en: 'Encrypt Key' },
@@ -93,11 +97,7 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   replyDelayMs: { zh: '回复延迟(ms)', en: 'Reply Delay (ms)' },
   secret: { zh: '密钥', en: 'Secret' },
 
-  // UI Config
-  host: { zh: '主机', en: 'Host' },
-  port: { zh: '端口', en: 'Port' },
-  open: { zh: '自动打开', en: 'Open Automatically' },
-  reloadConfig: { zh: '重载配置', en: 'Reload Config' },
+  // UI
   saveVerifyConnect: { zh: '保存并验证 / 连接', en: 'Save & Verify / Connect' },
 
   // Status
@@ -108,6 +108,7 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
 
   // Messages
   configSaved: { zh: '配置已保存', en: 'Configuration saved' },
+  configSavedApplied: { zh: '配置已保存并已应用', en: 'Configuration saved and applied' },
   configSaveFailed: { zh: '保存配置失败', en: 'Failed to save configuration' },
   configReloaded: { zh: '配置已重载', en: 'Configuration reloaded' },
   configReloadFailed: { zh: '重载配置失败', en: 'Failed to reload configuration' },

package/src/lib/logos.ts

@@ -0,0 +1,42 @@
+type LogoMap = Record<string, string>;
+
+const PROVIDER_LOGOS: LogoMap = {
+  openrouter: "openrouter.svg",
+  aihubmix: "aihubmix.png",
+  anthropic: "anthropic.svg",
+  openai: "openai.svg",
+  gemini: "gemini.svg",
+  deepseek: "deepseek.png",
+  zhipu: "zhipu.svg",
+  dashscope: "dashscope.png",
+  moonshot: "moonshot.png",
+  minimax: "minimax.svg",
+  vllm: "vllm.svg",
+  groq: "groq.svg"
+};
+
+const CHANNEL_LOGOS: LogoMap = {
+  telegram: "telegram.svg",
+  slack: "slack.svg",
+  discord: "discord.svg",
+  whatsapp: "whatsapp.svg",
+  qq: "qq.svg",
+  feishu: "feishu.svg",
+  dingtalk: "dingtalk.svg",
+  mochat: "mochat.svg",
+  email: "email.svg"
+};
+
+function resolveLogo(map: LogoMap, name: string): string | null {
+  const key = name.toLowerCase();
+  const file = map[key];
+  return file ? `/logos/${file}` : null;
+}
+
+export function getProviderLogo(name: string): string | null {
+  return resolveLogo(PROVIDER_LOGOS, name);
+}
+
+export function getChannelLogo(name: string): string | null {
+  return resolveLogo(CHANNEL_LOGOS, name);
+}

package/src/stores/ui.store.ts

@@ -4,7 +4,7 @@ type ConnectionStatus = 'connected' | 'disconnected' | 'connecting';
 
 interface UiState {
   // Active configuration tab
-  activeTab: 'model' | 'providers' | 'channels' | 'ui';
+  activeTab: 'model' | 'providers' | 'channels';
   setActiveTab: (tab: UiState['activeTab']) => void;
 
   // Connection status