feat: onboarding + topic bank UI + channel limit handling

/onboarding: 3-шаговый вайзард (платформа → название/ниша → готово)
login/page.js: новый пользователь → /onboarding, существующий → /
TopicBank.js: просмотр/пополнение/добавление/удаление тем
ChannelEdit AI-стиль: TopicBank компонент внизу вкладки
channels/new: при 402 CHANNEL_LIMIT_REACHED → ошибка + redirect /plans
lib/engine.js: ENGINE_URL дефолт 3040 → 3030
API routes: /api/topics-bank/[channelId]/{refill,add}, /item/[id]

app/api/auth/login/route.js

@@ -25,7 +25,17 @@ export async function POST(req) {
     s.email = user.email;
     s.isAdmin = !!user.is_admin;
     await s.save();
-    return NextResponse.json({ ok: true, user });
+
+    // Инициализируем баланс нового пользователя (Free план, 50 кредитов)
+    try {
+      const ENGINE_URL    = process.env.ENGINE_URL    || 'http://127.0.0.1:3030';
+      const ENGINE_SECRET = process.env.ENGINE_SECRET || '';
+      await fetch(`${ENGINE_URL}/api/billing/balance`, {
+        headers: { 'x-internal-secret': ENGINE_SECRET, 'x-user-id': String(user.id) },
+      });
+    } catch {}
+
+    return NextResponse.json({ ok: true, user, isNew: true });
   }
 
   // login

app/api/channels/route.js

@@ -21,6 +21,7 @@ export async function POST(req) {
     const channel = await engine.createChannel(user.id, body);
     return NextResponse.json(channel);
   } catch (err) {
-    return NextResponse.json({ error: err.message }, { status: 500 });
+    const status = err.status === 402 ? 402 : 500;
+    return NextResponse.json({ error: err.message, code: err.code }, { status });
   }
 }

app/api/topics-bank/[channelId]/add/route.js

@@ -0,0 +1,17 @@
+import { NextResponse } from 'next/server';
+import { requireUser } from '@/lib/session';
+
+const ENGINE_URL    = process.env.ENGINE_URL    || 'http://localhost:3030';
+const ENGINE_SECRET = process.env.ENGINE_SECRET || '';
+
+export async function POST(req, { params }) {
+  const user = await requireUser();
+  if (!user) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  const body = await req.json();
+  const res = await fetch(`${ENGINE_URL}/api/generate/topics-bank/${params.channelId}/add`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', 'x-internal-secret': ENGINE_SECRET },
+    body: JSON.stringify(body),
+  });
+  return NextResponse.json(await res.json());
+}

app/api/topics-bank/[channelId]/refill/route.js

@@ -0,0 +1,14 @@
+import { NextResponse } from 'next/server';
+import { requireUser } from '@/lib/session';
+
+const ENGINE_URL    = process.env.ENGINE_URL    || 'http://localhost:3030';
+const ENGINE_SECRET = process.env.ENGINE_SECRET || '';
+
+export async function POST(req, { params }) {
+  const user = await requireUser();
+  if (!user) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  const res = await fetch(`${ENGINE_URL}/api/generate/topics-bank/${params.channelId}/refill`, {
+    method: 'POST', headers: { 'x-internal-secret': ENGINE_SECRET },
+  });
+  return NextResponse.json(await res.json());
+}

app/api/topics-bank/[channelId]/route.js

@@ -0,0 +1,14 @@
+import { NextResponse } from 'next/server';
+import { requireUser } from '@/lib/session';
+
+const ENGINE_URL    = process.env.ENGINE_URL    || 'http://localhost:3030';
+const ENGINE_SECRET = process.env.ENGINE_SECRET || '';
+const h = { 'x-internal-secret': ENGINE_SECRET };
+
+export async function GET(req, { params }) {
+  const user = await requireUser();
+  if (!user) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  const { searchParams } = new URL(req.url);
+  const res = await fetch(`${ENGINE_URL}/api/generate/topics-bank/${params.channelId}?${searchParams}`, { headers: h });
+  return NextResponse.json(await res.json());
+}

app/api/topics-bank/item/[id]/route.js

@@ -0,0 +1,14 @@
+import { NextResponse } from 'next/server';
+import { requireUser } from '@/lib/session';
+
+const ENGINE_URL    = process.env.ENGINE_URL    || 'http://localhost:3030';
+const ENGINE_SECRET = process.env.ENGINE_SECRET || '';
+
+export async function DELETE(req, { params }) {
+  const user = await requireUser();
+  if (!user) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  const res = await fetch(`${ENGINE_URL}/api/generate/topics-bank/item/${params.id}`, {
+    method: 'DELETE', headers: { 'x-internal-secret': ENGINE_SECRET },
+  });
+  return NextResponse.json(await res.json());
+}

