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/app/(main)/layout.tsx

@@ -60,11 +60,11 @@ export default function MainLayout({ children }: { children: React.ReactNode })
               className="fixed inset-0 z-40 bg-base/80 backdrop-blur-sm"
             />
             <motion.div
-              initial={{ x: -280 }}
+              initial={{ x: -240 }}
               animate={{ x: 0 }}
-              exit={{ x: -280 }}
+              exit={{ x: -240 }}
               transition={{ type: 'spring', damping: 25, stiffness: 300 }}
-              className="fixed left-0 top-0 bottom-0 z-50 w-[280px]"
+              className="fixed left-0 top-0 bottom-0 z-50 w-[240px]"
             >
               <Sidebar onClose={() => setSidebarOpen(false)} />
             </motion.div>

backend/webui/src/app/(main)/settings/page.tsx

@@ -1,209 +1,124 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
 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';
+import { User, CreditCard, Settings, LogIn } from 'lucide-react';
+import { useAuth } from '@/lib/contexts/AuthContext';
+import { AccountTab } from '@/components/settings/AccountTab';
+import { BillingTab } from '@/components/settings/BillingTab';
+import { PreferencesTab } from '@/components/settings/PreferencesTab';
+
+type TabId = 'account' | 'billing' | 'preferences';
+
+interface Tab {
+  id: TabId;
+  label: string;
+  icon: React.ElementType;
+  requiresAuth: boolean;
+}
+
+const tabs: Tab[] = [
+  { id: 'account', label: 'Аккаунт', icon: User, requiresAuth: true },
+  { id: 'billing', label: 'Оплата', icon: CreditCard, requiresAuth: true },
+  { id: 'preferences', label: 'Настройки', icon: Settings, requiresAuth: false },
+];
 
 export default function SettingsPage() {
-  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();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const { user, isAuthenticated, isLoading, showAuthModal } = useAuth();
+  
+  const tabParam = searchParams.get('tab') as TabId | null;
+  const [activeTab, setActiveTab] = useState<TabId>(tabParam && tabs.some(t => t.id === tabParam) ? tabParam : 'preferences');
+
+  useEffect(() => {
+    if (tabParam && tabs.some(t => t.id === tabParam)) {
+      setActiveTab(tabParam);
+    }
+  }, [tabParam]);
+
+  const handleTabChange = (tabId: TabId) => {
+    const tab = tabs.find(t => t.id === tabId);
+    if (tab?.requiresAuth && !isAuthenticated) {
+      showAuthModal('login');
+      return;
+    }
+    setActiveTab(tabId);
+    router.push(`/settings?tab=${tabId}`, { scroll: false });
+  };
+
+  const currentTab = tabs.find(t => t.id === activeTab);
+  const showAuthPrompt = currentTab?.requiresAuth && !isAuthenticated && !isLoading;
 
   return (
     <div className="h-full overflow-y-auto">
-      <div className="max-w-xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
+      <div className="max-w-2xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
         {/* Header */}
-        <div className="mb-6 sm:mb-8">
-          <h1 className="text-xl sm:text-2xl font-semibold text-primary mb-1 sm:mb-2">Настройки</h1>
-          <p className="text-sm text-secondary">Персонализируйте ваш опыт</p>
+        <div className="mb-6">
+          <h1 className="text-xl sm:text-2xl font-semibold text-primary mb-1">
+            {activeTab === 'account' ? 'Аккаунт' : activeTab === 'billing' ? 'Оплата' : 'Настройки'}
+          </h1>
+          <p className="text-sm text-secondary">
+            {activeTab === 'account' 
+              ? 'Управление профилем и безопасностью' 
+              : activeTab === 'billing' 
+              ? 'Баланс, тарифы и история платежей' 
+              : 'Персонализируйте ваш опыт'}
+          </p>
         </div>
 
-        <div className="space-y-6 sm:space-y-8">
-          {/* 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>
+        {/* Tabs */}
+        <div className="flex gap-1 p-1 bg-surface/30 border border-border/30 rounded-xl mb-6">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => handleTabChange(tab.id)}
+              className={`flex-1 flex items-center justify-center gap-2 py-2.5 px-3 rounded-lg text-sm font-medium transition-all ${
+                activeTab === tab.id
+                  ? 'bg-base text-primary shadow-sm'
+                  : 'text-muted hover:text-secondary'
+              }`}
+            >
+              <tab.icon className="w-4 h-4" />
+              <span className="hidden sm:inline">{tab.label}</span>
+            </button>
+          ))}
+        </div>
 
-          {/* 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">
-                Подключите источники данных и каналы уведомлений для автономных задач в Лаптопе.
+        {/* Content */}
+        <motion.div
+          key={activeTab}
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.2 }}
+        >
+          {showAuthPrompt ? (
+            <div className="flex flex-col items-center justify-center py-16">
+              <div className="w-16 h-16 rounded-full bg-accent/10 flex items-center justify-center mb-4">
+                <LogIn className="w-8 h-8 text-accent" />
+              </div>
+              <h2 className="text-lg font-medium text-primary mb-2">Требуется авторизация</h2>
+              <p className="text-sm text-muted text-center mb-6 max-w-sm">
+                Войдите в аккаунт, чтобы получить доступ к {activeTab === 'account' ? 'настройкам профиля' : 'платежам и балансу'}
               </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"
+                onClick={() => showAuthModal('login')}
+                className="flex items-center gap-2 px-6 py-2.5 bg-accent text-white rounded-xl hover:bg-accent-hover transition-all text-sm font-medium"
               >
-                <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" />
-                Удалить всё
+                <LogIn 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>
+          ) : (
+            <>
+              {activeTab === 'account' && <AccountTab />}
+              {activeTab === 'billing' && <BillingTab />}
+              {activeTab === 'preferences' && <PreferencesTab />}
+            </>
+          )}
+        </motion.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/app/(main)/spaces/[id]/page.tsx

