@nextclaw/ui 0.2.1

package/src/index.css

@@ -0,0 +1,177 @@
+@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 */
+    --card: 0 0% 100%;
+    /* Pure white cards */
+    --card-foreground: 30 15% 10%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 30 15% 10%;
+    --primary: 30 15% 10%;
+    /* Dark active states */
+    --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%;
+    --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%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-none transition-colors duration-200;
+  }
+
+  html {
+    @apply antialiased;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+    overflow: hidden;
+  }
+
+  /* Smooth scrolling for the whole page if needed */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--warm-gray-300)) transparent;
+  }
+}
+
+@layer utilities {
+
+  /* Custom scrollbar */
+  .custom-scrollbar::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-thumb {
+    background: hsl(var(--warm-gray-300));
+    border-radius: 6px;
+  }
+
+  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+    background: hsl(var(--warm-gray-400));
+  }
+
+  /* Glassmorphism */
+  .glass {
+    @apply bg-white/70 backdrop-blur-md border border-white/20;
+  }
+
+  .glass-dark {
+    @apply bg-black/10 backdrop-blur-md border border-white/10;
+  }
+
+  /* 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);
+  }
+
+  .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);
+  }
+}
+
+/* Animation keyframes */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateX(-12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes scaleIn {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes pulse-soft {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.8;
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-slide-in {
+  animation: slideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-scale-in {
+  animation: scaleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-pulse-soft {
+  animation: pulse-soft 3s ease-in-out infinite;
+}

package/src/lib/i18n.ts

@@ -0,0 +1,119 @@
+// i18n labels - Chinese primary, English fallback
+export const LABELS: Record<string, { zh: string; en: string }> = {
+  // Navigation
+  model: { zh: '模型', en: 'Model' },
+  providers: { zh: '提供商', en: 'Providers' },
+  channels: { zh: '渠道', en: 'Channels' },
+  uiConfig: { zh: '界面', en: 'UI' },
+
+  // Common
+  enabled: { zh: '启用', en: 'Enabled' },
+  disabled: { zh: '禁用', en: 'Disabled' },
+  save: { zh: '保存', en: 'Save' },
+  cancel: { zh: '取消', en: 'Cancel' },
+  delete: { zh: '删除', en: 'Delete' },
+  add: { zh: '添加', en: 'Add' },
+  edit: { zh: '编辑', en: 'Edit' },
+  loading: { zh: '加载中...', en: 'Loading...' },
+  success: { zh: '成功', en: 'Success' },
+  error: { zh: '错误', en: 'Error' },
+
+  // Model
+  modelName: { zh: '模型', en: 'Model' },
+  workspace: { zh: '工作空间', en: 'Workspace' },
+  maxTokens: { zh: '最大 Token 数', en: 'Max Tokens' },
+  temperature: { zh: '温度', en: 'Temperature' },
+  maxToolIterations: { zh: '最大工具迭代次数', en: 'Max Tool Iterations' },
+
+  // Provider
+  apiKey: { zh: 'API 密钥', en: 'API Key' },
+  apiBase: { zh: 'API Base', en: 'API Base' },
+  extraHeaders: { zh: '额外请求头', en: 'Extra Headers' },
+  apiKeySet: { zh: '已设置', en: 'Set' },
+  apiKeyNotSet: { zh: '未设置', en: 'Not Set' },
+  showKey: { zh: '显示密钥', en: 'Show Key' },
+  hideKey: { zh: '隐藏密钥', en: 'Hide Key' },
+
+  // Channel
+  allowFrom: { zh: '允许来源', en: 'Allow From' },
+  token: { zh: 'Token', en: 'Token' },
+  botToken: { zh: 'Bot Token', en: 'Bot Token' },
+  appToken: { zh: 'App Token', en: 'App Token' },
+  appId: { zh: 'App ID', en: 'App ID' },
+  appSecret: { zh: 'App Secret', en: 'App Secret' },
+  clientId: { zh: 'Client ID', en: 'Client ID' },
+  clientSecret: { zh: 'Client Secret', en: 'Client Secret' },
+  encryptKey: { zh: '加密密钥', en: 'Encrypt Key' },
+  verificationToken: { zh: '验证令牌', en: 'Verification Token' },
+  bridgeUrl: { zh: '桥接 URL', en: 'Bridge URL' },
+  gatewayUrl: { zh: '网关 URL', en: 'Gateway URL' },
+  proxy: { zh: '代理', en: 'Proxy' },
+  intents: { zh: 'Intents', en: 'Intents' },
+  mode: { zh: '模式', en: 'Mode' },
+  webhookPath: { zh: 'Webhook 路径', en: 'Webhook Path' },
+  groupPolicy: { zh: '群组策略', en: 'Group Policy' },
+  consentGranted: { zh: '同意条款', en: 'Consent Granted' },
+  imapHost: { zh: 'IMAP 服务器', en: 'IMAP Host' },
+  imapPort: { zh: 'IMAP 端口', en: 'IMAP Port' },
+  imapUsername: { zh: 'IMAP 用户名', en: 'IMAP Username' },
+  imapPassword: { zh: 'IMAP 密码', en: 'IMAP Password' },
+  imapMailbox: { zh: 'IMAP 邮箱', en: 'IMAP Mailbox' },
+  imapUseSsl: { zh: 'IMAP 使用 SSL', en: 'IMAP Use SSL' },
+  smtpHost: { zh: 'SMTP 服务器', en: 'SMTP Host' },
+  smtpPort: { zh: 'SMTP 端口', en: 'SMTP Port' },
+  smtpUsername: { zh: 'SMTP 用户名', en: 'SMTP Username' },
+  smtpPassword: { zh: 'SMTP 密码', en: 'SMTP Password' },
+  smtpUseTls: { zh: 'SMTP 使用 TLS', en: 'SMTP Use TLS' },
+  smtpUseSsl: { zh: 'SMTP 使用 SSL', en: 'SMTP Use SSL' },
+  fromAddress: { zh: '发件地址', en: 'From Address' },
+  autoReplyEnabled: { zh: '自动回复已启用', en: 'Auto Reply Enabled' },
+  pollIntervalSeconds: { zh: '轮询间隔(秒)', en: 'Poll Interval (s)' },
+  markSeen: { zh: '标记为已读', en: 'Mark Seen' },
+  maxBodyChars: { zh: '最大正文字符数', en: 'Max Body Chars' },
+  subjectPrefix: { zh: '主题前缀', en: 'Subject Prefix' },
+  baseUrl: { zh: 'Base URL', en: 'Base URL' },
+  socketUrl: { zh: 'Socket URL', en: 'Socket URL' },
+  socketPath: { zh: 'Socket 路径', en: 'Socket Path' },
+  socketDisableMsgpack: { zh: '禁用 Msgpack', en: 'Disable Msgpack' },
+  socketReconnectDelayMs: { zh: '重连延迟(ms)', en: 'Reconnect Delay (ms)' },
+  socketMaxReconnectDelayMs: { zh: '最大重连延迟(ms)', en: 'Max Reconnect Delay (ms)' },
+  socketConnectTimeoutMs: { zh: '连接超时(ms)', en: 'Connect Timeout (ms)' },
+  refreshIntervalMs: { zh: '刷新间隔(ms)', en: 'Refresh Interval (ms)' },
+  watchTimeoutMs: { zh: '监视超时(ms)', en: 'Watch Timeout (ms)' },
+  watchLimit: { zh: '监视限制', en: 'Watch Limit' },
+  retryDelayMs: { zh: '重试延迟(ms)', en: 'Retry Delay (ms)' },
+  maxRetryAttempts: { zh: '最大重试次数', en: 'Max Retry Attempts' },
+  clawToken: { zh: 'Claw Token', en: 'Claw Token' },
+  agentUserId: { zh: '代理用户ID', en: 'Agent User ID' },
+  sessions: { zh: '会话', en: 'Sessions' },
+  panels: { zh: '面板', en: 'Panels' },
+  mentionRequireInGroups: { zh: '群组中需要@', en: 'Require Mention in Groups' },
+  groups: { zh: '群组', en: 'Groups' },
+  replyDelayMode: { zh: '回复延迟模式', en: 'Reply Delay Mode' },
+  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' },
+
+  // Status
+  connected: { zh: '已连接', en: 'Connected' },
+  disconnected: { zh: '未连接', en: 'Disconnected' },
+  connecting: { zh: '连接中...', en: 'Connecting...' },
+
+  // Messages
+  configSaved: { zh: '配置已保存', en: 'Configuration saved' },
+  configSaveFailed: { zh: '保存配置失败', en: 'Failed to save configuration' },
+  configReloaded: { zh: '配置已重载', en: 'Configuration reloaded' },
+  configReloadFailed: { zh: '重载配置失败', en: 'Failed to reload configuration' },
+  enterTag: { zh: '输入后按回车...', en: 'Type and press Enter...' },
+  headerName: { zh: 'Header 名称', en: 'Header Name' },
+  headerValue: { zh: 'Header 值', en: 'Header Value' }
+};
+
+export function t(key: string, lang: 'zh' | 'en' = 'en'): string {
+  return LABELS[key]?.[lang] || LABELS[key]?.en || key;
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/src/stores/ui.store.ts

@@ -0,0 +1,39 @@
+import { create } from 'zustand';
+
+type ConnectionStatus = 'connected' | 'disconnected' | 'connecting';
+
+interface UiState {
+  // Active configuration tab
+  activeTab: 'model' | 'providers' | 'channels' | 'ui';
+  setActiveTab: (tab: UiState['activeTab']) => void;
+
+  // Connection status
+  connectionStatus: ConnectionStatus;
+  setConnectionStatus: (status: ConnectionStatus) => void;
+
+  // Provider modal
+  providerModal: { open: boolean; provider?: string };
+  openProviderModal: (provider?: string) => void;
+  closeProviderModal: () => void;
+
+  // Channel modal
+  channelModal: { open: boolean; channel?: string };
+  openChannelModal: (channel?: string) => void;
+  closeChannelModal: () => void;
+}
+
+export const useUiStore = create<UiState>((set) => ({
+  activeTab: 'model',
+  setActiveTab: (tab) => set({ activeTab: tab }),
+
+  connectionStatus: 'disconnected',
+  setConnectionStatus: (status) => set({ connectionStatus: status }),
+
+  providerModal: { open: false },
+  openProviderModal: (provider) => set({ providerModal: { open: true, provider } }),
+  closeProviderModal: () => set({ providerModal: { open: false } }),
+
+  channelModal: { open: false },
+  openChannelModal: (channel) => set({ channelModal: { open: true, channel } }),
+  closeChannelModal: () => set({ channelModal: { open: false } })
+}));

package/src/vite-env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/tailwind.config.js

@@ -0,0 +1,43 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ['class'],
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))'
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))'
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))'
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))'
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))'
+        }
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)'
+      }
+    }
+  },
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  plugins: [require('tailwindcss-animate')]
+};

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "noEmit": true,
+    "allowImportingTsExtensions": true,
+    "types": ["vite/client"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/vite.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src')
+    }
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:18791',
+        changeOrigin: true
+      },
+      '/ws': {
+        target: 'ws://127.0.0.1:18791',
+        ws: true
+      }
+    }
+  }
+});