app/channels/new/page.js

@@ -89,7 +89,16 @@ export default function NewChannelPage() {
     });
     const json = await res.json();
     setBusy(false);
-    if (!res.ok) { setError(json.error || 'Ошибка'); return; }
+    if (!res.ok) {
+      if (json.code === 'CHANNEL_LIMIT_REACHED') {
+        setError(`${json.error} → `);
+        // Перенаправим на страницу тарифов через 2 сек
+        setTimeout(() => router.push('/plans'), 2000);
+      } else {
+        setError(json.error || 'Ошибка');
+      }
+      return;
+    }
     router.push(`/channels/${json.id}`);
   }
 

app/login/page.js

@@ -27,7 +27,8 @@ export default function LoginPage() {
       setError(data.error || 'Ошибка');
       return;
     }
-    router.push('/');
+    // Новый пользователь → онбординг, существующий → главная
+    router.push(data.isNew ? '/onboarding' : '/');
   }
 
   return (

app/onboarding/page.js

@@ -0,0 +1,178 @@
+'use client';
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Sparkles, CheckCircle, ArrowRight, Loader2, Bot, Hash, Zap } from 'lucide-react';
+
+const PLATFORMS = [
+  { v: 'telegram', label: 'Telegram', icon: '✈️', desc: 'Канал или группа' },
+  { v: 'vk',       label: 'ВКонтакте', icon: '🔵', desc: 'Группа или паблик' },
+  { v: 'max',      label: 'MAX',       icon: '🟣', desc: 'Мессенджер MAX' },
+];
+
+const NICHES = [
+  'Технологии и ИИ', 'Бизнес и финансы', 'Маркетинг и SMM',
+  'Здоровье и спорт', 'Образование', 'Развлечения', 'Новости',
+  'Другое',
+];
+
+export default function OnboardingPage() {
+  const router = useRouter();
+  const [step,     setStep]     = useState(1);
+  const [platform, setPlatform] = useState('telegram');
+  const [name,     setName]     = useState('');
+  const [niche,    setNiche]    = useState('');
+  const [busy,     setBusy]     = useState(false);
+  const [error,    setError]    = useState('');
+  const [done,     setDone]     = useState(false);
+  const [channel,  setChannel]  = useState(null);
+
+  async function createChannel() {
+    if (!name.trim()) { setError('Введите название канала'); return; }
+    setBusy(true);
+    setError('');
+    try {
+      const res = await fetch('/api/channels', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: name.trim(), platform, niche }),
+      }).then(r => r.json());
+
+      if (res.error) { setError(res.error); setBusy(false); return; }
+      setChannel(res);
+      setDone(true);
+      setStep(3);
+    } catch { setError('Ошибка соединения'); }
+    setBusy(false);
+  }
+
+  return (
+    <main className="min-h-screen flex items-center justify-center p-4">
+      <div className="w-full max-w-xl">
+        {/* Progress */}
+        <div className="flex items-center justify-center gap-2 mb-8">
+          {[1,2,3].map(n => (
+            <div key={n} className="flex items-center gap-2">
+              <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold transition-colors ${
+                step > n ? 'bg-green-500 text-white' :
+                step === n ? 'bg-accent text-white' :
+                'bg-surface2 text-gray-500'
+              }`}>
+                {step > n ? <CheckCircle className="w-4 h-4" /> : n}
+              </div>
+              {n < 3 && <div className={`w-12 h-0.5 ${step > n ? 'bg-green-500' : 'bg-surface2'}`} />}
+            </div>
+          ))}
+        </div>
+
+        <div className="card p-6 sm:p-8">
+          {/* Шаг 1 — платформа */}
+          {step === 1 && (
+            <>
+              <div className="text-center mb-6">
+                <div className="text-3xl mb-2">👋</div>
+                <h1 className="text-xl font-bold">Добро пожаловать!</h1>
+                <p className="text-gray-400 text-sm mt-1">Создадим первый канал за пару минут</p>
+              </div>
+              <p className="text-sm font-medium mb-3">Выберите платформу:</p>
+              <div className="grid grid-cols-3 gap-3 mb-6">
+                {PLATFORMS.map(p => (
+                  <button key={p.v} onClick={() => setPlatform(p.v)}
+                    className={`p-4 rounded-xl border-2 text-center transition-all ${
+                      platform === p.v ? 'border-accent bg-accent/10' : 'border-border hover:border-accent/40'
+                    }`}>
+                    <div className="text-2xl mb-1">{p.icon}</div>
+                    <div className="text-sm font-medium">{p.label}</div>
+                    <div className="text-xs text-gray-500 mt-0.5">{p.desc}</div>
+                  </button>
+                ))}
+              </div>
+              <button onClick={() => setStep(2)} className="btn-primary w-full py-3 flex items-center justify-center gap-2">
+                Далее <ArrowRight className="w-4 h-4" />
+              </button>
+            </>
+          )}
+
+          {/* Шаг 2 — название и ниша */}
+          {step === 2 && (
+            <>
+              <div className="text-center mb-6">
+                <h1 className="text-xl font-bold">Расскажите о канале</h1>
+                <p className="text-gray-400 text-sm mt-1">AI будет генерировать контент в нужном стиле</p>
+              </div>
+              <div className="space-y-4 mb-6">
+                <div>
+                  <label className="label mb-1.5">Название канала *</label>
+                  <input
+                    value={name}
+                    onChange={e => setName(e.target.value)}
+                    className="input w-full"
+                    placeholder="Например: Tech Insider RU"
+                    autoFocus
+                  />
+                </div>
+                <div>
+                  <label className="label mb-1.5">Ниша / тематика</label>
+                  <div className="flex flex-wrap gap-2">
+                    {NICHES.map(n => (
+                      <button key={n} onClick={() => setNiche(n === niche ? '' : n)}
+                        className={`text-xs px-3 py-1.5 rounded-full border transition-colors ${
+                          niche === n ? 'border-accent bg-accent/10 text-accent' : 'border-border hover:border-accent/40'
+                        }`}>
+                        {n}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+              {error && <p className="text-red-400 text-sm mb-3">{error}</p>}
+              <div className="flex gap-3">
+                <button onClick={() => setStep(1)} className="btn-ghost px-4">Назад</button>
+                <button onClick={createChannel} disabled={busy || !name.trim()}
+                  className="btn-primary flex-1 py-3 flex items-center justify-center gap-2">
+                  {busy ? <Loader2 className="w-4 h-4 animate-spin" /> : <><Sparkles className="w-4 h-4" />Создать канал</>}
+                </button>
+              </div>
+            </>
+          )}
+
+          {/* Шаг 3 — готово */}
+          {step === 3 && (
+            <>
+              <div className="text-center mb-6">
+                <div className="text-4xl mb-3">🎉</div>
+                <h1 className="text-xl font-bold">Канал создан!</h1>
+                <p className="text-gray-400 text-sm mt-1">Что делать дальше:</p>
+              </div>
+              <div className="space-y-3 mb-6">
+                {[
+                  { icon: Bot, text: 'Подключите бота Telegram в настройках канала', color: 'text-blue-400' },
+                  { icon: Hash, text: 'AI сгенерирует темы постов автоматически', color: 'text-purple-400' },
+                  { icon: Zap, text: 'Напишите первый пост с помощью AI', color: 'text-yellow-400' },
+                ].map(({ icon: Icon, text, color }) => (
+                  <div key={text} className="flex items-start gap-3 p-3 rounded-lg bg-surface2">
+                    <Icon className={`w-5 h-5 shrink-0 mt-0.5 ${color}`} />
+                    <span className="text-sm">{text}</span>
+                  </div>
+                ))}
+              </div>
+              <div className="space-y-2">
+                <button onClick={() => router.push(channel ? `/channels/${channel.id}` : '/')}
+                  className="btn-primary w-full py-3 flex items-center justify-center gap-2">
+                  Начать работу <ArrowRight className="w-4 h-4" />
+                </button>
+                <button onClick={() => router.push(channel ? `/channels/${channel.id}/edit` : '/')}
+                  className="btn-ghost w-full py-2.5 text-sm text-gray-400">
+                  Настроить канал подробнее →
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+
+        <p className="text-center text-xs text-gray-600 mt-4">
+          У вас 50 бесплатных кредитов для старта
+        </p>
+      </div>
+    </main>
+  );
+}

components/ChannelEdit.js

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { ArrowLeft, Save, Trash2, Loader2, Image as ImageIcon, Type, Palette, Plus, X, Sparkles, Plug } from 'lucide-react';
+import TopicBank from './TopicBank';
 
 const GOALS = [
   { v: 'educational',   label: 'Обучение',      desc: 'Объясняем, разбираем' },
@@ -492,6 +493,9 @@ export default function ChannelEdit({ channel }) {
               Единственная модель для генерации изображений. Параметр качества фиксирован провайдером.
             </p>
           </div>
+
+          {/* Банк тем */}
+          <TopicBank channelId={channel.id} />
         </div>
       )}
 

components/TopicBank.js

@@ -0,0 +1,126 @@
+'use client';
+import { useState, useEffect } from 'react';
+import { RefreshCw, Plus, Trash2, Loader2, Lightbulb, X } from 'lucide-react';
+
+export default function TopicBank({ channelId }) {
+  const [topics,   setTopics]   = useState([]);
+  const [total,    setTotal]    = useState(0);
+  const [loading,  setLoading]  = useState(true);
+  const [refilling,setRefilling]= useState(false);
+  const [newTopic, setNewTopic] = useState('');
+  const [adding,   setAdding]   = useState(false);
+  const [showAdd,  setShowAdd]  = useState(false);
+
+  async function load() {
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/topics-bank/${channelId}`).then(r => r.json());
+      setTopics(res.topics || []);
+      setTotal(res.total_unused || 0);
+    } catch {}
+    setLoading(false);
+  }
+
+  useEffect(() => { load(); }, [channelId]);
+
+  async function refill() {
+    setRefilling(true);
+    await fetch(`/api/topics-bank/${channelId}/refill`, { method: 'POST' });
+    await load();
+    setRefilling(false);
+  }
+
+  async function addManual() {
+    if (!newTopic.trim()) return;
+    setAdding(true);
+    await fetch(`/api/topics-bank/${channelId}/add`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ topics: [newTopic.trim()] }),
+    });
+    setNewTopic('');
+    setShowAdd(false);
+    await load();
+    setAdding(false);
+  }
+
+  async function deleteTopic(id) {
+    await fetch(`/api/topics-bank/item/${id}`, { method: 'DELETE' });
+    setTopics(t => t.filter(x => x.id !== id));
+    setTotal(n => Math.max(0, n - 1));
+  }
+
+  const unusedTopics = topics.filter(t => !t.is_used);
+  const stockColor = total >= 5 ? 'text-green-400' : total > 0 ? 'text-yellow-400' : 'text-red-400';
+
+  return (
+    <div className="card p-5 space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="font-semibold text-sm flex items-center gap-2">
+            <Lightbulb className="w-4 h-4 text-accent" /> Банк тем
+          </h3>
+          <p className={`text-xs mt-0.5 ${stockColor}`}>
+            {total === 0 ? 'Темы закончились — нужно пополнить' : `${total} тем в запасе`}
+          </p>
+        </div>
+        <div className="flex gap-1.5">
+          <button onClick={() => setShowAdd(v => !v)} className="btn-ghost p-2" title="Добавить тему">
+            <Plus className="w-4 h-4" />
+          </button>
+          <button onClick={refill} disabled={refilling} className="btn-ghost p-2" title="Сгенерировать темы AI">
+            <RefreshCw className={`w-4 h-4 ${refilling ? 'animate-spin text-accent' : ''}`} />
+          </button>
+        </div>
+      </div>
+
+      {/* Добавить вручную */}
+      {showAdd && (
+        <div className="flex gap-2">
+          <input
+            value={newTopic}
+            onChange={e => setNewTopic(e.target.value)}
+            onKeyDown={e => e.key === 'Enter' && addManual()}
+            placeholder="Введите тему поста..."
+            className="input flex-1 text-sm py-1.5"
+            autoFocus
+          />
+          <button onClick={addManual} disabled={adding || !newTopic.trim()} className="btn-primary px-3 py-1.5 text-sm">
+            {adding ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : 'Добавить'}
+          </button>
+          <button onClick={() => { setShowAdd(false); setNewTopic(''); }} className="btn-ghost p-2">
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+      )}
+
+      {loading && <div className="py-4 text-center"><Loader2 className="w-4 h-4 animate-spin mx-auto text-accent" /></div>}
+
+      {!loading && unusedTopics.length === 0 && (
+        <div className="py-4 text-center text-sm text-gray-500">
+          Тем нет. Нажмите ↻ чтобы сгенерировать AI
+        </div>
+      )}
+
+      {!loading && unusedTopics.length > 0 && (
+        <ul className="space-y-1.5 max-h-64 overflow-y-auto">
+          {unusedTopics.map(t => (
+            <li key={t.id} className="flex items-start gap-2 text-sm group">
+              <span className="flex-1 text-gray-300 leading-snug">{t.topic}</span>
+              <button
+                onClick={() => deleteTopic(t.id)}
+                className="opacity-0 group-hover:opacity-100 btn-ghost p-1 shrink-0 text-gray-500 hover:text-red-400 transition-opacity"
+              >
+                <Trash2 className="w-3 h-3" />
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <p className="text-xs text-gray-500">
+        Темы используются при автоматической генерации постов. При запасе &lt;5 — AI пополняет автоматически.
+      </p>
+    </div>
+  );
+}

lib/engine.js

@@ -1,7 +1,7 @@
 /**
  * Engine client — единая точка вызовов к zeropost-engine
  */
-const ENGINE_URL = process.env.ENGINE_URL || 'http://127.0.0.1:3040';
+const ENGINE_URL = process.env.ENGINE_URL || 'http://127.0.0.1:3030';
 const ENGINE_SECRET = process.env.ENGINE_SECRET || 'zeropost_internal_2026';
 
 async function call(path, options = {}) {