@@ -0,0 +1,466 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+  ArrowLeft,
+  FolderOpen,
+  Plus,
+  Users,
+  MessageSquare,
+  Settings,
+  UserPlus,
+  Loader2,
+  Clock,
+  MoreHorizontal,
+  Trash2,
+  Crown,
+  Shield,
+  User,
+  Copy,
+  Check,
+  X,
+  Send,
+} from 'lucide-react';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import * as Dialog from '@radix-ui/react-dialog';
+import { fetchSpace, fetchSpaceMembers, fetchSpaceThreads, inviteToSpace, removeSpaceMember } from '@/lib/api';
+import type { Space, SpaceMember, Thread } from '@/lib/types';
+import { useAuth } from '@/lib/contexts/AuthContext';
+
+function formatDate(dateStr: string): string {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diff = now.getTime() - date.getTime();
+  const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+  
+  if (days === 0) return 'Сегодня';
+  if (days === 1) return 'Вчера';
+  if (days < 7) return `${days} дн. назад`;
+  
+  return date.toLocaleDateString('ru-RU', { day: 'numeric', month: 'short' });
+}
+
+function getRoleIcon(role: string) {
+  switch (role) {
+    case 'owner': return Crown;
+    case 'admin': return Shield;
+    default: return User;
+  }
+}
+
+function getRoleLabel(role: string) {
+  switch (role) {
+    case 'owner': return 'Владелец';
+    case 'admin': return 'Админ';
+    default: return 'Участник';
+  }
+}
+
+export default function SpaceDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const { user } = useAuth();
+  const spaceId = params.id as string;
+
+  const [space, setSpace] = useState<Space | null>(null);
+  const [members, setMembers] = useState<SpaceMember[]>([]);
+  const [threads, setThreads] = useState<Thread[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [activeTab, setActiveTab] = useState<'threads' | 'members'>('threads');
+  const [showInviteModal, setShowInviteModal] = useState(false);
+  const [inviteEmail, setInviteEmail] = useState('');
+  const [inviteLoading, setInviteLoading] = useState(false);
+  const [inviteError, setInviteError] = useState('');
+  const [inviteSuccess, setInviteSuccess] = useState('');
+
+  const isOwner = space?.userId === user?.id;
+  const currentMember = members.find(m => m.userId === user?.id);
+  const isAdmin = isOwner || currentMember?.role === 'admin';
+
+  const loadData = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const [spaceData, membersData, threadsData] = await Promise.all([
+        fetchSpace(spaceId),
+        fetchSpaceMembers(spaceId),
+        fetchSpaceThreads(spaceId),
+      ]);
+      setSpace(spaceData);
+      setMembers(membersData);
+      setThreads(threadsData);
+    } catch (err) {
+      console.error('Failed to load space:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [spaceId]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData]);
+
+  const handleInvite = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!inviteEmail.trim() || inviteLoading) return;
+
+    setInviteLoading(true);
+    setInviteError('');
+    setInviteSuccess('');
+
+    try {
+      await inviteToSpace(spaceId, inviteEmail.trim());
+      setInviteSuccess(`Приглашение отправлено на ${inviteEmail}`);
+      setInviteEmail('');
+      setTimeout(() => setShowInviteModal(false), 2000);
+    } catch (err) {
+      setInviteError(err instanceof Error ? err.message : 'Не удалось отправить приглашение');
+    } finally {
+      setInviteLoading(false);
+    }
+  };
+
+  const handleRemoveMember = async (memberId: string, userId: string) => {
+    if (!confirm('Удалить участника из пространства?')) return;
+
+    try {
+      await removeSpaceMember(spaceId, userId);
+      setMembers(prev => prev.filter(m => m.id !== memberId));
+    } catch (err) {
+      console.error('Failed to remove member:', err);
+    }
+  };
+
+  const startNewThread = () => {
+    router.push(`/?space=${spaceId}`);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-[60vh]">
+        <Loader2 className="w-8 h-8 animate-spin loader-gradient" />
+        <p className="text-sm text-muted mt-4">Загрузка пространства...</p>
+      </div>
+    );
+  }
+
+  if (!space) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-[60vh]">
+        <FolderOpen className="w-12 h-12 text-muted mb-4" />
+        <h2 className="text-xl font-semibold text-primary mb-2">Пространство не найдено</h2>
+        <p className="text-secondary mb-6">Возможно, оно было удалено или у вас нет доступа</p>
+        <Link href="/spaces" className="btn-gradient px-5 py-2.5">
+          <span className="btn-gradient-text">К списку пространств</span>
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full overflow-y-auto">
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
+        {/* Header */}
+        <div className="flex items-start gap-4 mb-8">
+          <Link
+            href="/spaces"
+            className="w-10 h-10 flex items-center justify-center rounded-xl text-secondary hover:text-primary hover:bg-surface/50 transition-all flex-shrink-0"
+          >
+            <ArrowLeft className="w-5 h-5" />
+          </Link>
+          
+          <div className="flex-1 min-w-0">
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <h1 className="text-2xl sm:text-3xl font-bold text-primary mb-2">{space.name}</h1>
+                {space.description && (
+                  <p className="text-secondary">{space.description}</p>
+                )}
+              </div>
+              
+              <div className="flex items-center gap-2 flex-shrink-0">
+                {isAdmin && (
+                  <button
+                    onClick={() => setShowInviteModal(true)}
+                    className="flex items-center gap-2 px-4 py-2.5 text-sm btn-gradient"
+                  >
+                    <UserPlus className="w-4 h-4 btn-gradient-text" />
+                    <span className="btn-gradient-text hidden sm:inline">Пригласить</span>
+                  </button>
+                )}
+                <Link
+                  href={`/spaces/${spaceId}/edit`}
+                  className="p-2.5 rounded-xl text-secondary hover:text-primary hover:bg-surface/50 transition-all"
+                >
+                  <Settings className="w-5 h-5" />
+                </Link>
+              </div>
+            </div>
+
+            {/* Stats */}
+            <div className="flex items-center gap-6 mt-4">
+              <div className="flex items-center gap-2 text-sm text-muted">
+                <Users className="w-4 h-4" />
+                <span>{members.length} участник{members.length === 1 ? '' : members.length < 5 ? 'а' : 'ов'}</span>
+              </div>
+              <div className="flex items-center gap-2 text-sm text-muted">
+                <MessageSquare className="w-4 h-4" />
+                <span>{threads.length} тред{threads.length === 1 ? '' : threads.length < 5 ? 'а' : 'ов'}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex items-center gap-1 p-1 bg-surface/40 rounded-xl mb-6 w-fit">
+          <button
+            onClick={() => setActiveTab('threads')}
+            className={`px-4 py-2 text-sm font-medium rounded-lg transition-all ${
+              activeTab === 'threads'
+                ? 'bg-accent/20 text-accent'
+                : 'text-secondary hover:text-primary'
+            }`}
+          >
+            <span className="flex items-center gap-2">
+              <MessageSquare className="w-4 h-4" />
+              Треды
+            </span>
+          </button>
+          <button
+            onClick={() => setActiveTab('members')}
+            className={`px-4 py-2 text-sm font-medium rounded-lg transition-all ${
+              activeTab === 'members'
+                ? 'bg-accent/20 text-accent'
+                : 'text-secondary hover:text-primary'
+            }`}
+          >
+            <span className="flex items-center gap-2">
+              <Users className="w-4 h-4" />
+              Участники
+            </span>
+          </button>
+        </div>
+
+        {/* Content */}
+        <AnimatePresence mode="wait">
+          {activeTab === 'threads' ? (
+            <motion.div
+              key="threads"
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+            >
+              {/* New Thread Button */}
+              <button
+                onClick={startNewThread}
+                className="w-full p-4 mb-4 border-2 border-dashed border-border/50 rounded-xl text-secondary hover:text-primary hover:border-accent/30 hover:bg-accent/5 transition-all flex items-center justify-center gap-2"
+              >
+                <Plus className="w-5 h-5" />
+                <span>Начать новый тред</span>
+              </button>
+
+              {/* Threads List */}
+              {threads.length > 0 ? (
+                <div className="space-y-3">
+                  {threads.map((thread, i) => (
+                    <motion.div
+                      key={thread.id}
+                      initial={{ opacity: 0, y: 8 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ delay: i * 0.03 }}
+                    >
+                      <Link
+                        href={`/thread/${thread.id}`}
+                        className="block p-4 bg-elevated/40 border border-border/40 rounded-xl hover:bg-elevated/60 hover:border-border transition-all group"
+                      >
+                        <h3 className="font-medium text-primary group-hover:text-gradient transition-colors line-clamp-1 mb-2">
+                          {thread.title || 'Без названия'}
+                        </h3>
+                        <div className="flex items-center gap-4 text-xs text-muted">
+                          <span className="flex items-center gap-1.5">
+                            <Clock className="w-3.5 h-3.5" />
+                            {formatDate(thread.updatedAt)}
+                          </span>
+                          <span>{thread.messages?.length || 0} сообщений</span>
+                        </div>
+                      </Link>
+                    </motion.div>
+                  ))}
+                </div>
+              ) : (
+                <div className="text-center py-12">
+                  <MessageSquare className="w-12 h-12 mx-auto mb-4 text-muted" />
+                  <p className="text-secondary mb-2">Пока нет тредов</p>
+                  <p className="text-sm text-muted">Начните новый тред для обсуждения</p>
+                </div>
+              )}
+            </motion.div>
+          ) : (
+            <motion.div
+              key="members"
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+            >
+              {/* Members List */}
+              <div className="space-y-2">
+                {members.map((member, i) => {
+                  const RoleIcon = getRoleIcon(member.role);
+                  const canRemove = isAdmin && member.userId !== user?.id && member.role !== 'owner';
+                  
+                  return (
+                    <motion.div
+                      key={member.id}
+                      initial={{ opacity: 0, y: 8 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ delay: i * 0.03 }}
+                      className="flex items-center gap-4 p-4 bg-elevated/40 border border-border/40 rounded-xl"
+                    >
+                      <div className="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center flex-shrink-0">
+                        {member.avatar ? (
+                          <img src={member.avatar} alt="" className="w-full h-full rounded-full object-cover" />
+                        ) : (
+                          <span className="text-sm font-semibold text-accent">
+                            {(member.name || member.email || '?').charAt(0).toUpperCase()}
+                          </span>
+                        )}
+                      </div>
+                      
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <span className="font-medium text-primary truncate">
+                            {member.name || member.email}
+                          </span>
+                          <span className={`flex items-center gap-1 text-xs px-2 py-0.5 rounded-full ${
+                            member.role === 'owner' 
+                              ? 'bg-amber-500/20 text-amber-400'
+                              : member.role === 'admin'
+                              ? 'bg-accent/20 text-accent'
+                              : 'bg-surface text-muted'
+                          }`}>
+                            <RoleIcon className="w-3 h-3" />
+                            {getRoleLabel(member.role)}
+                          </span>
+                        </div>
+                        {member.email && member.name && (
+                          <p className="text-sm text-muted truncate">{member.email}</p>
+                        )}
+                      </div>
+
+                      {canRemove && (
+                        <DropdownMenu.Root>
+                          <DropdownMenu.Trigger asChild>
+                            <button className="p-2 hover:bg-surface/60 rounded-lg transition-all">
+                              <MoreHorizontal className="w-4 h-4 text-secondary" />
+                            </button>
+                          </DropdownMenu.Trigger>
+                          <DropdownMenu.Portal>
+                            <DropdownMenu.Content
+                              className="min-w-[140px] bg-surface/95 backdrop-blur-xl border border-border rounded-xl p-1.5 shadow-dropdown z-50"
+                              sideOffset={5}
+                            >
+                              <DropdownMenu.Item
+                                onClick={() => handleRemoveMember(member.id, member.userId)}
+                                className="flex items-center gap-2 px-3 py-2.5 text-sm text-error rounded-lg cursor-pointer hover:bg-error/10 outline-none transition-colors"
+                              >
+                                <Trash2 className="w-4 h-4" />
+                                Удалить
+                              </DropdownMenu.Item>
+                            </DropdownMenu.Content>
+                          </DropdownMenu.Portal>
+                        </DropdownMenu.Root>
+                      )}
+                    </motion.div>
+                  );
+                })}
+              </div>
+
+              {/* Invite Button */}
+              {isAdmin && (
+                <button
+                  onClick={() => setShowInviteModal(true)}
+                  className="w-full mt-4 p-4 border-2 border-dashed border-border/50 rounded-xl text-secondary hover:text-primary hover:border-accent/30 hover:bg-accent/5 transition-all flex items-center justify-center gap-2"
+                >
+                  <UserPlus className="w-5 h-5" />
+                  <span>Пригласить участника</span>
+                </button>
+              )}
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        {/* Invite Modal */}
+        <Dialog.Root open={showInviteModal} onOpenChange={setShowInviteModal}>
+          <Dialog.Portal>
+            <Dialog.Overlay className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50" />
+            <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md bg-elevated border border-border rounded-2xl p-6 z-50 shadow-2xl">
+              <div className="flex items-center justify-between mb-6">
+                <Dialog.Title className="text-lg font-semibold text-primary">
+                  Пригласить участника
+                </Dialog.Title>
+                <Dialog.Close className="p-2 text-muted hover:text-secondary rounded-lg hover:bg-surface/50 transition-colors">
+                  <X className="w-5 h-5" />
+                </Dialog.Close>
+              </div>
+
+              <form onSubmit={handleInvite}>
+                <p className="text-sm text-secondary mb-4">
+                  Введите email пользователя, которого хотите пригласить в пространство
+                </p>
+
+                {inviteError && (
+                  <div className="mb-4 p-3 bg-error/10 border border-error/30 rounded-xl text-sm text-error">
+                    {inviteError}
+                  </div>
+                )}
+
+                {inviteSuccess && (
+                  <div className="mb-4 p-3 bg-success/10 border border-success/30 rounded-xl text-sm text-success flex items-center gap-2">
+                    <Check className="w-4 h-4" />
+                    {inviteSuccess}
+                  </div>
+                )}
+
+                <div className="relative mb-6">
+                  <input
+                    type="email"
+                    value={inviteEmail}
+                    onChange={(e) => setInviteEmail(e.target.value)}
+                    placeholder="email@example.com"
+                    className="w-full px-4 py-3 bg-surface/50 border border-border rounded-xl text-primary placeholder:text-muted focus:outline-none input-gradient transition-colors"
+                    autoFocus
+                  />
+                </div>
+
+                <div className="flex gap-3">
+                  <Dialog.Close asChild>
+                    <button
+                      type="button"
+                      className="flex-1 px-4 py-3 text-sm text-secondary hover:text-primary bg-surface/40 border border-border/50 rounded-xl transition-all"
+                    >
+                      Отмена
+                    </button>
+                  </Dialog.Close>
+                  <button
+                    type="submit"
+                    disabled={!inviteEmail.trim() || inviteLoading}
+                    className="flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm btn-gradient disabled:opacity-50"
+                  >
+                    {inviteLoading ? (
+                      <Loader2 className="w-4 h-4 animate-spin btn-gradient-text" />
+                    ) : (
+                      <Send className="w-4 h-4 btn-gradient-text" />
+                    )}
+                    <span className="btn-gradient-text">Отправить</span>
+                  </button>
+                </div>
+              </form>
+            </Dialog.Content>
+          </Dialog.Portal>
+        </Dialog.Root>
+      </div>
+    </div>
+  );
+}

