feat: spaces redesign, model selector, auth fixes

Spaces:
- Perplexity-like UI with collaboration features
- Space detail page with threads/members tabs
- Invite members via email, role management
- New space creation with icon/color picker

Model selector:
- Added Ollama client for free Auto model
- GooSeek 1.0 via Timeweb (tariff-based)
- Frontend model dropdown in ChatInput

Auth & Infrastructure:
- Fixed auth-svc missing from Dockerfile.all
- Removed duplicate ratelimit_tiered.go (conflict)
- Added Redis to api-gateway for rate limiting
- Fixed Next.js proxy for local development

UI improvements:
- Redesigned login button in sidebar (gradient)
- Settings page with tabs (account/billing/prefs)
- Auth pages visual refresh

Made-with: Cursor

backend/webui/src/components/ChatInput.tsx

@@ -16,10 +16,13 @@ import {
   X,
   FileText,
   File,
+  Bot,
+  Cpu,
 } from 'lucide-react';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 
 type Mode = 'speed' | 'balanced' | 'quality';
+type ModelID = 'auto' | 'gooseek-1.0';
 
 export interface ChatAttachment {
   id: string;
@@ -28,10 +31,16 @@ export interface ChatAttachment {
   preview?: string;
 }
 
+export interface ChatModel {
+  providerId: string;
+  key: string;
+}
+
 export interface SendOptions {
   mode: Mode;
   webSearch: boolean;
   attachments: ChatAttachment[];
+  model: ChatModel;
 }
 
 interface ChatInputProps {
@@ -50,9 +59,15 @@ const modes: { value: Mode; label: string; icon: typeof Zap; desc: string }[] =
   { value: 'quality', label: 'Качество', icon: Sparkles, desc: '~60 сек' },
 ];
 
+const models: { id: ModelID; label: string; icon: typeof Bot; desc: string; providerId: string; key: string }[] = [
+  { id: 'auto', label: 'Auto', icon: Cpu, desc: 'Бесплатно', providerId: 'ollama', key: '' },
+  { id: 'gooseek-1.0', label: 'GooSeek 1.0', icon: Bot, desc: 'По тарифу', providerId: 'timeweb', key: 'gpt-4o' },
+];
+
 export function ChatInput({ onSend, onStop, isLoading, placeholder, autoFocus, value: externalValue, onChange: externalOnChange }: ChatInputProps) {
   const [internalMessage, setInternalMessage] = useState('');
   const [mode, setMode] = useState<Mode>('balanced');
+  const [modelId, setModelId] = useState<ModelID>('auto');
   const [isFocused, setIsFocused] = useState(false);
   const [webSearchEnabled, setWebSearchEnabled] = useState(false);
   const [attachments, setAttachments] = useState<ChatAttachment[]>([]);
@@ -73,10 +88,15 @@ export function ChatInput({ onSend, onStop, isLoading, placeholder, autoFocus, v
 
   const handleSubmit = useCallback(() => {
     if ((message.trim() || attachments.length > 0) && !isLoading) {
+      const selectedModel = models.find(m => m.id === modelId) || models[0];
       onSend(message.trim(), {
         mode,
         webSearch: webSearchEnabled,
         attachments,
+        model: {
+          providerId: selectedModel.providerId,
+          key: selectedModel.key,
+        },
       });
       if (isControlled && externalOnChange) {
         externalOnChange('');
@@ -88,7 +108,7 @@ export function ChatInput({ onSend, onStop, isLoading, placeholder, autoFocus, v
         textareaRef.current.style.height = 'auto';
       }
     }
-  }, [message, mode, webSearchEnabled, attachments, isLoading, onSend, isControlled, externalOnChange]);
+  }, [message, mode, modelId, webSearchEnabled, attachments, isLoading, onSend, isControlled, externalOnChange]);
 
   const handleFileSelect = useCallback((e: ChangeEvent<HTMLInputElement>, type: 'file' | 'image') => {
     const files = e.target.files;
@@ -142,6 +162,7 @@ export function ChatInput({ onSend, onStop, isLoading, placeholder, autoFocus, v
   };
 
   const currentMode = modes.find((m) => m.value === mode)!;
+  const currentModel = models.find((m) => m.id === modelId) || models[0];
 
   return (
     <div className="relative w-full">
@@ -162,32 +183,32 @@ export function ChatInput({ onSend, onStop, isLoading, placeholder, autoFocus, v
             {attachments.map((attachment) => (
               <div
                 key={attachment.id}
-                className="relative group flex items-center gap-2 bg-surface/80 border border-border/50 rounded-lg px-3 py-2"
+                className="relative group flex items-center gap-1.5 bg-surface/80 border border-border/50 rounded-lg px-2 py-1"
               >
                 {attachment.type === 'image' && attachment.preview ? (
                   <img
                     src={attachment.preview}
                     alt={attachment.file.name}
-                    className="w-8 h-8 object-cover rounded"
+                    className="w-6 h-6 object-cover rounded"
                   />
                 ) : (
-                  <div className="w-8 h-8 flex items-center justify-center bg-accent/10 rounded">
+                  <div className="w-6 h-6 flex items-center justify-center bg-accent/10 rounded">
                     {attachment.file.type.includes('pdf') ? (
-                      <FileText className="w-4 h-4 text-accent" />
+                      <FileText className="w-3.5 h-3.5 text-accent" />
                     ) : (
-                      <File className="w-4 h-4 text-accent" />
+                      <File className="w-3.5 h-3.5 text-accent" />
                     )}
                   </div>
                 )}
-                <span className="text-xs text-secondary max-w-[120px] truncate">
+                <span className="text-xs text-secondary max-w-[140px] truncate">
                   {attachment.file.name}
                 </span>
                 <button
                   onClick={() => removeAttachment(attachment.id)}
-                  className="ml-1 p-0.5 rounded-full hover:bg-error/20 text-muted hover:text-error transition-colors"
+                  className="p-0.5 rounded-full hover:bg-error/20 text-muted hover:text-error transition-colors"
                   title="Удалить"
                 >
-                  <X className="w-3.5 h-3.5" />
+                  <X className="w-3 h-3" />
                 </button>
               </div>
             ))}
@@ -227,12 +248,12 @@ export function ChatInput({ onSend, onStop, isLoading, placeholder, autoFocus, v
                 className={`
                   w-10 h-10 flex items-center justify-center rounded-xl transition-all duration-200
                   ${(message.trim() || attachments.length > 0)
-                    ? 'btn-gradient'
+                    ? 'btn-gradient text-accent'
                     : 'bg-surface/50 text-muted border border-border/50'
                   }
                 `}
               >
-                <ArrowUp className={`w-5 h-5 ${(message.trim() || attachments.length > 0) ? 'btn-gradient-text' : ''}`} />
+                <ArrowUp className="w-5 h-5 flex-shrink-0" />
               </button>
             )}
           </div>
@@ -276,6 +297,41 @@ export function ChatInput({ onSend, onStop, isLoading, placeholder, autoFocus, v
               </DropdownMenu.Portal>
             </DropdownMenu.Root>
 
+            {/* Model Selector */}
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger asChild>
+                <button className="flex items-center gap-2 h-8 px-3 text-xs text-secondary hover:text-primary rounded-lg hover:bg-surface/50 transition-all">
+                  <currentModel.icon className="w-4 h-4 text-gradient" />
+                  <span className="font-medium">{currentModel.label}</span>
+                  <ChevronDown className="w-3.5 h-3.5 opacity-50" />
+                </button>
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Portal>
+                <DropdownMenu.Content
+                  className="min-w-[180px] bg-surface/95 backdrop-blur-xl border border-border rounded-xl p-1.5 shadow-dropdown z-50"
+                  sideOffset={8}
+                >
+                  {models.map((m) => (
+                    <DropdownMenu.Item
+                      key={m.id}
+                      onClick={() => setModelId(m.id)}
+                      className={`
+                        flex items-center gap-3 px-3 py-2.5 text-sm rounded-lg cursor-pointer outline-none transition-colors
+                        ${modelId === m.id 
+                          ? 'active-gradient text-primary' 
+                          : 'text-secondary hover:bg-elevated/80 hover:text-primary'
+                        }
+                      `}
+                    >
+                      <m.icon className={`w-4 h-4 ${modelId === m.id ? 'text-gradient' : 'text-muted'}`} />
+                      <span className={`flex-1 font-medium ${modelId === m.id ? 'text-gradient' : ''}`}>{m.label}</span>
+                      <span className={`text-xs ${m.id === 'auto' ? 'text-success' : 'text-muted'}`}>{m.desc}</span>
+                    </DropdownMenu.Item>
+                  ))}
+                </DropdownMenu.Content>
+              </DropdownMenu.Portal>
+            </DropdownMenu.Root>
+
             {/* Separator */}
             <div className="w-px h-5 bg-border/50 mx-1" />
 
@@ -324,11 +380,6 @@ export function ChatInput({ onSend, onStop, isLoading, placeholder, autoFocus, v
             />
           </div>
 
-          <div className="flex items-center gap-3">
-            <span className="text-xs text-faint">
-              Enter для отправки · Shift+Enter для новой строки
-            </span>
-          </div>
         </div>
       </motion.div>
 

backend/webui/src/components/Sidebar.tsx

@@ -9,7 +9,6 @@ import {
   Compass,
   FolderOpen,
   Clock,
-  Settings,
   ChevronLeft,
   ChevronRight,
   TrendingUp,
@@ -19,7 +18,8 @@ import {
   X,
   Shield,
   LogIn,
-  UserPlus,
+  Wallet,
+  ChevronRight as ChevronRightIcon,
 } from 'lucide-react';
 import { filterMenuItems } from '@/lib/config/menu';
 import { useAuth } from '@/lib/contexts/AuthContext';
@@ -65,12 +65,12 @@ export function Sidebar({ onClose }: SidebarProps) {
   return (
     <motion.aside
       initial={false}
-      animate={{ width: isMobile ? 280 : collapsed ? 68 : 260 }}
+      animate={{ width: isMobile ? 240 : collapsed ? 56 : 200 }}
       transition={{ duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
       className="h-full flex flex-col bg-base border-r border-border/50"
     >
       {/* Header */}
-      <div className="h-16 px-4 flex items-center justify-between">
+      <div className="h-12 px-3 flex items-center justify-between">
         <AnimatePresence mode="wait">
           {(isMobile || !collapsed) && (
             <motion.div
@@ -79,7 +79,7 @@ export function Sidebar({ onClose }: SidebarProps) {
               exit={{ opacity: 0 }}
               transition={{ duration: 0.15 }}
             >
-              <span className="font-black italic text-primary tracking-tight text-3xl">GooSeek</span>
+              <span className="font-black italic text-primary tracking-tight text-xl">GooSeek</span>
             </motion.div>
           )}
         </AnimatePresence>
@@ -87,26 +87,26 @@ export function Sidebar({ onClose }: SidebarProps) {
         {isMobile ? (
           <button
             onClick={onClose}
-            className="w-9 h-9 flex items-center justify-center rounded-xl text-muted hover:text-primary hover:bg-surface/50 transition-all"
+            className="w-7 h-7 flex items-center justify-center rounded-lg text-muted hover:text-primary hover:bg-surface/50 transition-all"
           >
-            <X className="w-5 h-5" />
+            <X className="w-4 h-4" />
           </button>
         ) : (
           <button
             onClick={toggleCollapse}
-            className="w-8 h-8 flex items-center justify-center rounded-lg text-muted hover:text-secondary hover:bg-surface/50 transition-all"
+            className="w-6 h-6 flex items-center justify-center rounded text-muted hover:text-secondary hover:bg-surface/50 transition-all"
           >
             {collapsed ? (
-              <ChevronRight className="w-4 h-4" />
+              <ChevronRight className="w-3.5 h-3.5" />
             ) : (
-              <ChevronLeft className="w-4 h-4" />
+              <ChevronLeft className="w-3.5 h-3.5" />
             )}
           </button>
         )}
       </div>
 
       {/* Navigation */}
-      <nav className="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
+      <nav className="flex-1 px-2 py-2 space-y-0.5 overflow-y-auto">
         {navItems.map((item) => (
           <NavLink
             key={item.href}
@@ -120,13 +120,13 @@ export function Sidebar({ onClose }: SidebarProps) {
         ))}
 
         {/* Tools Section */}
-        <div className="pt-6 pb-2">
+        <div className="pt-4 pb-1">
           {(isMobile || !collapsed) && (
-            <span className="px-3 text-[11px] font-semibold text-muted uppercase tracking-wider">
+            <span className="px-2 text-[10px] font-semibold text-muted uppercase tracking-wider">
               Инструменты
             </span>
           )}
-          {!isMobile && collapsed && <div className="h-px bg-border/30 mx-2" />}
+          {!isMobile && collapsed && <div className="h-px bg-border/30 mx-1" />}
         </div>
 
         {toolItems.map((item) => (
@@ -142,8 +142,8 @@ export function Sidebar({ onClose }: SidebarProps) {
         ))}
       </nav>
 
-      {/* Footer */}
-      <div className="p-3 border-t border-border/30 space-y-1">
+      {/* Footer - Profile Block */}
+      <div className="p-2 border-t border-border/30">
         {isAdmin && (
           <NavLink
             href="/admin"
@@ -154,83 +154,86 @@ export function Sidebar({ onClose }: SidebarProps) {
             onClick={handleNavClick}
           />
         )}
-        <NavLink
-          href="/settings"
-          icon={Settings}
-          label="Настройки"
-          collapsed={!isMobile && collapsed}
-          active={pathname === '/settings'}
-          onClick={handleNavClick}
-        />
         
-        {/* Auth buttons for non-authenticated users */}
+        {/* Guest - Login button */}
         {!isAuthenticated && (
-          <div className={`pt-2 ${collapsed && !isMobile ? 'px-0' : ''}`}>
+          <div className={`${isAdmin ? 'mt-1' : ''}`}>
             {collapsed && !isMobile ? (
               <button
                 onClick={() => showAuthModal('login')}
-                className="w-full h-10 flex items-center justify-center rounded-xl bg-accent/10 text-accent hover:bg-accent/20 transition-all"
+                className="btn-gradient w-full h-9 flex items-center justify-center"
               >
-                <LogIn className="w-[18px] h-[18px]" />
+                <LogIn className="w-4 h-4 btn-gradient-text" />
               </button>
             ) : (
-              <div className="space-y-2">
-                <button
-                  onClick={() => { showAuthModal('login'); handleNavClick(); }}
-                  className="w-full h-10 flex items-center justify-center gap-2 rounded-xl bg-surface/50 text-secondary hover:text-primary hover:bg-surface transition-all text-sm font-medium"
-                >
-                  <LogIn className="w-4 h-4" />
-                  Войти
-                </button>
-                <button
-                  onClick={() => { showAuthModal('register'); handleNavClick(); }}
-                  className="w-full h-10 flex items-center justify-center gap-2 rounded-xl bg-accent text-white hover:bg-accent-hover transition-all text-sm font-medium"
-                >
-                  <UserPlus className="w-4 h-4" />
-                  Регистрация
-                </button>
-              </div>
+              <button
+                onClick={() => { showAuthModal('login'); handleNavClick(); }}
+                className="btn-gradient w-full h-9 flex items-center justify-center gap-2"
+              >
+                <LogIn className="w-3.5 h-3.5 btn-gradient-text" />
+                <span className="btn-gradient-text text-xs font-medium">Войти</span>
+              </button>
             )}
           </div>
         )}
         
-        {/* User info for authenticated users */}
+        {/* Authenticated - Profile with balance */}
         {isAuthenticated && user && (
-          <div className={`pt-2 ${collapsed && !isMobile ? 'justify-center' : ''}`}>
+          <div className={`${isAdmin ? 'mt-1' : ''}`}>
             {collapsed && !isMobile ? (
               <Link
                 href="/settings"
-                className="w-full h-10 flex items-center justify-center rounded-xl hover:bg-surface/50 transition-all"
+                onClick={handleNavClick}
+                className="w-full flex flex-col items-center gap-1"
               >
-                <div className="w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center">
+                <div className="w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center hover:bg-accent/30 transition-all">
                   {user.avatar ? (
                     <img src={user.avatar} alt={user.name} className="w-full h-full rounded-full object-cover" />
                   ) : (
-                    <span className="text-sm font-medium text-accent">
+                    <span className="text-xs font-semibold text-accent">
                       {user.name.charAt(0).toUpperCase()}
                     </span>
                   )}
                 </div>
+                <div className="flex items-center gap-0.5 px-1.5 py-0.5 rounded bg-surface/50">
+                  <Wallet className="w-2.5 h-2.5 text-accent" />
+                  <span className="text-[10px] font-medium text-primary">{user.balance ?? 0}</span>
+                </div>
               </Link>
             ) : (
               <Link
                 href="/settings"
                 onClick={handleNavClick}
-                className="flex items-center gap-3 px-3 py-2 rounded-xl hover:bg-surface/50 transition-all"
+                className="flex items-center gap-2 p-1.5 rounded-lg bg-surface/30 hover:bg-surface/50 border border-border/30 hover:border-border/50 transition-all group"
               >
                 <div className="w-8 h-8 rounded-full bg-accent/20 flex items-center justify-center flex-shrink-0">
                   {user.avatar ? (
                     <img src={user.avatar} alt={user.name} className="w-full h-full rounded-full object-cover" />
                   ) : (
-                    <span className="text-sm font-medium text-accent">
+                    <span className="text-xs font-semibold text-accent">
                       {user.name.charAt(0).toUpperCase()}
                     </span>
                   )}
                 </div>
                 <div className="flex-1 min-w-0">
-                  <div className="text-sm font-medium text-primary truncate">{user.name}</div>
-                  <div className="text-xs text-muted truncate">{user.email}</div>
+                  <div className="flex items-center gap-1">
+                    <span className="text-xs font-medium text-primary truncate">{user.name}</span>
+                    <span className={`text-[9px] font-medium px-1 py-0.5 rounded ${
+                      user.tier === 'business' 
+                        ? 'bg-amber-500/20 text-amber-400' 
+                        : user.tier === 'pro' 
+                        ? 'bg-accent/20 text-accent' 
+                        : 'bg-surface text-muted'
+                    }`}>
+                      {user.tier === 'business' ? 'Biz' : user.tier === 'pro' ? 'Pro' : 'Free'}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-1 mt-0.5">
+                    <Wallet className="w-2.5 h-2.5 text-accent" />
+                    <span className="text-[10px] font-medium text-secondary">{(user.balance ?? 0).toLocaleString('ru-RU')} ₽</span>
+                  </div>
                 </div>
+                <ChevronRightIcon className="w-3.5 h-3.5 text-muted group-hover:text-secondary transition-colors" />
               </Link>
             )}
           </div>
@@ -255,17 +258,17 @@ function NavLink({ href, icon: Icon, label, collapsed, active, onClick }: NavLin
       href={href}
       onClick={onClick}
       className={`
-        flex items-center gap-3 h-11 rounded-xl transition-all duration-150
-        ${collapsed ? 'justify-center px-0' : 'px-3'}
+        flex items-center gap-2 h-9 rounded-lg transition-all duration-150
+        ${collapsed ? 'justify-center px-0' : 'px-2'}
         ${active
           ? 'active-gradient text-primary border-l-gradient ml-0'
           : 'text-secondary hover:text-primary hover:bg-surface/50'
         }
       `}
     >
-      <Icon className={`w-[18px] h-[18px] flex-shrink-0 ${active ? 'text-gradient' : ''}`} />
+      <Icon className={`w-4 h-4 flex-shrink-0 ${active ? 'text-gradient' : ''}`} />
       {!collapsed && (
-        <span className={`text-sm font-medium truncate ${active ? 'text-gradient' : ''}`}>{label}</span>
+        <span className={`text-xs font-medium truncate ${active ? 'text-gradient' : ''}`}>{label}</span>
       )}
     </Link>
   );

backend/webui/src/components/settings/AccountTab.tsx

@@ -0,0 +1,320 @@
+'use client';
+
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { User, Mail, Key, LogOut, Trash2, Camera, Check, X, Loader2 } from 'lucide-react';
+import { useAuth } from '@/lib/contexts/AuthContext';
+import { updateProfile, changePassword, logoutAll, UpdateProfileRequest, ChangePasswordRequest } from '@/lib/auth';
+
+export function AccountTab() {
+  const { user, logout, refreshUser } = useAuth();
+  const [isEditingProfile, setIsEditingProfile] = useState(false);
+  const [isChangingPassword, setIsChangingPassword] = useState(false);
+  const [profileForm, setProfileForm] = useState({ name: user?.name || '' });
+  const [passwordForm, setPasswordForm] = useState({ currentPassword: '', newPassword: '', confirmPassword: '' });
+  const [loading, setLoading] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  const handleProfileSave = async () => {
+    if (!profileForm.name.trim()) {
+      setError('Имя не может быть пустым');
+      return;
+    }
+    setLoading('profile');
+    setError(null);
+    try {
+      await updateProfile({ name: profileForm.name } as UpdateProfileRequest);
+      await refreshUser();
+      setIsEditingProfile(false);
+      setSuccess('Профиль обновлён');
+      setTimeout(() => setSuccess(null), 3000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Ошибка обновления профиля');
+    } finally {
+      setLoading(null);
+    }
+  };
+
+  const handlePasswordChange = async () => {
+    if (passwordForm.newPassword !== passwordForm.confirmPassword) {
+      setError('Пароли не совпадают');
+      return;
+    }
+    if (passwordForm.newPassword.length < 8) {
+      setError('Пароль должен быть минимум 8 символов');
+      return;
+    }
+    setLoading('password');
+    setError(null);
+    try {
+      await changePassword({
+        currentPassword: passwordForm.currentPassword,
+        newPassword: passwordForm.newPassword,
+      } as ChangePasswordRequest);
+      setIsChangingPassword(false);
+      setPasswordForm({ currentPassword: '', newPassword: '', confirmPassword: '' });
+      setSuccess('Пароль изменён');
+      setTimeout(() => setSuccess(null), 3000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Ошибка смены пароля');
+    } finally {
+      setLoading(null);
+    }
+  };
+
+  const handleLogoutAll = async () => {
+    setLoading('logoutAll');
+    try {
+      await logoutAll();
+      window.location.href = '/';
+    } catch {
+      setError('Ошибка выхода');
+    } finally {
+      setLoading(null);
+    }
+  };
+
+  const handleLogout = async () => {
+    setLoading('logout');
+    try {
+      await logout();
+      window.location.href = '/';
+    } catch {
+      setError('Ошибка выхода');
+    } finally {
+      setLoading(null);
+    }
+  };
+
+  if (!user) return null;
+
+  return (
+    <div className="space-y-6">
+      {error && (
+        <motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="p-3 bg-error/10 border border-error/20 rounded-xl text-error text-sm"
+        >
+          {error}
+        </motion.div>
+      )}
+      
+      {success && (
+        <motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="p-3 bg-success/10 border border-success/20 rounded-xl text-success text-sm"
+        >
+          {success}
+        </motion.div>
+      )}
+
+      {/* Profile Section */}
+      <Section title="Профиль" icon={User}>
+        <div className="p-4 bg-elevated/40 border border-border/40 rounded-xl">
+          <div className="flex items-start gap-4">
+            <div className="relative">
+              <div className="w-16 h-16 rounded-full bg-accent/20 flex items-center justify-center">
+                {user.avatar ? (
+                  <img src={user.avatar} alt={user.name} className="w-full h-full rounded-full object-cover" />
+                ) : (
+                  <span className="text-2xl font-semibold text-accent">
+                    {user.name.charAt(0).toUpperCase()}
+                  </span>
+                )}
+              </div>
+              <button className="absolute -bottom-1 -right-1 w-7 h-7 rounded-full bg-surface border border-border flex items-center justify-center hover:bg-surface/80 transition-all">
+                <Camera className="w-3.5 h-3.5 text-muted" />
+              </button>
+            </div>
+            
+            <div className="flex-1 min-w-0">
+              {isEditingProfile ? (
+                <div className="space-y-3">
+                  <input
+                    type="text"
+                    value={profileForm.name}
+                    onChange={(e) => setProfileForm({ ...profileForm, name: e.target.value })}
+                    className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-sm text-primary focus:outline-none focus:border-accent"
+                    placeholder="Ваше имя"
+                  />
+                  <div className="flex gap-2">
+                    <button
+                      onClick={handleProfileSave}
+                      disabled={loading === 'profile'}
+                      className="flex items-center gap-1.5 px-3 py-1.5 bg-accent text-white rounded-lg text-sm hover:bg-accent-hover transition-all disabled:opacity-50"
+                    >
+                      {loading === 'profile' ? <Loader2 className="w-4 h-4 animate-spin" /> : <Check className="w-4 h-4" />}
+                      Сохранить
+                    </button>
+                    <button
+                      onClick={() => { setIsEditingProfile(false); setProfileForm({ name: user.name }); }}
+                      className="flex items-center gap-1.5 px-3 py-1.5 bg-surface border border-border text-secondary rounded-lg text-sm hover:text-primary transition-all"
+                    >
+                      <X className="w-4 h-4" />
+                      Отмена
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  <div className="flex items-center gap-2">
+                    <h3 className="text-lg font-medium text-primary">{user.name}</h3>
+                    <span className={`text-xs font-medium px-2 py-0.5 rounded ${
+                      user.tier === 'business' 
+                        ? 'bg-amber-500/20 text-amber-400' 
+                        : user.tier === 'pro' 
+                        ? 'bg-accent/20 text-accent' 
+                        : 'bg-surface text-muted'
+                    }`}>
+                      {user.tier === 'business' ? 'Business' : user.tier === 'pro' ? 'Pro' : 'Free'}
+                    </span>
+                  </div>
+                  <p className="text-sm text-muted mt-0.5">{user.email}</p>
+                  <button
+                    onClick={() => setIsEditingProfile(true)}
+                    className="mt-2 text-sm text-accent hover:text-accent-hover transition-colors"
+                  >
+                    Редактировать профиль
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      {/* Email Section */}
+      <Section title="Email" icon={Mail}>
+        <div className="p-4 bg-elevated/40 border border-border/40 rounded-xl">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-primary">{user.email}</p>
+              <p className="text-xs text-muted mt-0.5">
+                {user.emailVerified ? (
+                  <span className="text-success">Подтверждён</span>
+                ) : (
+                  <span className="text-warning">Не подтверждён</span>
+                )}
+              </p>
+            </div>
+            {!user.emailVerified && (
+              <button className="px-3 py-1.5 text-sm text-accent hover:text-accent-hover transition-colors">
+                Подтвердить
+              </button>
+            )}
+          </div>
+        </div>
+      </Section>
+
+      {/* Password Section */}
+      <Section title="Безопасность" icon={Key}>
+        <div className="p-4 bg-elevated/40 border border-border/40 rounded-xl">
+          {isChangingPassword ? (
+            <div className="space-y-3">
+              <input
+                type="password"
+                value={passwordForm.currentPassword}
+                onChange={(e) => setPasswordForm({ ...passwordForm, currentPassword: e.target.value })}
+                className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-sm text-primary focus:outline-none focus:border-accent"
+                placeholder="Текущий пароль"
+              />
+              <input
+                type="password"
+                value={passwordForm.newPassword}
+                onChange={(e) => setPasswordForm({ ...passwordForm, newPassword: e.target.value })}
+                className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-sm text-primary focus:outline-none focus:border-accent"
+                placeholder="Новый пароль"
+              />
+              <input
+                type="password"
+                value={passwordForm.confirmPassword}
+                onChange={(e) => setPasswordForm({ ...passwordForm, confirmPassword: e.target.value })}
+                className="w-full px-3 py-2 bg-surface border border-border rounded-lg text-sm text-primary focus:outline-none focus:border-accent"
+                placeholder="Подтвердите пароль"
+              />
+              <div className="flex gap-2">
+                <button
+                  onClick={handlePasswordChange}
+                  disabled={loading === 'password'}
+                  className="flex items-center gap-1.5 px-3 py-1.5 bg-accent text-white rounded-lg text-sm hover:bg-accent-hover transition-all disabled:opacity-50"
+                >
+                  {loading === 'password' ? <Loader2 className="w-4 h-4 animate-spin" /> : <Check className="w-4 h-4" />}
+                  Сохранить
+                </button>
+                <button
+                  onClick={() => { setIsChangingPassword(false); setPasswordForm({ currentPassword: '', newPassword: '', confirmPassword: '' }); }}
+                  className="flex items-center gap-1.5 px-3 py-1.5 bg-surface border border-border text-secondary rounded-lg text-sm hover:text-primary transition-all"
+                >
+                  <X className="w-4 h-4" />
+                  Отмена
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-primary">Пароль</p>
+                <p className="text-xs text-muted mt-0.5">••••••••</p>
+              </div>
+              <button
+                onClick={() => setIsChangingPassword(true)}
+                className="px-3 py-1.5 text-sm text-accent hover:text-accent-hover transition-colors"
+              >
+                Изменить
+              </button>
+            </div>
+          )}
+        </div>
+      </Section>
+
+      {/* Session Section */}
+      <Section title="Сессии" icon={LogOut}>
+        <div className="space-y-3">
+          <button
+            onClick={handleLogout}
+            disabled={loading === 'logout'}
+            className="w-full flex items-center justify-center gap-2 px-4 py-3 text-sm bg-surface/40 border border-border/50 text-secondary rounded-xl hover:bg-surface/60 hover:border-border hover:text-primary transition-all disabled:opacity-50"
+          >
+            {loading === 'logout' ? <Loader2 className="w-4 h-4 animate-spin" /> : <LogOut className="w-4 h-4" />}
+            Выйти из аккаунта
+          </button>
+          <button
+            onClick={handleLogoutAll}
+            disabled={loading === 'logoutAll'}
+            className="w-full flex items-center justify-center gap-2 px-4 py-3 text-sm bg-warning/5 border border-warning/20 text-warning rounded-xl hover:bg-warning/10 hover:border-warning/30 transition-all disabled:opacity-50"
+          >
+            {loading === 'logoutAll' ? <Loader2 className="w-4 h-4 animate-spin" /> : <LogOut className="w-4 h-4" />}
+            Выйти со всех устройств
+          </button>
+        </div>
+      </Section>
+
+      {/* Delete Account */}
+      <Section title="Опасная зона" icon={Trash2}>
+        <button className="w-full flex items-center justify-center gap-2 px-4 py-3 text-sm bg-error/5 border border-error/20 text-error rounded-xl hover:bg-error/10 hover:border-error/30 transition-all">
+          <Trash2 className="w-4 h-4" />
+          Удалить аккаунт
+        </button>
+      </Section>
+    </div>
+  );
+}
+
+function Section({ title, icon: Icon, children }: { title: string; icon: React.ElementType; children: React.ReactNode }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="space-y-3"
+    >
+      <div className="flex items-center gap-2">
+        <Icon className="w-4 h-4 text-muted" />
+        <h2 className="text-xs font-semibold text-muted uppercase tracking-wider">{title}</h2>
+      </div>
+      {children}
+    </motion.div>
+  );
+}

backend/webui/src/components/settings/BillingTab.tsx

@@ -0,0 +1,326 @@
+'use client';
+
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Wallet, CreditCard, Plus, Check, Zap, Crown, Building2, ArrowRight, Receipt, Download, Clock } from 'lucide-react';
+import { useAuth } from '@/lib/contexts/AuthContext';
+
+interface Plan {
+  id: string;
+  name: string;
+  price: number;
+  priceMonthly: number;
+  icon: React.ElementType;
+  color: string;
+  features: string[];
+  limits: {
+    apiRequests: string;
+    llmRequests: string;
+    storage: string;
+  };
+}
+
+const plans: Plan[] = [
+  {
+    id: 'free',
+    name: 'Free',
+    price: 0,
+    priceMonthly: 0,
+    icon: Zap,
+    color: 'text-muted',
+    features: ['Базовый поиск', 'История запросов', 'Ограниченный AI'],
+    limits: {
+      apiRequests: '1,000/день',
+      llmRequests: '50/день',
+      storage: '100 MB',
+    },
+  },
+  {
+    id: 'pro',
+    name: 'Pro',
+    price: 990,
+    priceMonthly: 990,
+    icon: Crown,
+    color: 'text-accent',
+    features: ['Расширенный поиск', 'Приоритетный AI', 'Экспорт данных', 'API доступ'],
+    limits: {
+      apiRequests: '10,000/день',
+      llmRequests: '500/день',
+      storage: '1 GB',
+    },
+  },
+  {
+    id: 'business',
+    name: 'Business',
+    price: 4990,
+    priceMonthly: 4990,
+    icon: Building2,
+    color: 'text-amber-400',
+    features: ['Всё из Pro', 'Безлимитный AI', 'Приоритетная поддержка', 'Команды', 'SLA 99.9%'],
+    limits: {
+      apiRequests: '100,000/день',
+      llmRequests: '5,000/день',
+      storage: '10 GB',
+    },
+  },
+];
+
+const mockTransactions = [
+  { id: '1', date: '2026-02-28', amount: 990, type: 'subscription', description: 'Подписка Pro' },
+  { id: '2', date: '2026-02-15', amount: 500, type: 'topup', description: 'Пополнение баланса' },
+  { id: '3', date: '2026-01-28', amount: 990, type: 'subscription', description: 'Подписка Pro' },
+];
+
+export function BillingTab() {
+  const { user } = useAuth();
+  const [selectedPlan, setSelectedPlan] = useState<string | null>(null);
+  const [showTopup, setShowTopup] = useState(false);
+  const [topupAmount, setTopupAmount] = useState('');
+
+  if (!user) return null;
+
+  const currentPlan = plans.find(p => p.id === user.tier) || plans[0];
+
+  const handleUpgrade = (planId: string) => {
+    setSelectedPlan(planId);
+  };
+
+  const handleTopup = () => {
+    const amount = parseInt(topupAmount, 10);
+    if (isNaN(amount) || amount < 100) return;
+    setShowTopup(false);
+    setTopupAmount('');
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Balance Card */}
+      <Section title="Баланс" icon={Wallet}>
+        <div className="p-4 bg-gradient-to-br from-accent/20 via-accent/10 to-transparent border border-accent/30 rounded-xl">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-muted">Текущий баланс</p>
+              <p className="text-3xl font-bold text-primary mt-1">{(user.balance ?? 0).toLocaleString('ru-RU')} ₽</p>
+            </div>
+            <button
+              onClick={() => setShowTopup(!showTopup)}
+              className="flex items-center gap-2 px-4 py-2.5 bg-accent text-white rounded-xl hover:bg-accent-hover transition-all text-sm font-medium"
+            >
+              <Plus className="w-4 h-4" />
+              Пополнить
+            </button>
+          </div>
+          
+          {showTopup && (
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              className="mt-4 pt-4 border-t border-accent/20"
+            >
+              <div className="flex gap-2 mb-3">
+                {[100, 500, 1000, 5000].map((amount) => (
+                  <button
+                    key={amount}
+                    onClick={() => setTopupAmount(amount.toString())}
+                    className={`flex-1 py-2 rounded-lg text-sm font-medium transition-all ${
+                      topupAmount === amount.toString()
+                        ? 'bg-accent text-white'
+                        : 'bg-surface/50 text-secondary hover:text-primary hover:bg-surface'
+                    }`}
+                  >
+                    {amount} ₽
+                  </button>
+                ))}
+              </div>
+              <div className="flex gap-2">
+                <input
+                  type="number"
+                  value={topupAmount}
+                  onChange={(e) => setTopupAmount(e.target.value)}
+                  placeholder="Сумма"
+                  className="flex-1 px-3 py-2 bg-surface border border-border rounded-lg text-sm text-primary focus:outline-none focus:border-accent"
+                />
+                <button
+                  onClick={handleTopup}
+                  disabled={!topupAmount || parseInt(topupAmount, 10) < 100}
+                  className="px-4 py-2 bg-accent text-white rounded-lg text-sm font-medium hover:bg-accent-hover transition-all disabled:opacity-50"
+                >
+                  Оплатить
+                </button>
+              </div>
+              <p className="text-xs text-muted mt-2">Минимальная сумма: 100 ₽</p>
+            </motion.div>
+          )}
+        </div>
+      </Section>
+
+      {/* Current Plan */}
+      <Section title="Текущий тариф" icon={currentPlan.icon}>
+        <div className="p-4 bg-elevated/40 border border-border/40 rounded-xl">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-3">
+              <div className={`w-10 h-10 rounded-xl bg-surface flex items-center justify-center ${currentPlan.color}`}>
+                <currentPlan.icon className="w-5 h-5" />
+              </div>
+              <div>
+                <h3 className="font-medium text-primary">{currentPlan.name}</h3>
+                <p className="text-sm text-muted">
+                  {currentPlan.price === 0 ? 'Бесплатно' : `${currentPlan.price.toLocaleString('ru-RU')} ₽/мес`}
+                </p>
+              </div>
+            </div>
+            {user.tier !== 'business' && (
+              <button
+                onClick={() => handleUpgrade(user.tier === 'free' ? 'pro' : 'business')}
+                className="flex items-center gap-1.5 px-3 py-1.5 bg-accent/10 text-accent rounded-lg text-sm font-medium hover:bg-accent/20 transition-all"
+              >
+                Улучшить
+                <ArrowRight className="w-4 h-4" />
+              </button>
+            )}
+          </div>
+          <div className="grid grid-cols-3 gap-3">
+            <div className="p-3 bg-surface/30 rounded-lg">
+              <p className="text-xs text-muted">API запросы</p>
+              <p className="text-sm font-medium text-primary mt-0.5">{currentPlan.limits.apiRequests}</p>
+            </div>
+            <div className="p-3 bg-surface/30 rounded-lg">
+              <p className="text-xs text-muted">AI запросы</p>
+              <p className="text-sm font-medium text-primary mt-0.5">{currentPlan.limits.llmRequests}</p>
+            </div>
+            <div className="p-3 bg-surface/30 rounded-lg">
+              <p className="text-xs text-muted">Хранилище</p>
+              <p className="text-sm font-medium text-primary mt-0.5">{currentPlan.limits.storage}</p>
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      {/* Plans Comparison */}
+      {selectedPlan && (
+        <Section title="Выбор тарифа" icon={Crown}>
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+            {plans.map((plan) => (
+              <motion.div
+                key={plan.id}
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                className={`p-4 rounded-xl border transition-all cursor-pointer ${
+                  selectedPlan === plan.id
+                    ? 'bg-accent/10 border-accent'
+                    : 'bg-elevated/40 border-border/40 hover:border-border'
+                } ${user.tier === plan.id ? 'ring-2 ring-accent/50' : ''}`}
+                onClick={() => setSelectedPlan(plan.id)}
+              >
+                <div className="flex items-center gap-2 mb-3">
+                  <plan.icon className={`w-5 h-5 ${plan.color}`} />
+                  <span className="font-medium text-primary">{plan.name}</span>
+                  {user.tier === plan.id && (
+                    <span className="text-xs bg-accent/20 text-accent px-1.5 py-0.5 rounded">Текущий</span>
+                  )}
+                </div>
+                <p className="text-2xl font-bold text-primary mb-3">
+                  {plan.price === 0 ? 'Бесплатно' : `${plan.price.toLocaleString('ru-RU')} ₽`}
+                  {plan.price > 0 && <span className="text-sm font-normal text-muted">/мес</span>}
+                </p>
+                <ul className="space-y-2">
+                  {plan.features.map((feature, idx) => (
+                    <li key={idx} className="flex items-center gap-2 text-sm text-secondary">
+                      <Check className="w-4 h-4 text-accent flex-shrink-0" />
+                      {feature}
+                    </li>
+                  ))}
+                </ul>
+                {user.tier !== plan.id && plan.id !== 'free' && (
+                  <button
+                    onClick={(e) => { e.stopPropagation(); handleUpgrade(plan.id); }}
+                    className="w-full mt-4 py-2 bg-accent text-white rounded-lg text-sm font-medium hover:bg-accent-hover transition-all"
+                  >
+                    {plans.findIndex(p => p.id === user.tier) < plans.findIndex(p => p.id === plan.id) ? 'Улучшить' : 'Выбрать'}
+                  </button>
+                )}
+              </motion.div>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {/* Payment Methods */}
+      <Section title="Способы оплаты" icon={CreditCard}>
+        <div className="p-4 bg-elevated/40 border border-border/40 rounded-xl">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-xl bg-surface flex items-center justify-center">
+                <CreditCard className="w-5 h-5 text-muted" />
+              </div>
+              <p className="text-sm text-muted">Карты не добавлены</p>
+            </div>
+            <button className="flex items-center gap-1.5 px-3 py-1.5 bg-surface border border-border text-secondary rounded-lg text-sm hover:text-primary hover:border-border/80 transition-all">
+              <Plus className="w-4 h-4" />
+              Добавить
+            </button>
+          </div>
+        </div>
+      </Section>
+
+      {/* Transaction History */}
+      <Section title="История платежей" icon={Receipt}>
+        <div className="space-y-2">
+          {mockTransactions.length === 0 ? (
+            <div className="p-4 bg-elevated/40 border border-border/40 rounded-xl text-center">
+              <Clock className="w-8 h-8 text-muted mx-auto mb-2" />
+              <p className="text-sm text-muted">История платежей пуста</p>
+            </div>
+          ) : (
+            mockTransactions.map((tx) => (
+              <div
+                key={tx.id}
+                className="flex items-center justify-between p-3 bg-elevated/40 border border-border/40 rounded-xl"
+              >
+                <div className="flex items-center gap-3">
+                  <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                    tx.type === 'topup' ? 'bg-success/10' : 'bg-accent/10'
+                  }`}>
+                    {tx.type === 'topup' ? (
+                      <Plus className="w-4 h-4 text-success" />
+                    ) : (
+                      <Receipt className="w-4 h-4 text-accent" />
+                    )}
+                  </div>
+                  <div>
+                    <p className="text-sm text-primary">{tx.description}</p>
+                    <p className="text-xs text-muted">{new Date(tx.date).toLocaleDateString('ru-RU')}</p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-3">
+                  <span className={`text-sm font-medium ${tx.type === 'topup' ? 'text-success' : 'text-primary'}`}>
+                    {tx.type === 'topup' ? '+' : '-'}{tx.amount.toLocaleString('ru-RU')} ₽
+                  </span>
+                  <button className="p-1.5 text-muted hover:text-secondary transition-colors">
+                    <Download className="w-4 h-4" />
+                  </button>
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </Section>
+    </div>
+  );
+}
+
+function Section({ title, icon: Icon, children }: { title: string; icon: React.ElementType; children: React.ReactNode }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="space-y-3"
+    >
+      <div className="flex items-center gap-2">
+        <Icon className="w-4 h-4 text-muted" />
+        <h2 className="text-xs font-semibold text-muted uppercase tracking-wider">{title}</h2>
+      </div>
+      {children}
+    </motion.div>
+  );
+}

backend/webui/src/components/settings/PreferencesTab.tsx

@@ -0,0 +1,199 @@
+'use client';
+
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Shield, Zap, Scale, Sparkles, Download, Trash2, Bell, Eye, Languages, Plug, ChevronDown } from 'lucide-react';
+import * as Switch from '@radix-ui/react-switch';
+import { useLanguage, SupportedLanguage } from '@/lib/contexts/LanguageContext';
+import { ConnectorsSettings } from '@/components/settings/ConnectorsSettings';
+
+export function PreferencesTab() {
+  const [mode, setMode] = useState('balanced');
+  const [saveHistory, setSaveHistory] = useState(true);
+  const [personalization, setPersonalization] = useState(true);
+  const [notifications, setNotifications] = useState(false);
+  const [showConnectors, setShowConnectors] = useState(false);
+  const { language, setLanguage } = useLanguage();
+
+  return (
+    <div className="space-y-6">
+      {/* Default Mode */}
+      <Section title="Режим по умолчанию" icon={Zap}>
+        <div className="grid grid-cols-3 gap-2 sm:gap-3">
+          {[
+            { id: 'speed', label: 'Быстрый', icon: Zap, desc: '~10 сек' },
+            { id: 'balanced', label: 'Баланс', icon: Scale, desc: '~30 сек' },
+            { id: 'quality', label: 'Качество', icon: Sparkles, desc: '~60 сек' },
+          ].map((m) => (
+            <button
+              key={m.id}
+              onClick={() => setMode(m.id)}
+              className={`flex flex-col items-center gap-1 sm:gap-2 p-3 sm:p-4 rounded-xl border transition-all ${
+                mode === m.id
+                  ? 'active-gradient text-primary'
+                  : 'bg-surface/30 border-border/30 text-muted hover:border-border hover:text-secondary'
+              }`}
+            >
+              <m.icon className={`w-4 h-4 sm:w-5 sm:h-5 ${mode === m.id ? 'text-gradient' : ''}`} />
+              <span className="text-xs sm:text-sm font-medium">{m.label}</span>
+              <span className="text-[10px] sm:text-xs text-faint">{m.desc}</span>
+            </button>
+          ))}
+        </div>
+      </Section>
+
+      {/* Privacy & Data */}
+      <Section title="Приватность" icon={Shield}>
+        <div className="space-y-3">
+          <ToggleRow
+            icon={Eye}
+            label="Сохранять историю"
+            description="Автоматическое сохранение сессий"
+            checked={saveHistory}
+            onChange={setSaveHistory}
+          />
+          <ToggleRow
+            icon={Sparkles}
+            label="Персонализация"
+            description="Улучшение на основе истории"
+            checked={personalization}
+            onChange={setPersonalization}
+          />
+          <ToggleRow
+            icon={Bell}
+            label="Уведомления"
+            description="Уведомления об обновлениях"
+            checked={notifications}
+            onChange={setNotifications}
+          />
+        </div>
+      </Section>
+
+      {/* Language */}
+      <Section title="Язык интерфейса" icon={Languages}>
+        <div className="grid grid-cols-2 gap-2 sm:gap-3">
+          {[
+            { id: 'ru', label: 'Русский', flag: '🇷🇺' },
+            { id: 'en', label: 'English', flag: '🇺🇸' },
+          ].map((lang) => (
+            <button
+              key={lang.id}
+              onClick={() => setLanguage(lang.id as SupportedLanguage)}
+              className={`flex items-center gap-3 p-3 sm:p-4 rounded-xl border transition-all ${
+                language === lang.id
+                  ? 'active-gradient text-primary'
+                  : 'bg-surface/30 border-border/30 text-muted hover:border-border hover:text-secondary'
+              }`}
+            >
+              <span className="text-lg">{lang.flag}</span>
+              <span className="text-sm font-medium">{lang.label}</span>
+            </button>
+          ))}
+        </div>
+      </Section>
+
+      {/* Connectors */}
+      <Section title="Коннекторы" icon={Plug}>
+        <div className="space-y-3">
+          <p className="text-xs text-muted">
+            Подключите источники данных и каналы уведомлений для автономных задач в Лаптопе.
+          </p>
+          <button
+            onClick={() => setShowConnectors(!showConnectors)}
+            className="w-full flex items-center justify-between p-3 sm:p-4 bg-elevated/40 border border-border/40 rounded-xl hover:bg-elevated/60 hover:border-border transition-all"
+          >
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center">
+                <Plug className="w-5 h-5 text-indigo-400" />
+              </div>
+              <div className="text-left">
+                <p className="text-sm font-medium text-primary">Настроить коннекторы</p>
+                <p className="text-xs text-muted">Поиск, данные, финансы, уведомления</p>
+              </div>
+            </div>
+            <ChevronDown className={`w-5 h-5 text-muted transition-transform ${showConnectors ? 'rotate-180' : ''}`} />
+          </button>
+          
+          {showConnectors && (
+            <motion.div
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              className="pt-2"
+            >
+              <ConnectorsSettings />
+            </motion.div>
+          )}
+        </div>
+      </Section>
+
+      {/* Data Management */}
+      <Section title="Управление данными" icon={Download}>
+        <div className="flex flex-col sm:flex-row gap-3">
+          <button className="flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm bg-surface/40 border border-border/50 text-secondary rounded-xl hover:bg-surface/60 hover:border-border hover:text-primary transition-all">
+            <Download className="w-4 h-4" />
+            Экспорт данных
+          </button>
+          <button className="flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm bg-error/5 border border-error/20 text-error rounded-xl hover:bg-error/10 hover:border-error/30 transition-all">
+            <Trash2 className="w-4 h-4" />
+            Удалить всё
+          </button>
+        </div>
+      </Section>
+
+      {/* About */}
+      <div className="pt-6 border-t border-border/30">
+        <div className="text-center text-faint text-xs">
+          <p className="mb-1">GooSeek v1.0.0</p>
+          <p>AI-поиск нового поколения</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function Section({ title, icon: Icon, children }: { title: string; icon: React.ElementType; children: React.ReactNode }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 8 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="space-y-3 sm:space-y-4"
+    >
+      <div className="flex items-center gap-2">
+        <Icon className="w-4 h-4 text-muted" />
+        <h2 className="text-xs font-semibold text-muted uppercase tracking-wider">
+          {title}
+        </h2>
+      </div>
+      {children}
+    </motion.div>
+  );
+}
+
+interface ToggleRowProps {
+  icon: React.ElementType;
+  label: string;
+  description: string;
+  checked: boolean;
+  onChange: (v: boolean) => void;
+}
+
+function ToggleRow({ icon: Icon, label, description, checked, onChange }: ToggleRowProps) {
+  return (
+    <div className="flex items-center gap-3 sm:gap-4 p-3 sm:p-4 bg-elevated/40 border border-border/40 rounded-xl">
+      <div className="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-surface/60 flex items-center justify-center flex-shrink-0">
+        <Icon className="w-4 h-4 text-secondary" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <p className="text-sm text-primary truncate">{label}</p>
+        <p className="text-xs text-muted mt-0.5 truncate">{description}</p>
+      </div>
+      <Switch.Root
+        checked={checked}
+        onCheckedChange={onChange}
+        className="w-10 h-[22px] sm:w-11 sm:h-6 bg-surface/80 rounded-full relative transition-colors data-[state=checked]:active-gradient border border-border flex-shrink-0"
+      >
+        <Switch.Thumb className="block w-[18px] h-[18px] sm:w-5 sm:h-5 bg-secondary rounded-full transition-transform translate-x-0.5 data-[state=checked]:translate-x-[18px] sm:data-[state=checked]:translate-x-[22px] data-[state=checked]:progress-gradient" />
+      </Switch.Root>
+    </div>
+  );
+}

backend/webui/src/components/settings/index.ts

@@ -0,0 +1,4 @@
+export { AccountTab } from './AccountTab';
+export { BillingTab } from './BillingTab';
+export { PreferencesTab } from './PreferencesTab';
+export { ConnectorsSettings } from './ConnectorsSettings';