@nextclaw/ui 0.2.3 → 0.2.5

package/src/api/types.ts

@@ -24,13 +24,6 @@ export type ProviderConfigUpdate = {
 
 export type ChannelConfigUpdate = Record<string, unknown>;
 
-export type UiConfigView = {
-  enabled: boolean;
-  host: string;
-  port: number;
-  open: boolean;
-};
-
 export type ConfigView = {
   agents: {
     defaults: {
@@ -45,7 +38,6 @@ export type ConfigView = {
   channels: Record<string, Record<string, unknown>>;
   tools?: Record<string, unknown>;
   gateway?: Record<string, unknown>;
-  ui?: UiConfigView;
 };
 
 export type ProviderSpecView = {
@@ -62,6 +54,7 @@ export type ChannelSpecView = {
   name: string;
   displayName?: string;
   enabled: boolean;
+  tutorialUrl?: string;
 };
 
 export type ConfigMetaView = {
@@ -69,6 +62,12 @@ export type ConfigMetaView = {
   channels: ChannelSpecView[];
 };
 
+export type FeishuProbeView = {
+  appId: string;
+  botName?: string | null;
+  botOpenId?: string | null;
+};
+
 // WebSocket events
 export type WsEvent =
   | { type: 'config.updated'; payload: { path: string } }

package/src/components/common/LogoBadge.tsx

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import { cn } from '@/lib/utils';
+
+type LogoBadgeProps = {
+  name: string;
+  src?: string | null;
+  className?: string;
+  imgClassName?: string;
+  fallback?: React.ReactNode;
+};
+
+export function LogoBadge({ name, src, className, imgClassName, fallback }: LogoBadgeProps) {
+  const [failed, setFailed] = useState(false);
+  const showImage = Boolean(src) && !failed;
+
+  return (
+    <div className={cn('flex items-center justify-center', className)}>
+      {showImage ? (
+        <img
+          src={src as string}
+          alt={`${name} logo`}
+          className={cn('h-6 w-6 object-contain', imgClassName)}
+          onError={() => setFailed(true)}
+          draggable={false}
+        />
+      ) : (
+        fallback ?? (
+          <span className="text-lg font-bold uppercase">
+            {name.slice(0, 1)}
+          </span>
+        )
+      )}
+    </div>
+  );
+}

package/src/components/common/StatusBadge.tsx

@@ -22,9 +22,9 @@ const statusConfig: Record<
   },
   disconnected: {
     label: t('disconnected'),
-    dotClass: 'bg-[hsl(30,8%,55%)]',
-    textClass: 'text-[hsl(30,8%,45%)]',
-    bgClass: 'bg-[hsl(40,20%,96%)]',
+    dotClass: 'bg-gray-400',
+    textClass: 'text-gray-500',
+    bgClass: 'bg-gray-100',
     icon: X
   },
   connecting: {
@@ -48,8 +48,8 @@ export function StatusBadge({ status, className }: StatusBadgeProps) {
     )}>
       <div className={cn('h-2 w-2 rounded-full', config.dotClass)} />
       <span className={cn('text-xs font-medium flex items-center gap-1', config.textClass)}>
-        <Icon className={cn('h-3 w-3', status === 'connecting' && 'animate-spin')} />
         {config.label}
+        {status === 'connecting' && <Icon className="h-3 w-3 animate-spin" />}
       </span>
     </div>
   );

package/src/components/config/ChannelForm.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useConfig, useUpdateChannel } from '@/hooks/useConfig';
+import { probeFeishu } from '@/api/config';
 import { useUiStore } from '@/stores/ui.store';
 import {
   Dialog,
@@ -15,26 +16,27 @@ import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import { TagInput } from '@/components/common/TagInput';
 import { t } from '@/lib/i18n';
+import { toast } from 'sonner';
 import { MessageCircle, Settings, ToggleLeft, Hash, Mail, Globe, KeyRound } from 'lucide-react';
 
 // Field icon mapping
 const getFieldIcon = (fieldName: string) => {
   if (fieldName.includes('token') || fieldName.includes('secret') || fieldName.includes('password')) {
-    return <KeyRound className="h-3.5 w-3.5 text-[hsl(30,8%,45%)]" />;
+    return <KeyRound className="h-3.5 w-3.5 text-gray-500" />;
   }
   if (fieldName.includes('url') || fieldName.includes('host')) {
-    return <Globe className="h-3.5 w-3.5 text-[hsl(30,8%,45%)]" />;
+    return <Globe className="h-3.5 w-3.5 text-gray-500" />;
   }
   if (fieldName.includes('email') || fieldName.includes('mail')) {
-    return <Mail className="h-3.5 w-3.5 text-[hsl(30,8%,45%)]" />;
+    return <Mail className="h-3.5 w-3.5 text-gray-500" />;
   }
   if (fieldName.includes('id') || fieldName.includes('from')) {
-    return <Hash className="h-3.5 w-3.5 text-[hsl(30,8%,45%)]" />;
+    return <Hash className="h-3.5 w-3.5 text-gray-500" />;
   }
   if (fieldName === 'enabled' || fieldName === 'consentGranted') {
-    return <ToggleLeft className="h-3.5 w-3.5 text-[hsl(30,8%,45%)]" />;
+    return <ToggleLeft className="h-3.5 w-3.5 text-gray-500" />;
   }
-  return <Settings className="h-3.5 w-3.5 text-[hsl(30,8%,45%)]" />;
+  return <Settings className="h-3.5 w-3.5 text-gray-500" />;
 };
 
 // Channel field definitions
@@ -97,7 +99,8 @@ const CHANNEL_FIELDS: Record<string, Array<{ name: string; type: string; label:
   qq: [
     { name: 'enabled', type: 'boolean', label: t('enabled') },
     { name: 'appId', type: 'text', label: t('appId') },
-    { name: 'secret', type: 'password', label: t('secret') },
+    { name: 'secret', type: 'password', label: t('appSecret') },
+    { name: 'markdownSupport', type: 'boolean', label: t('markdownSupport') },
     { name: 'allowFrom', type: 'tags', label: t('allowFrom') }
   ]
 };
@@ -122,6 +125,7 @@ export function ChannelForm() {
   const updateChannel = useUpdateChannel();
 
   const [formData, setFormData] = useState<Record<string, unknown>>({});
+  const [isConnecting, setIsConnecting] = useState(false);
 
   const channelName = channelModal.channel;
   const channelConfig = channelName ? config?.channels[channelName] : null;
@@ -150,6 +154,26 @@ export function ChannelForm() {
     );
   };
 
+  const handleVerifyConnect = async () => {
+    if (!channelName || channelName !== 'feishu') return;
+    setIsConnecting(true);
+    try {
+      const nextData = { ...formData, enabled: true };
+      if (!formData.enabled) {
+        setFormData(nextData);
+      }
+      await updateChannel.mutateAsync({ channel: channelName, data: nextData });
+      const probe = await probeFeishu();
+      const botLabel = probe.botName ? ` (${probe.botName})` : '';
+      toast.success(t('feishuVerifySuccess') + botLabel);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      toast.error(`${t('feishuVerifyFailed')}: ${message}`);
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+
   const Icon = channelIcons[channelName || ''] || channelIcons.default;
   const gradientClass = channelColors[channelName || ''] || channelColors.default;
 
@@ -174,15 +198,15 @@ export function ChannelForm() {
               <div key={field.name} className="space-y-2.5">
                 <Label
                   htmlFor={field.name}
-                  className="text-sm font-medium text-[hsl(30,20%,12%)] flex items-center gap-2"
+                  className="text-sm font-medium text-gray-900 flex items-center gap-2"
                 >
                   {getFieldIcon(field.name)}
                   {field.label}
                 </Label>
 
                 {field.type === 'boolean' && (
-                  <div className="flex items-center justify-between p-3 rounded-xl bg-[hsl(40,20%,96%)]">
-                    <span className="text-sm text-[hsl(30,8%,45%)]">
+                  <div className="flex items-center justify-between p-3 rounded-xl bg-gray-50">
+                    <span className="text-sm text-gray-500">
                       {(formData[field.name] as boolean) ? t('enabled') : t('disabled')}
                     </span>
                     <Switch
@@ -200,7 +224,7 @@ export function ChannelForm() {
                     type={field.type}
                     value={(formData[field.name] as string) || ''}
                     onChange={(e) => updateField(field.name, e.target.value)}
-                    className="rounded-xl border-[hsl(40,20%,90%)] bg-[hsl(40,20%,98%)] focus:bg-white"
+                    className="rounded-xl"
                   />
                 )}
 
@@ -211,7 +235,7 @@ export function ChannelForm() {
                     value={(formData[field.name] as string) || ''}
                     onChange={(e) => updateField(field.name, e.target.value)}
                     placeholder="Leave blank to keep unchanged"
-                    className="rounded-xl border-[hsl(40,20%,90%)] bg-[hsl(40,20%,98%)] focus:bg-white"
+                    className="rounded-xl"
                   />
                 )}
 
@@ -221,7 +245,7 @@ export function ChannelForm() {
                     type="number"
                     value={(formData[field.name] as number) || 0}
                     onChange={(e) => updateField(field.name, parseInt(e.target.value) || 0)}
-                    className="rounded-xl border-[hsl(40,20%,90%)] bg-[hsl(40,20%,98%)] focus:bg-white"
+                    className="rounded-xl"
                   />
                 )}
 
@@ -239,17 +263,25 @@ export function ChannelForm() {
                 type="button"
                 variant="outline"
                 onClick={closeChannelModal}
-                className="rounded-xl border-[hsl(40,20%,90%)] bg-white hover:bg-[hsl(40,20%,96%)]"
               >
                 {t('cancel')}
               </Button>
               <Button
                 type="submit"
-                disabled={updateChannel.isPending}
-                className="rounded-xl bg-gradient-to-r from-orange-400 to-amber-500 hover:from-orange-500 hover:to-amber-600 text-white border-0"
+                disabled={updateChannel.isPending || isConnecting}
               >
                 {updateChannel.isPending ? 'Saving...' : t('save')}
               </Button>
+              {channelName === 'feishu' && (
+                <Button
+                  type="button"
+                  onClick={handleVerifyConnect}
+                  disabled={updateChannel.isPending || isConnecting}
+                  variant="secondary"
+                >
+                  {isConnecting ? t('feishuConnecting') : t('saveVerifyConnect')}
+                </Button>
+              )}
             </DialogFooter>
           </form>
         </div>

package/src/components/config/ChannelsList.tsx

@@ -1,12 +1,13 @@
 import { useConfig, useConfigMeta } from '@/hooks/useConfig';
 import { Button } from '@/components/ui/button';
-import { Skeleton } from '@/components/ui/skeleton';
-import { MessageCircle, Settings2, Bell, Mail, MessageSquare, Slack, MoreHorizontal, Plus } from 'lucide-react';
+import { MessageCircle, Mail, MessageSquare, Slack, ExternalLink, Bell, Zap, Radio } from 'lucide-react';
 import { useState } from 'react';
 import { ChannelForm } from './ChannelForm';
 import { useUiStore } from '@/stores/ui.store';
 import { cn } from '@/lib/utils';
 import { Tabs } from '@/components/ui/tabs-custom';
+import { LogoBadge } from '@/components/common/LogoBadge';
+import { getChannelLogo } from '@/lib/logos';
 
 const channelIcons: Record<string, typeof MessageCircle> = {
   telegram: MessageCircle,
@@ -16,6 +17,15 @@ const channelIcons: Record<string, typeof MessageCircle> = {
   default: MessageSquare
 };
 
+const channelDescriptions: Record<string, string> = {
+  telegram: 'Connect with Telegram bots for instant messaging',
+  slack: 'Integrate with Slack workspaces for team collaboration',
+  email: 'Send and receive messages via email protocols',
+  webhook: 'Receive HTTP webhooks for custom integrations',
+  discord: 'Connect Discord bots to your community servers',
+  feishu: 'Enterprise messaging and collaboration platform'
+};
+
 export function ChannelsList() {
   const { data: config } = useConfig();
   const { data: meta } = useConfigMeta();
@@ -23,7 +33,7 @@ export function ChannelsList() {
   const [activeTab, setActiveTab] = useState('active');
 
   if (!config || !meta) {
-    return <div className="p-8 text-[hsl(30,8%,55%)]">Loading channels...</div>;
+    return <div className="p-8 text-gray-400">Loading channels...</div>;
   }
 
   const tabs = [
@@ -31,71 +41,123 @@ export function ChannelsList() {
     { id: 'all', label: 'All Channels', count: meta.channels.length }
   ];
 
+  const filteredChannels = meta.channels.filter(channel => {
+    const enabled = config.channels[channel.name]?.enabled || false;
+    return activeTab === 'all' || enabled;
+  });
+
   return (
     <div className="animate-fade-in pb-20">
       <div className="flex items-center justify-between mb-8">
-        <h2 className="text-2xl font-bold text-[hsl(30,15%,10%)]">Message Channels</h2>
+        <h2 className="text-2xl font-bold text-gray-900">Message Channels</h2>
       </div>
 
       <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
 
-      <div className="space-y-1">
-        {meta.channels.map((channel, index) => {
+      {/* Channel Cards Grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        {filteredChannels.map((channel) => {
           const channelConfig = config.channels[channel.name];
           const enabled = channelConfig?.enabled || false;
           const Icon = channelIcons[channel.name] || channelIcons.default;
 
-          return (activeTab === 'all' || enabled) && (
+          return (
             <div
               key={channel.name}
-              className="group flex items-center gap-5 p-3 rounded-2xl hover:bg-[hsl(40,10%,96%)] transition-all cursor-pointer border border-transparent hover:border-[hsl(40,10%,94%)]"
+              className={cn(
+                'group relative flex flex-col p-5 rounded-2xl border transition-all duration-base cursor-pointer',
+                'hover:shadow-card-hover hover:-translate-y-0.5',
+                enabled
+                  ? 'bg-white border-gray-200 hover:border-gray-300'
+                  : 'bg-gray-50 border-gray-200 hover:border-gray-300 hover:bg-white'
+              )}
               onClick={() => openChannelModal(channel.name)}
             >
-              {/* Icon */}
-              <div className={cn(
-                'h-10 w-10 flex items-center justify-center rounded-xl transition-all group-hover:scale-105',
-                enabled ? 'bg-[hsl(30,15%,10%)] text-white' : 'bg-transparent border border-[hsl(40,10%,92%)] text-[hsl(30,8%,55%)]'
-              )}>
-                <Icon className="h-5 w-5" />
+              {/* Header with Icon and Status */}
+              <div className="flex items-start justify-between mb-4">
+                <LogoBadge
+                  name={channel.name}
+                  src={getChannelLogo(channel.name)}
+                  className={cn(
+                    'h-12 w-12 rounded-xl border transition-all',
+                    enabled
+                      ? 'bg-white border-primary'
+                      : 'bg-white border-gray-200 group-hover:border-gray-300'
+                  )}
+                  imgClassName="h-6 w-6"
+                  fallback={<Icon className="h-6 w-6" />}
+                />
+                
+                {/* Status Badge */}
+                {enabled ? (
+                  <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-50 text-emerald-600">
+                    <Zap className="h-3.5 w-3.5" />
+                    <span className="text-[11px] font-bold">Active</span>
+                  </div>
+                ) : (
+                  <div className="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-gray-100 text-gray-500">
+                    <Radio className="h-3.5 w-3.5" />
+                    <span className="text-[11px] font-bold">Inactive</span>
+                  </div>
+                )}
               </div>
 
-              {/* Info */}
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center gap-2">
-                  <h3 className="text-[14px] font-bold text-[hsl(30,15%,10%)] truncate">
-                    {channel.displayName || channel.name}
-                  </h3>
-                  {enabled && (
-                    <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]" />
-                  )}
-                </div>
-                <p className="text-[12px] text-[hsl(30,8%,55%)] truncate leading-tight mt-0.5">
-                  {enabled ? 'Channel is active and processing messages' : 'Click to configure this communication channel'}
+              {/* Channel Info */}
+              <div className="flex-1">
+                <h3 className="text-[15px] font-bold text-gray-900 mb-1">
+                  {channel.displayName || channel.name}
+                </h3>
+                <p className="text-[12px] text-gray-500 leading-relaxed line-clamp-2">
+                  {channelDescriptions[channel.name] || 'Configure this communication channel'}
                 </p>
               </div>
 
-              {/* Status/Actions */}
-              <div className="flex items-center gap-4">
+              {/* Footer with Actions */}
+              <div className="mt-4 pt-4 border-t border-gray-100 flex items-center gap-2">
+                {channel.tutorialUrl && (
+                  <a
+                    href={channel.tutorialUrl}
+                    target="_blank"
+                    rel="noreferrer"
+                    onClick={(e) => e.stopPropagation()}
+                    className="flex items-center justify-center h-9 w-9 rounded-xl bg-gray-100 hover:bg-gray-200 text-gray-600 transition-colors"
+                    title="View Guide"
+                  >
+                    <ExternalLink className="h-4 w-4" />
+                  </a>
+                )}
                 <Button
-                  variant="ghost"
+                  variant={enabled ? 'ghost' : 'default'}
                   size="sm"
-                  className="rounded-xl bg-[hsl(40,10%,92%)] hover:bg-[hsl(40,10%,90%)] text-[hsl(30,10%,35%)] text-[11px] font-bold px-4 h-8"
+                  className="flex-1 rounded-xl text-xs font-semibold h-9"
                   onClick={(e) => {
                     e.stopPropagation();
                     openChannelModal(channel.name);
                   }}
                 >
-                  Configure
+                  {enabled ? 'Configure' : 'Enable'}
                 </Button>
-                <button className="h-8 w-8 flex items-center justify-center text-[hsl(30,8%,45%)]">
-                  <MoreHorizontal className="h-4 w-4" />
-                </button>
               </div>
             </div>
           );
         })}
       </div>
 
+      {/* Empty State */}
+      {filteredChannels.length === 0 && (
+        <div className="flex flex-col items-center justify-center py-16 text-center">
+          <div className="h-16 w-16 flex items-center justify-center rounded-2xl bg-gray-100 mb-4">
+            <MessageSquare className="h-8 w-8 text-gray-400" />
+          </div>
+          <h3 className="text-[15px] font-bold text-gray-900 mb-2">
+            No channels enabled
+          </h3>
+          <p className="text-[13px] text-gray-500 max-w-sm">
+            Enable a messaging channel to start receiving messages. Click on any channel to configure it.
+          </p>
+        </div>
+      )}
+
       <ChannelForm />
     </div>
   );

package/src/components/config/ModelConfig.tsx

@@ -1,11 +1,11 @@
-import { useState, useEffect } from 'react';
-import { useConfig, useUpdateModel } from '@/hooks/useConfig';
 import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import { Card, CardContent, CardTitle, CardDescription } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
-import { Loader2, Save, Sparkles, Sliders, Folder } from 'lucide-react';
+import { useConfig, useUpdateModel } from '@/hooks/useConfig';
+import { Folder, Loader2, Sliders, Sparkles } from 'lucide-react';
+import { useEffect, useState } from 'react';
 
 export function ModelConfig() {
   const { data: config, isLoading } = useConfig();
@@ -37,7 +37,7 @@ export function ModelConfig() {
           <Skeleton className="h-8 w-32" />
           <Skeleton className="h-4 w-48" />
         </div>
-        <Card className="rounded-2xl border-[hsl(40,20%,90%)] p-6">
+        <Card className="rounded-2xl border-gray-200 p-6">
           <div className="flex items-center gap-4 mb-6">
             <Skeleton className="h-12 w-12 rounded-xl" />
             <div className="space-y-2">
@@ -48,7 +48,7 @@ export function ModelConfig() {
           <Skeleton className="h-4 w-20 mb-2" />
           <Skeleton className="h-10 w-full rounded-xl" />
         </Card>
-        <Card className="rounded-2xl border-[hsl(40,20%,90%)] p-6">
+        <Card className="rounded-2xl border-gray-200 p-6">
           <Skeleton className="h-5 w-24 mb-2" />
           <Skeleton className="h-3 w-40 mb-6" />
           <div className="space-y-6">
@@ -69,69 +69,70 @@ export function ModelConfig() {
   return (
     <div className="max-w-4xl animate-fade-in pb-20">
       <div className="mb-10">
-        <h2 className="text-2xl font-bold text-[hsl(30,15%,10%)]">Model Configuration</h2>
-        <p className="text-[14px] text-[hsl(30,8%,55%)] mt-1">Configure default AI model and behavior parameters</p>
+        <h2 className="text-2xl font-bold text-gray-900">Model Configuration</h2>
+        <p className="text-sm text-gray-500 mt-1">Configure default AI model and behavior parameters</p>
       </div>
 
       <form onSubmit={handleSubmit} className="space-y-8">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
           {/* Model Card */}
-          <div className="p-8 rounded-[2rem] bg-[hsl(40,10%,98%)] border border-[hsl(40,10%,94%)]">
+          <div className="p-8 rounded-2xl bg-gray-50 border border-gray-200">
             <div className="flex items-center gap-4 mb-8">
-              <div className="h-10 w-10 rounded-xl bg-[hsl(30,15%,10%)] flex items-center justify-center text-white">
+              <div className="h-10 w-10 rounded-xl bg-primary flex items-center justify-center text-white">
                 <Sparkles className="h-5 w-5" />
               </div>
-              <h3 className="text-lg font-bold text-[hsl(30,15%,10%)]">Default Model</h3>
+              <h3 className="text-lg font-bold text-gray-900">Default Model</h3>
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="model" className="text-[12px] font-bold text-[hsl(30,8%,45%)] uppercase tracking-wider">Model Name</Label>
+              <Label htmlFor="model" className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Model Name</Label>
               <Input
                 id="model"
                 value={model}
                 onChange={(e) => setModel(e.target.value)}
-                placeholder="e.g. gpt-4, claude-3"
-                className="h-12 px-4 rounded-xl border-[hsl(40,10%,92%)] bg-white focus:ring-1 focus:ring-[hsl(30,15%,10%)] transition-all"
+                placeholder="minimax/MiniMax-M2.1"
+                className="h-12 px-4 rounded-xl"
               />
+              <p className="text-xs text-gray-400">Examples: minimax/MiniMax-M2.1 · anthropic/claude-opus-4-5</p>
             </div>
           </div>
 
           {/* Workspace Card */}
-          <div className="p-8 rounded-[2rem] bg-[hsl(40,10%,98%)] border border-[hsl(40,10%,94%)]">
+          <div className="p-8 rounded-2xl bg-gray-50 border border-gray-200">
             <div className="flex items-center gap-4 mb-8">
-              <div className="h-10 w-10 rounded-xl bg-[hsl(30,15%,10%)] flex items-center justify-center text-white">
+              <div className="h-10 w-10 rounded-xl bg-primary flex items-center justify-center text-white">
                 <Folder className="h-5 w-5" />
               </div>
-              <h3 className="text-lg font-bold text-[hsl(30,15%,10%)]">Workspace</h3>
+              <h3 className="text-lg font-bold text-gray-900">Workspace</h3>
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="workspace" className="text-[12px] font-bold text-[hsl(30,8%,45%)] uppercase tracking-wider">Default Path</Label>
+              <Label htmlFor="workspace" className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Default Path</Label>
               <Input
                 id="workspace"
                 value={workspace}
                 onChange={(e) => setWorkspace(e.target.value)}
                 placeholder="/path/to/workspace"
-                className="h-12 px-4 rounded-xl border-[hsl(40,10%,92%)] bg-white focus:ring-1 focus:ring-[hsl(30,15%,10%)] transition-all"
+                className="h-12 px-4 rounded-xl"
               />
             </div>
           </div>
         </div>
 
         {/* Parameters Section */}
-        <div className="p-8 rounded-[2.5rem] bg-white border border-[hsl(40,10%,94%)] shadow-sm">
+        <div className="p-8 rounded-2xl bg-white border border-gray-200 shadow-card">
           <div className="flex items-center gap-4 mb-10">
-            <div className="h-10 w-10 rounded-xl bg-[hsl(30,15%,10%)] flex items-center justify-center text-white">
+            <div className="h-10 w-10 rounded-xl bg-primary flex items-center justify-center text-white">
               <Sliders className="h-5 w-5" />
             </div>
-            <h3 className="text-lg font-bold text-[hsl(30,15%,10%)]">Generation Parameters</h3>
+            <h3 className="text-lg font-bold text-gray-900">Generation Parameters</h3>
           </div>
 
           <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
             <div className="space-y-4">
               <div className="flex justify-between items-center mb-2">
-                <Label className="text-[12px] font-bold text-[hsl(30,8%,45%)] uppercase tracking-wider">Max Tokens</Label>
-                <span className="text-[13px] font-bold text-[hsl(30,15%,10%)]">{maxTokens.toLocaleString()}</span>
+                <Label className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Max Tokens</Label>
+                <span className="text-sm font-semibold text-gray-900">{maxTokens.toLocaleString()}</span>
               </div>
               <input
                 type="range"
@@ -140,14 +141,14 @@ export function ModelConfig() {
                 step="1000"
                 value={maxTokens}
                 onChange={(e) => setMaxTokens(parseInt(e.target.value))}
-                className="w-full h-1 bg-[hsl(40,10%,92%)] rounded-full appearance-none cursor-pointer accent-[hsl(30,15%,10%)]"
+                className="w-full h-1 bg-gray-200 rounded-full appearance-none cursor-pointer accent-primary"
               />
             </div>
 
             <div className="space-y-4">
               <div className="flex justify-between items-center mb-2">
-                <Label className="text-[12px] font-bold text-[hsl(30,8%,45%)] uppercase tracking-wider">Temperature</Label>
-                <span className="text-[13px] font-bold text-[hsl(30,15%,10%)]">{temperature}</span>
+                <Label className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Temperature</Label>
+                <span className="text-sm font-semibold text-gray-900">{temperature}</span>
               </div>
               <input
                 type="range"
@@ -156,7 +157,7 @@ export function ModelConfig() {
                 step="0.1"
                 value={temperature}
                 onChange={(e) => setTemperature(parseFloat(e.target.value))}
-                className="w-full h-1 bg-[hsl(40,10%,92%)] rounded-full appearance-none cursor-pointer accent-[hsl(30,15%,10%)]"
+                className="w-full h-1 bg-gray-200 rounded-full appearance-none cursor-pointer accent-primary"
               />
             </div>
           </div>
@@ -166,7 +167,7 @@ export function ModelConfig() {
           <Button
             type="submit"
             disabled={updateModel.isPending}
-            className="h-12 px-8 rounded-2xl bg-[hsl(30,15%,10%)] text-white hover:bg-[hsl(30,15%,20%)] transition-all font-bold shadow-md active:scale-95"
+            size="lg"
           >
             {updateModel.isPending ? (
               <Loader2 className="h-5 w-5 animate-spin" />