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/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>
+  );
+}