backend/webui/src/app/(main)/spaces/new/page.tsx

@@ -3,19 +3,28 @@
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
-import { ArrowLeft, Loader2, Globe, BookOpen, Code2, Newspaper, TrendingUp, Youtube } from 'lucide-react';
+import { motion } from 'framer-motion';
+import {
+  ArrowLeft,
+  Loader2,
+  Globe,
+  Lock,
+  FolderOpen,
+  Palette,
+} from 'lucide-react';
 import { createSpace } from '@/lib/api';
-import type { FocusMode } from '@/lib/types';
 
-const focusModes: { value: FocusMode; label: string; icon: React.ElementType }[] = [
-  { value: 'all', label: 'Все источники', icon: Globe },
-  { value: 'academic', label: 'Академический', icon: BookOpen },
-  { value: 'code', label: 'Код', icon: Code2 },
-  { value: 'news', label: 'Новости', icon: Newspaper },
-  { value: 'finance', label: 'Финансы', icon: TrendingUp },
-  { value: 'youtube', label: 'YouTube', icon: Youtube },
+const spaceColors = [
+  { id: 'violet', class: 'bg-violet-500', label: 'Фиолетовый' },
+  { id: 'blue', class: 'bg-blue-500', label: 'Синий' },
+  { id: 'emerald', class: 'bg-emerald-500', label: 'Изумрудный' },
+  { id: 'orange', class: 'bg-orange-500', label: 'Оранжевый' },
+  { id: 'pink', class: 'bg-pink-500', label: 'Розовый' },
+  { id: 'indigo', class: 'bg-indigo-500', label: 'Индиго' },
 ];
 
+const spaceIcons = ['📁', '🔬', '💡', '📊', '🎯', '🚀', '💼', '📚'];
+
 export default function NewSpacePage() {
   const router = useRouter();
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -25,7 +34,9 @@ export default function NewSpacePage() {
     name: '',
     description: '',
     instructions: '',
-    focusMode: 'all' as FocusMode,
+    icon: '📁',
+    color: 'violet',
+    isPublic: false,
   });
 
   const handleCreate = async (e: React.FormEvent) => {
@@ -36,13 +47,12 @@ export default function NewSpacePage() {
     setError(null);
 
     try {
-      await createSpace({
+      const space = await createSpace({
         name: formData.name.trim(),
         description: formData.description.trim() || undefined,
         instructions: formData.instructions.trim() || undefined,
-        focusMode: formData.focusMode,
       });
-      router.push('/spaces');
+      router.push(`/spaces/${space.id}`);
     } catch (err) {
       console.error('Failed to create space:', err);
       setError('Не удалось создать пространство. Попробуйте позже.');
@@ -53,9 +63,9 @@ export default function NewSpacePage() {
 
   return (
     <div className="h-full overflow-y-auto">
-      <div className="max-w-lg mx-auto px-4 sm:px-6 py-6 sm:py-8">
+      <div className="max-w-xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
         {/* Header */}
-        <div className="flex items-center gap-4 mb-6 sm:mb-8">
+        <div className="flex items-center gap-4 mb-8">
           <Link
             href="/spaces"
             className="w-10 h-10 flex items-center justify-center rounded-xl text-secondary hover:text-primary hover:bg-surface/50 transition-all"
@@ -63,19 +73,53 @@ export default function NewSpacePage() {
             <ArrowLeft className="w-5 h-5" />
           </Link>
           <div>
-            <h1 className="text-xl sm:text-2xl font-semibold text-primary">Новое пространство</h1>
-            <p className="text-sm text-secondary mt-0.5 hidden sm:block">Организуйте исследования по темам</p>
+            <h1 className="text-2xl font-bold text-primary">Новое пространство</h1>
+            <p className="text-sm text-secondary mt-0.5">Создайте место для исследований и коллаборации</p>
           </div>
         </div>
 
         {error && (
-          <div className="mb-6 p-4 bg-error/10 border border-error/30 rounded-xl text-sm text-error">
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="mb-6 p-4 bg-error/10 border border-error/30 rounded-xl text-sm text-error"
+          >
             {error}
-          </div>
+          </motion.div>
         )}
 
         {/* Form */}
-        <form onSubmit={handleCreate} className="space-y-5">
+        <form onSubmit={handleCreate} className="space-y-6">
+          {/* Preview Card */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            className={`
+              p-6 rounded-2xl border bg-gradient-to-br
+              ${formData.color === 'violet' ? 'from-violet-500/20 to-purple-500/20 border-violet-500/30' : ''}
+              ${formData.color === 'blue' ? 'from-blue-500/20 to-cyan-500/20 border-blue-500/30' : ''}
+              ${formData.color === 'emerald' ? 'from-emerald-500/20 to-teal-500/20 border-emerald-500/30' : ''}
+              ${formData.color === 'orange' ? 'from-orange-500/20 to-amber-500/20 border-orange-500/30' : ''}
+              ${formData.color === 'pink' ? 'from-pink-500/20 to-rose-500/20 border-pink-500/30' : ''}
+              ${formData.color === 'indigo' ? 'from-indigo-500/20 to-blue-500/20 border-indigo-500/30' : ''}
+            `}
+          >
+            <div className="flex items-center gap-4">
+              <div className="w-14 h-14 rounded-xl bg-white/10 backdrop-blur-sm flex items-center justify-center text-2xl">
+                {formData.icon}
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold text-primary">
+                  {formData.name || 'Название пространства'}
+                </h3>
+                <p className="text-sm text-secondary">
+                  {formData.description || 'Описание пространства'}
+                </p>
+              </div>
+            </div>
+          </motion.div>
+
+          {/* Name */}
           <div>
             <label className="block text-sm font-medium text-secondary mb-2">
               Название <span className="text-error">*</span>
@@ -83,12 +127,13 @@ export default function NewSpacePage() {
             <input
               value={formData.name}
               onChange={(e) => setFormData((f) => ({ ...f, name: e.target.value }))}
-              placeholder="Например: Исследование рынка"
-              className="w-full px-4 py-3 text-sm bg-elevated/60 border border-border rounded-xl text-primary placeholder:text-muted focus:outline-none input-gradient transition-colors"
+              placeholder="Например: Исследование рынка AI"
+              className="w-full px-4 py-3.5 text-sm bg-elevated/60 border border-border rounded-xl text-primary placeholder:text-muted focus:outline-none input-gradient transition-colors"
               autoFocus
             />
           </div>
 
+          {/* Description */}
           <div>
             <label className="block text-sm font-medium text-secondary mb-2">
               Описание
@@ -96,12 +141,58 @@ export default function NewSpacePage() {
             <textarea
               value={formData.description}
               onChange={(e) => setFormData((f) => ({ ...f, description: e.target.value }))}
-              placeholder="Краткое описание пространства"
-              rows={2}
-              className="w-full px-4 py-3 text-sm bg-elevated/60 border border-border rounded-xl text-primary placeholder:text-muted resize-none focus:outline-none input-gradient transition-colors"
+              placeholder="О чём это пространство? Какие цели преследует?"
+              rows={3}
+              className="w-full px-4 py-3.5 text-sm bg-elevated/60 border border-border rounded-xl text-primary placeholder:text-muted resize-none focus:outline-none input-gradient transition-colors"
             />
           </div>
 
+          {/* Icon Selector */}
+          <div>
+            <label className="block text-sm font-medium text-secondary mb-3">
+              Иконка
+            </label>
+            <div className="flex flex-wrap gap-2">
+              {spaceIcons.map((icon) => (
+                <button
+                  key={icon}
+                  type="button"
+                  onClick={() => setFormData((f) => ({ ...f, icon }))}
+                  className={`w-10 h-10 rounded-xl text-lg flex items-center justify-center transition-all ${
+                    formData.icon === icon
+                      ? 'bg-accent/20 ring-2 ring-accent'
+                      : 'bg-surface/40 hover:bg-surface/60'
+                  }`}
+                >
+                  {icon}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Color Selector */}
+          <div>
+            <label className="block text-sm font-medium text-secondary mb-3">
+              Цвет
+            </label>
+            <div className="flex flex-wrap gap-2">
+              {spaceColors.map((color) => (
+                <button
+                  key={color.id}
+                  type="button"
+                  onClick={() => setFormData((f) => ({ ...f, color: color.id }))}
+                  className={`w-10 h-10 rounded-xl ${color.class} transition-all ${
+                    formData.color === color.id
+                      ? 'ring-2 ring-white ring-offset-2 ring-offset-base'
+                      : 'opacity-60 hover:opacity-100'
+                  }`}
+                  title={color.label}
+                />
+              ))}
+            </div>
+          </div>
+
+          {/* AI Instructions */}
           <div>
             <label className="block text-sm font-medium text-secondary mb-2">
               AI инструкции
@@ -109,32 +200,48 @@ export default function NewSpacePage() {
             <textarea
               value={formData.instructions}
               onChange={(e) => setFormData((f) => ({ ...f, instructions: e.target.value }))}
-              placeholder="Специальные инструкции для AI в этом пространстве"
+              placeholder="Дополнительные инструкции для AI при работе в этом пространстве"
               rows={3}
-              className="w-full px-4 py-3 text-sm bg-elevated/60 border border-border rounded-xl text-primary placeholder:text-muted resize-none focus:outline-none input-gradient transition-colors"
+              className="w-full px-4 py-3.5 text-sm bg-elevated/60 border border-border rounded-xl text-primary placeholder:text-muted resize-none focus:outline-none input-gradient transition-colors"
             />
+            <p className="text-xs text-muted mt-2">
+              AI будет учитывать эти инструкции при генерации ответов в тредах этого пространства
+            </p>
           </div>
 
-          <div>
-            <label className="block text-sm font-medium text-secondary mb-3">
-              Режим фокуса
-            </label>
-            <div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
-              {focusModes.map((mode) => (
-                <button
-                  key={mode.value}
-                  type="button"
-                  onClick={() => setFormData((f) => ({ ...f, focusMode: mode.value }))}
-                  className={`flex flex-col items-center gap-2 p-3 rounded-xl border transition-all ${
-                    formData.focusMode === mode.value
-                      ? 'active-gradient text-primary'
-                      : 'bg-elevated/40 border-border/50 text-muted hover:border-border hover:text-secondary'
+          {/* Privacy */}
+          <div className="p-4 bg-elevated/40 border border-border/50 rounded-xl">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-3">
+                {formData.isPublic ? (
+                  <Globe className="w-5 h-5 text-accent" />
+                ) : (
+                  <Lock className="w-5 h-5 text-muted" />
+                )}
+                <div>
+                  <h4 className="text-sm font-medium text-primary">
+                    {formData.isPublic ? 'Публичное' : 'Приватное'}
+                  </h4>
+                  <p className="text-xs text-muted">
+                    {formData.isPublic
+                      ? 'Все могут найти и присоединиться'
+                      : 'Только по приглашению'}
+                  </p>
+                </div>
+              </div>
+              <button
+                type="button"
+                onClick={() => setFormData((f) => ({ ...f, isPublic: !f.isPublic }))}
+                className={`w-12 h-7 rounded-full transition-colors relative ${
+                  formData.isPublic ? 'bg-accent' : 'bg-surface'
+                }`}
+              >
+                <span
+                  className={`absolute top-1 w-5 h-5 rounded-full bg-white shadow transition-transform ${
+                    formData.isPublic ? 'translate-x-6' : 'translate-x-1'
                   }`}
-                >
-                  <mode.icon className={`w-4 h-4 ${formData.focusMode === mode.value ? 'text-gradient' : ''}`} />
-                  <span className="text-xs text-center">{mode.label}</span>
-                </button>
-              ))}
+                />
+              </button>
             </div>
           </div>
 
@@ -142,17 +249,21 @@ export default function NewSpacePage() {
           <div className="flex flex-col-reverse sm:flex-row gap-3 pt-4">
             <Link
               href="/spaces"
-              className="flex-1 px-4 py-3 text-sm text-center text-secondary hover:text-primary bg-surface/40 border border-border/50 rounded-xl transition-all"
+              className="flex-1 px-4 py-3.5 text-sm text-center text-secondary hover:text-primary bg-surface/40 border border-border/50 rounded-xl transition-all"
             >
               Отмена
             </Link>
             <button
               type="submit"
               disabled={!formData.name.trim() || isSubmitting}
-              className="flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm btn-gradient disabled:opacity-50"
+              className="flex-1 flex items-center justify-center gap-2 px-4 py-3.5 text-sm btn-gradient disabled:opacity-50"
             >
-              {isSubmitting && <Loader2 className="w-4 h-4 animate-spin btn-gradient-text" />}
-              <span className="btn-gradient-text">Создать пространство</span>
+              {isSubmitting ? (
+                <Loader2 className="w-4 h-4 animate-spin btn-gradient-text" />
+              ) : (
+                <FolderOpen className="w-4 h-4 btn-gradient-text" />
+              )}
+              <span className="btn-gradient-text font-medium">Создать пространство</span>
             </button>
           </div>
         </form>

backend/webui/src/app/(main)/spaces/page.tsx

@@ -4,27 +4,50 @@ import { useState, useEffect, useCallback, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { motion } from 'framer-motion';
-import { FolderOpen, Plus, MoreHorizontal, Search, Trash2, Loader2, Settings, RefreshCw, Globe, BookOpen, Code2, TrendingUp, Newspaper, Youtube } from 'lucide-react';
+import {
+  FolderOpen,
+  Plus,
+  Search,
+  Loader2,
+  Users,
+  MessageSquare,
+  Lock,
+  Globe,
+  MoreHorizontal,
+  Trash2,
+  Settings,
+  UserPlus,
+} from 'lucide-react';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import { fetchSpaces, deleteSpace } from '@/lib/api';
-import type { Space, FocusMode } from '@/lib/types';
+import type { Space } from '@/lib/types';
+import { useAuth } from '@/lib/contexts/AuthContext';
 
-const focusModes: { value: FocusMode; label: string; icon: React.ElementType }[] = [
-  { value: 'all', label: 'Все источники', icon: Globe },
-  { value: 'academic', label: 'Академический', icon: BookOpen },
-  { value: 'code', label: 'Код', icon: Code2 },
-  { value: 'news', label: 'Новости', icon: Newspaper },
-  { value: 'finance', label: 'Финансы', icon: TrendingUp },
-  { value: 'youtube', label: 'YouTube', icon: Youtube },
+const spaceColors = [
+  'from-violet-500/20 to-purple-500/20 border-violet-500/30',
+  'from-blue-500/20 to-cyan-500/20 border-blue-500/30',
+  'from-emerald-500/20 to-teal-500/20 border-emerald-500/30',
+  'from-orange-500/20 to-amber-500/20 border-orange-500/30',
+  'from-pink-500/20 to-rose-500/20 border-pink-500/30',
+  'from-indigo-500/20 to-blue-500/20 border-indigo-500/30',
 ];
 
+function getSpaceColor(index: number): string {
+  return spaceColors[index % spaceColors.length];
+}
+
 export default function SpacesPage() {
   const router = useRouter();
+  const { user, isAuthenticated, showAuthModal } = useAuth();
   const [spaces, setSpaces] = useState<Space[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [search, setSearch] = useState('');
 
   const load = useCallback(async () => {
+    if (!isAuthenticated) {
+      setIsLoading(false);
+      return;
+    }
     setIsLoading(true);
     try {
       const data = await fetchSpaces();
@@ -35,14 +58,15 @@ export default function SpacesPage() {
     } finally {
       setIsLoading(false);
     }
-  }, []);
+  }, [isAuthenticated]);
 
   useEffect(() => {
     load();
   }, [load]);
 
-  const handleDelete = async (id: string) => {
-    if (!confirm('Удалить пространство? Все связанные треды останутся в истории.')) return;
+  const handleDelete = async (e: React.MouseEvent, id: string) => {
+    e.stopPropagation();
+    if (!confirm('Удалить пространство? Все связанные треды будут удалены.')) return;
 
     try {
       await deleteSpace(id);
@@ -60,143 +84,204 @@ export default function SpacesPage() {
     );
   }, [spaces, search]);
 
-  const openSpace = (id: string) => {
-    router.push(`/?space=${id}`);
-  };
-
-  const getFocusModeIcon = (mode: FocusMode) => {
-    const found = focusModes.find((m) => m.value === mode);
-    return found?.icon || Globe;
-  };
+  if (!isAuthenticated) {
+    return (
+      <div className="h-full overflow-y-auto">
+        <div className="flex flex-col items-center justify-center min-h-[60vh] px-4">
+          <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-accent/20 to-accent/5 flex items-center justify-center mb-6">
+            <FolderOpen className="w-8 h-8 text-accent" />
+          </div>
+          <h1 className="text-2xl font-semibold text-primary mb-2">Пространства</h1>
+          <p className="text-secondary text-center max-w-md mb-6">
+            Создавайте пространства для организации исследований и совместной работы с командой
+          </p>
+          <button
+            onClick={() => showAuthModal('login')}
+            className="btn-gradient px-6 py-3"
+          >
+            <span className="btn-gradient-text">Войти для доступа</span>
+          </button>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className="h-full overflow-y-auto">
-      <div className="max-w-2xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 py-6 sm:py-8">
         {/* Header */}
-        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6 sm:mb-8">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
           <div>
-            <h1 className="text-xl sm:text-2xl font-semibold text-primary mb-1 sm:mb-2">Пространства</h1>
-            <p className="text-sm text-secondary">Организуйте исследования по темам</p>
-          </div>
-          <div className="flex items-center gap-2">
-            <button
-              onClick={load}
-              disabled={isLoading}
-              className="flex items-center gap-2 px-3 py-2.5 text-sm text-secondary hover:text-primary bg-surface/40 border border-border/50 hover-gradient rounded-xl transition-all"
-            >
-              <RefreshCw className={`w-4 h-4 ${isLoading ? 'animate-spin' : ''}`} />
-            </button>
-            <Link
-              href="/spaces/new"
-              className="flex items-center gap-2 px-4 py-2.5 text-sm btn-gradient"
-            >
-              <Plus className="w-4 h-4 btn-gradient-text" />
-              <span className="hidden sm:inline btn-gradient-text">Создать</span>
-            </Link>
+            <h1 className="text-2xl sm:text-3xl font-bold text-primary mb-1">Пространства</h1>
+            <p className="text-secondary">Организуйте исследования и работайте вместе с командой</p>
           </div>
+          <Link
+            href="/spaces/new"
+            className="flex items-center gap-2 px-5 py-2.5 btn-gradient"
+          >
+            <Plus className="w-4 h-4 btn-gradient-text" />
+            <span className="btn-gradient-text font-medium">Создать</span>
+          </Link>
         </div>
 
         {/* Search */}
-        <div className="relative mb-6">
-          <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-muted" />
+        <div className="relative mb-8">
+          <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted" />
           <input
             value={search}
             onChange={(e) => setSearch(e.target.value)}
             placeholder="Поиск пространств..."
-            className="w-full pl-11 pr-4 py-3 text-sm bg-elevated/40 border border-border/50 rounded-xl text-primary placeholder:text-muted focus:outline-none input-gradient transition-colors"
+            className="w-full pl-12 pr-4 py-3.5 text-sm bg-elevated/40 border border-border/50 rounded-xl text-primary placeholder:text-muted focus:outline-none input-gradient transition-colors"
           />
         </div>
 
         {/* Content */}
         {isLoading ? (
-          <div className="flex flex-col items-center justify-center py-16 sm:py-20">
+          <div className="flex flex-col items-center justify-center py-20">
             <Loader2 className="w-8 h-8 animate-spin loader-gradient" />
             <p className="text-sm text-muted mt-4">Загрузка пространств...</p>
           </div>
         ) : filtered.length > 0 ? (
-          <div className="grid gap-3">
-            {filtered.map((space, i) => {
-              const FocusIcon = getFocusModeIcon(space.focusMode || 'all');
-              return (
-                <motion.div
-                  key={space.id}
-                  initial={{ opacity: 0, y: 8 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ delay: i * 0.05 }}
-                  onClick={() => openSpace(space.id)}
-                  className="group flex items-center gap-3 sm:gap-4 p-3 sm:p-4 bg-elevated/40 border border-border/40 rounded-xl hover:bg-elevated/60 hover-gradient cursor-pointer transition-all duration-200"
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {filtered.map((space, i) => (
+              <motion.div
+                key={space.id}
+                initial={{ opacity: 0, y: 12 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: i * 0.05 }}
+              >
+                <Link
+                  href={`/spaces/${space.id}`}
+                  className={`
+                    group block p-5 rounded-2xl border bg-gradient-to-br
+                    ${getSpaceColor(i)}
+                    hover:scale-[1.02] transition-all duration-200
+                  `}
                 >
-                  <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl icon-gradient flex items-center justify-center flex-shrink-0">
-                    <FolderOpen className="w-4 h-4 sm:w-5 sm:h-5 text-gradient" />
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <h3 className="text-sm font-medium text-primary group-hover:text-gradient transition-colors truncate">
-                      {space.name}
-                    </h3>
-                    <div className="flex items-center gap-2 mt-1">
-                      <FocusIcon className="w-3 h-3 text-muted flex-shrink-0" />
-                      <span className="text-xs text-muted truncate">
-                        {space.description || focusModes.find((m) => m.value === space.focusMode)?.label || 'Все источники'}
-                      </span>
+                  {/* Header */}
+                  <div className="flex items-start justify-between mb-4">
+                    <div className="w-12 h-12 rounded-xl bg-white/10 backdrop-blur-sm flex items-center justify-center">
+                      <FolderOpen className="w-6 h-6 text-primary" />
+                    </div>
+                    <div className="flex items-center gap-1">
+                      {space.isPublic ? (
+                        <Globe className="w-4 h-4 text-muted" />
+                      ) : (
+                        <Lock className="w-4 h-4 text-muted" />
+                      )}
+                      <DropdownMenu.Root>
+                        <DropdownMenu.Trigger asChild>
+                          <button
+                            onClick={(e) => e.preventDefault()}
+                            className="p-1.5 hover:bg-white/10 rounded-lg transition-colors opacity-0 group-hover:opacity-100"
+                          >
+                            <MoreHorizontal className="w-4 h-4 text-secondary" />
+                          </button>
+                        </DropdownMenu.Trigger>
+                        <DropdownMenu.Portal>
+                          <DropdownMenu.Content
+                            className="min-w-[160px] bg-surface/95 backdrop-blur-xl border border-border rounded-xl p-1.5 shadow-dropdown z-50"
+                            sideOffset={5}
+                          >
+                            <DropdownMenu.Item asChild>
+                              <Link
+                                href={`/spaces/${space.id}/edit`}
+                                className="flex items-center gap-2 px-3 py-2.5 text-sm text-secondary rounded-lg cursor-pointer hover:bg-elevated/80 hover:text-primary outline-none transition-colors"
+                              >
+                                <Settings className="w-4 h-4" />
+                                Настройки
+                              </Link>
+                            </DropdownMenu.Item>
+                            {space.userId === user?.id && (
+                              <DropdownMenu.Item
+                                onClick={(e) => handleDelete(e as unknown as React.MouseEvent, space.id)}
+                                className="flex items-center gap-2 px-3 py-2.5 text-sm text-error rounded-lg cursor-pointer hover:bg-error/10 outline-none transition-colors"
+                              >
+                                <Trash2 className="w-4 h-4" />
+                                Удалить
+                              </DropdownMenu.Item>
+                            )}
+                          </DropdownMenu.Content>
+                        </DropdownMenu.Portal>
+                      </DropdownMenu.Root>
                     </div>
                   </div>
-                  <DropdownMenu.Root>
-                    <DropdownMenu.Trigger asChild>
-                      <button
-                        onClick={(e) => e.stopPropagation()}
-                        className="p-2 hover:bg-surface/60 rounded-lg transition-all sm:opacity-0 sm:group-hover:opacity-100"
-                      >
-                        <MoreHorizontal className="w-4 h-4 text-secondary" />
-                      </button>
-                    </DropdownMenu.Trigger>
-                    <DropdownMenu.Portal>
-                      <DropdownMenu.Content
-                        className="min-w-[160px] bg-surface/95 backdrop-blur-xl border border-border rounded-xl p-1.5 shadow-dropdown z-50"
-                        sideOffset={5}
-                      >
-                        <DropdownMenu.Item asChild>
-                          <Link
-                            href={`/spaces/${space.id}/edit`}
-                            onClick={(e) => e.stopPropagation()}
-                            className="flex items-center gap-2 px-3 py-2.5 text-sm text-secondary rounded-lg cursor-pointer hover:bg-elevated/80 hover:text-primary outline-none transition-colors"
+
+                  {/* Title & Description */}
+                  <h3 className="text-lg font-semibold text-primary mb-1 group-hover:text-gradient transition-colors">
+                    {space.name}
+                  </h3>
+                  <p className="text-sm text-secondary line-clamp-2 mb-4 min-h-[40px]">
+                    {space.description || 'Без описания'}
+                  </p>
+
+                  {/* Stats */}
+                  <div className="flex items-center gap-4 text-xs text-muted">
+                    <div className="flex items-center gap-1.5">
+                      <Users className="w-3.5 h-3.5" />
+                      <span>{space.memberCount || 1}</span>
+                    </div>
+                    <div className="flex items-center gap-1.5">
+                      <MessageSquare className="w-3.5 h-3.5" />
+                      <span>{space.threadCount || 0} тредов</span>
+                    </div>
+                  </div>
+
+                  {/* Members avatars */}
+                  {space.members && space.members.length > 0 && (
+                    <div className="flex items-center gap-1 mt-4 pt-4 border-t border-white/10">
+                      <div className="flex -space-x-2">
+                        {space.members.slice(0, 4).map((member, idx) => (
+                          <div
+                            key={member.id}
+                            className="w-7 h-7 rounded-full bg-surface border-2 border-base flex items-center justify-center"
+                            title={member.name || member.email}
                           >
-                            <Settings className="w-4 h-4" />
-                            Редактировать
-                          </Link>
-                        </DropdownMenu.Item>
-                        <DropdownMenu.Item
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            handleDelete(space.id);
-                          }}
-                          className="flex items-center gap-2 px-3 py-2.5 text-sm text-error rounded-lg cursor-pointer hover:bg-error/10 outline-none transition-colors"
-                        >
-                          <Trash2 className="w-4 h-4" />
-                          Удалить
-                        </DropdownMenu.Item>
-                      </DropdownMenu.Content>
-                    </DropdownMenu.Portal>
-                  </DropdownMenu.Root>
-                </motion.div>
-              );
-            })}
+                            {member.avatar ? (
+                              <img src={member.avatar} alt="" className="w-full h-full rounded-full object-cover" />
+                            ) : (
+                              <span className="text-[10px] font-medium text-secondary">
+                                {(member.name || member.email || '?').charAt(0).toUpperCase()}
+                              </span>
+                            )}
+                          </div>
+                        ))}
+                        {(space.memberCount || 0) > 4 && (
+                          <div className="w-7 h-7 rounded-full bg-surface border-2 border-base flex items-center justify-center">
+                            <span className="text-[10px] font-medium text-muted">
+                              +{(space.memberCount || 0) - 4}
+                            </span>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </Link>
+              </motion.div>
+            ))}
           </div>
         ) : (
-          <div className="text-center py-16 sm:py-20">
-            <FolderOpen className="w-12 h-12 mx-auto mb-4 text-muted" />
-            <p className="text-secondary mb-1">
+          <div className="text-center py-20">
+            <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-accent/20 to-accent/5 flex items-center justify-center mx-auto mb-6">
+              <FolderOpen className="w-10 h-10 text-accent" />
+            </div>
+            <h2 className="text-xl font-semibold text-primary mb-2">
               {search ? 'Ничего не найдено' : 'Нет пространств'}
+            </h2>
+            <p className="text-secondary mb-8 max-w-md mx-auto">
+              {search
+                ? 'Попробуйте изменить поисковый запрос'
+                : 'Создайте первое пространство для организации ваших исследований и совместной работы'}
             </p>
-            <p className="text-sm text-muted mb-6">
-              Создайте пространство для организации исследований
-            </p>
-            <Link
-              href="/spaces/new"
-              className="inline-flex items-center gap-2 px-4 py-2.5 text-sm btn-gradient"
-            >
-              <Plus className="w-4 h-4 btn-gradient-text" />
-              <span className="btn-gradient-text">Создать пространство</span>
-            </Link>
+            {!search && (
+              <Link
+                href="/spaces/new"
+                className="inline-flex items-center gap-2 px-6 py-3 btn-gradient"
+              >
+                <Plus className="w-5 h-5 btn-gradient-text" />
+                <span className="btn-gradient-text font-medium">Создать пространство</span>
+              </Link>
+            )}
           </div>
         )}
       </div>