feat: post variants, transforms, image generation, AI ideas, channel edit page with image style settings

components/ChannelEdit.js

@@ -0,0 +1,346 @@
+'use client';
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { ArrowLeft, Save, Trash2, Loader2, Image as ImageIcon, Type, Palette } from 'lucide-react';
+
+const TONES = [
+  { v: 'friendly', label: 'Дружелюбный' },
+  { v: 'serious', label: 'Серьёзный' },
+  { v: 'ironic', label: 'Ироничный' },
+  { v: 'provocative', label: 'Провокационный' },
+  { v: 'academic', label: 'Академичный' },
+];
+
+const LENGTHS = [
+  { v: 'short', label: 'Короткий', desc: 'до 300' },
+  { v: 'medium', label: 'Средний', desc: '300-800' },
+  { v: 'long', label: 'Длинный', desc: '800-2000' },
+];
+
+const HUMOR = [
+  { v: 'none', label: 'Без юмора' },
+  { v: 'dry', label: 'Сухой/ирония' },
+  { v: 'moderate', label: 'Умеренный' },
+  { v: 'playful', label: 'Игривый' },
+];
+
+const EMOJI = [
+  { v: 'none', label: 'Без эмодзи' },
+  { v: 'moderate', label: 'Умеренно' },
+  { v: 'active', label: 'Активно' },
+];
+
+const IMAGE_STYLES = [
+  { v: 'realistic-photo', label: 'Реалистичное фото', desc: 'Стоковая фотография' },
+  { v: 'flat-illustration', label: 'Плоская иллюстрация', desc: 'Editorial vector' },
+  { v: '3d-render', label: '3D рендер', desc: 'Pixar-like' },
+  { v: 'cartoon', label: 'Мультяшный', desc: 'Comic book' },
+  { v: 'minimal', label: 'Минимализм', desc: 'Один элемент' },
+  { v: 'abstract', label: 'Абстракция', desc: 'Без объектов' },
+  { v: 'sketch', label: 'Скетч', desc: 'Карандашный рисунок' },
+  { v: 'cyberpunk', label: 'Киберпанк', desc: 'Неон, будущее' },
+];
+
+const IMAGE_PALETTES = [
+  { v: 'auto', label: 'Авто' },
+  { v: 'dark', label: 'Тёмная' },
+  { v: 'light', label: 'Светлая' },
+  { v: 'warm', label: 'Тёплая' },
+  { v: 'cool', label: 'Холодная' },
+  { v: 'mono', label: 'Монохром' },
+  { v: 'vibrant', label: 'Яркая' },
+];
+
+const TABS = [
+  { id: 'content', label: 'Контент', icon: Type },
+  { id: 'images', label: 'Картинки', icon: ImageIcon },
+];
+
+export default function ChannelEdit({ channel }) {
+  const router = useRouter();
+  const style = channel.style || {};
+  const [tab, setTab] = useState('content');
+
+  // Контент
+  const [name, setName] = useState(channel.name || '');
+  const [niche, setNiche] = useState(channel.niche || '');
+  const [audience, setAudience] = useState(channel.audience || '');
+  const [tone, setTone] = useState(style.tone || 'friendly');
+  const [formality, setFormality] = useState(style.formality || 'informal');
+  const [humor, setHumor] = useState(style.humor || 'moderate');
+  const [postLength, setPostLength] = useState(style.post_length || 'medium');
+  const [emojiLevel, setEmojiLevel] = useState(style.emoji_level || 'moderate');
+  const [hashtagsMode, setHashtagsMode] = useState(style.hashtags_mode || 'end');
+  const [bannedWords, setBannedWords] = useState((style.banned_words || []).join(', '));
+  const [bannedTopics, setBannedTopics] = useState((style.banned_topics || []).join(', '));
+
+  // Картинки
+  const [imageEnabled, setImageEnabled] = useState(style.image_enabled ?? false);
+  const [imageStyle, setImageStyle] = useState(style.image_style || 'flat-illustration');
+  const [imagePalette, setImagePalette] = useState(style.image_palette || 'auto');
+  const [imageCustomColors, setImageCustomColors] = useState(style.image_custom_colors || '');
+
+  const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [error, setError] = useState('');
+  const [toast, setToast] = useState('');
+
+  async function save() {
+    setSaving(true);
+    setError('');
+    try {
+      const data = {
+        name, niche, audience,
+        style: {
+          tone, formality, humor,
+          post_length: postLength,
+          emoji_level: emojiLevel,
+          hashtags_mode: hashtagsMode,
+          banned_words: bannedWords.split(',').map(s => s.trim()).filter(Boolean),
+          banned_topics: bannedTopics.split(',').map(s => s.trim()).filter(Boolean),
+          image_enabled: imageEnabled,
+          image_style: imageStyle,
+          image_palette: imagePalette,
+          image_custom_colors: imageCustomColors.trim() || null,
+        },
+      };
+      const res = await fetch(`/api/channels/${channel.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+      if (!res.ok) throw new Error(await res.text());
+      setToast('Сохранено');
+      setTimeout(() => setToast(''), 2500);
+      router.refresh();
+    } catch (e) { setError(e.message); }
+    finally { setSaving(false); }
+  }
+
+  async function del() {
+    if (!confirm(`Удалить канал «${channel.name}»? Это действие необратимо.`)) return;
+    setDeleting(true);
+    try {
+      await fetch(`/api/channels/${channel.id}`, { method: 'DELETE' });
+      router.push('/');
+    } catch (e) { setError(e.message); setDeleting(false); }
+  }
+
+  return (
+    <main className="max-w-3xl mx-auto p-4 sm:p-6">
+      <Link href={`/channels/${channel.id}`} className="btn-ghost mb-4 -ml-2">
+        <ArrowLeft className="w-4 h-4" /> К каналу
+      </Link>
+
+      <div className="flex items-center justify-between mb-6 flex-wrap gap-3">
+        <h1 className="text-2xl font-bold">Настройки канала</h1>
+        <div className="flex items-center gap-2">
+          {toast && <span className="text-sm text-accent">{toast}</span>}
+          <button onClick={del} disabled={deleting} className="btn-ghost text-sm text-red-400 hover:bg-red-500/10">
+            <Trash2 className="w-4 h-4" /> {deleting ? '...' : 'Удалить'}
+          </button>
+          <button onClick={save} disabled={saving} className="btn-primary">
+            {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+            {saving ? 'Сохраняю...' : 'Сохранить'}
+          </button>
+        </div>
+      </div>
+
+      {error && (
+        <div className="text-sm text-red-400 bg-red-500/10 border border-red-500/20 rounded-lg px-3 py-2 mb-4">{error}</div>
+      )}
+
+      {/* Tabs */}
+      <div className="flex gap-1 border-b border-border mb-5">
+        {TABS.map(({ id, label, icon: Icon }) => (
+          <button
+            key={id}
+            onClick={() => setTab(id)}
+            className={`px-4 py-2 text-sm font-medium border-b-2 inline-flex items-center gap-1.5 transition-colors ${
+              tab === id ? 'border-accent text-accent' : 'border-transparent text-gray-500 hover:text-gray-300'
+            }`}
+          >
+            <Icon className="w-4 h-4" />
+            {label}
+          </button>
+        ))}
+      </div>
+
+      {/* TAB: Контент */}
+      {tab === 'content' && (
+        <div className="space-y-5">
+          <div className="card p-5 space-y-4">
+            <div>
+              <label className="label">Название</label>
+              <input className="input" value={name} onChange={e => setName(e.target.value)} />
+            </div>
+            <div>
+              <label className="label">Ниша</label>
+              <textarea className="input min-h-[70px]" value={niche} onChange={e => setNiche(e.target.value)} />
+            </div>
+            <div>
+              <label className="label">Аудитория</label>
+              <textarea className="input min-h-[70px]" value={audience} onChange={e => setAudience(e.target.value)} />
+            </div>
+          </div>
+
+          <div className="card p-5 space-y-4">
+            <h3 className="font-semibold text-sm">Стиль текста</h3>
+            <div>
+              <label className="label">Тон</label>
+              <div className="grid grid-cols-2 sm:grid-cols-5 gap-2">
+                {TONES.map(t => (
+                  <button key={t.v} type="button" onClick={() => setTone(t.v)}
+                    className={`px-3 py-2 rounded-lg border text-sm ${tone === t.v ? 'border-accent bg-accent/10' : 'border-border bg-surface2'}`}>
+                    {t.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+            <div className="grid sm:grid-cols-2 gap-4">
+              <div>
+                <label className="label">Обращение</label>
+                <div className="grid grid-cols-2 gap-2">
+                  {[{ v: 'informal', l: 'На «ты»' }, { v: 'formal', l: 'На «вы»' }].map(o => (
+                    <button key={o.v} type="button" onClick={() => setFormality(o.v)}
+                      className={`px-3 py-2 rounded-lg border text-sm ${formality === o.v ? 'border-accent bg-accent/10' : 'border-border bg-surface2'}`}>
+                      {o.l}
+                    </button>
+                  ))}
+                </div>
+              </div>
+              <div>
+                <label className="label">Юмор</label>
+                <select className="input" value={humor} onChange={e => setHumor(e.target.value)}>
+                  {HUMOR.map(o => <option key={o.v} value={o.v}>{o.label}</option>)}
+                </select>
+              </div>
+            </div>
+            <div>
+              <label className="label">Длина постов</label>
+              <div className="grid grid-cols-3 gap-2">
+                {LENGTHS.map(l => (
+                  <button key={l.v} type="button" onClick={() => setPostLength(l.v)}
+                    className={`p-2.5 rounded-lg border text-left ${postLength === l.v ? 'border-accent bg-accent/10' : 'border-border bg-surface2'}`}>
+                    <div className="text-sm font-medium">{l.label}</div>
+                    <div className="text-xs text-gray-500">{l.desc}</div>
+                  </button>
+                ))}
+              </div>
+            </div>
+            <div className="grid sm:grid-cols-2 gap-4">
+              <div>
+                <label className="label">Эмодзи</label>
+                <select className="input" value={emojiLevel} onChange={e => setEmojiLevel(e.target.value)}>
+                  {EMOJI.map(o => <option key={o.v} value={o.v}>{o.label}</option>)}
+                </select>
+              </div>
+              <div>
+                <label className="label">Хэштеги</label>
+                <select className="input" value={hashtagsMode} onChange={e => setHashtagsMode(e.target.value)}>
+                  <option value="none">Не использовать</option>
+                  <option value="end">В конце поста</option>
+                  <option value="inline">Внутри текста</option>
+                </select>
+              </div>
+            </div>
+            <div>
+              <label className="label">Стоп-слова</label>
+              <input className="input" value={bannedWords} onChange={e => setBannedWords(e.target.value)}
+                placeholder="революционный, уникальный" />
+            </div>
+            <div>
+              <label className="label">Запрещённые темы</label>
+              <input className="input" value={bannedTopics} onChange={e => setBannedTopics(e.target.value)}
+                placeholder="политика, крипта" />
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* TAB: Картинки */}
+      {tab === 'images' && (
+        <div className="space-y-5">
+          <div className="card p-5">
+            <div className="flex items-center gap-3 mb-2">
+              <input
+                type="checkbox"
+                id="imageEnabled"
+                checked={imageEnabled}
+                onChange={e => setImageEnabled(e.target.checked)}
+                className="w-4 h-4 accent-accent"
+              />
+              <label htmlFor="imageEnabled" className="font-semibold">Генерировать картинки к постам</label>
+            </div>
+            <p className="text-xs text-gray-500 ml-7">
+              Если включено — в редакторе поста появится кнопка генерации картинки. Можешь генерировать вручную для каждого поста.
+            </p>
+          </div>
+
+          {imageEnabled && (
+            <>
+              <div className="card p-5">
+                <h3 className="font-semibold text-sm mb-3 flex items-center gap-2">
+                  <ImageIcon className="w-4 h-4 text-accent" />
+                  Стиль изображений
+                </h3>
+                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
+                  {IMAGE_STYLES.map(s => (
+                    <button
+                      key={s.v} type="button" onClick={() => setImageStyle(s.v)}
+                      className={`p-3 rounded-lg border text-left transition-colors ${
+                        imageStyle === s.v ? 'border-accent bg-accent/10' : 'border-border bg-surface2 hover:border-gray-600'
+                      }`}
+                    >
+                      <div className="text-sm font-medium">{s.label}</div>
+                      <div className="text-xs text-gray-500 mt-0.5">{s.desc}</div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div className="card p-5">
+                <h3 className="font-semibold text-sm mb-3 flex items-center gap-2">
+                  <Palette className="w-4 h-4 text-accent" />
+                  Цветовая палитра
+                </h3>
+                <div className="grid grid-cols-3 sm:grid-cols-7 gap-2 mb-4">
+                  {IMAGE_PALETTES.map(p => (
+                    <button
+                      key={p.v} type="button" onClick={() => setImagePalette(p.v)}
+                      className={`px-3 py-2 rounded-lg border text-sm ${
+                        imagePalette === p.v ? 'border-accent bg-accent/10' : 'border-border bg-surface2'
+                      }`}
+                    >
+                      {p.label}
+                    </button>
+                  ))}
+                </div>
+                <div>
+                  <label className="label">Или брендовые цвета (опц.)</label>
+                  <input
+                    className="input font-mono text-sm"
+                    value={imageCustomColors}
+                    onChange={e => setImageCustomColors(e.target.value)}
+                    placeholder="#10b981, #1e293b, #f59e0b"
+                  />
+                  <div className="hint">Через запятую. Если заполнено — приоритет над палитрой</div>
+                </div>
+              </div>
+
+              {/* Preview подсказка */}
+              <div className="card p-4 bg-accent/5 border-accent/20 text-sm text-gray-300">
+                <div className="font-medium text-accent mb-1">Как это работает</div>
+                <p className="text-xs">
+                  AI прочитает контент поста и сгенерирует к нему обложку в выбранном стиле.
+                  Генерация занимает ~30 секунд. Если что-то не нравится — можно перегенерировать.
+                </p>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </main>
+  );
+}

components/ChannelView.js

@@ -1,13 +1,27 @@
 'use client';
 import { useState } from 'react';
 import Link from 'next/link';
-import { ArrowLeft, Sparkles, Wand2, Copy, Check, Loader2, Settings } from 'lucide-react';
+import {
+  ArrowLeft, Sparkles, Wand2, Copy, Check, Loader2, Settings,
+  Image as ImageIcon, RefreshCw, Scissors, Maximize2, Zap, Heart,
+  MessageSquare, Pencil, X, ChevronDown
+} from 'lucide-react';
 
 const GOAL_LABELS = {
   educational: 'Обучение', news: 'Новости',
   entertainment: 'Развлечение', expert: 'Экспертный', sales: 'Продажи',
 };
 
+const TRANSFORMS = [
+  { action: 'shorter',    label: 'Короче',     icon: Scissors,   desc: 'Сократить в 2 раза' },
+  { action: 'longer',     label: 'Длиннее',    icon: Maximize2,  desc: 'Расширить с примерами' },
+  { action: 'improve',    label: 'Улучшить',   icon: Sparkles,   desc: 'Убрать AI-штампы' },
+  { action: 'bolder',     label: 'Дерзче',     icon: Zap,        desc: 'Острее формулировки' },
+  { action: 'softer',     label: 'Мягче',      icon: Heart,      desc: 'Доброжелательней' },
+  { action: 'addCta',     label: 'Призыв',     icon: MessageSquare, desc: 'Добавить CTA' },
+  { action: 'forVk',      label: 'Для ВК',     icon: RefreshCw,  desc: 'Адаптировать под ВКонтакте' },
+];
+
 export default function ChannelView({ channel }) {
   const [topic, setTopic] = useState('');
   const [generating, setGenerating] = useState(false);
@@ -16,42 +30,79 @@ export default function ChannelView({ channel }) {
   const [copied, setCopied] = useState(false);
   const [tokens, setTokens] = useState(null);
 
-  async function generate() {
-    if (!topic.trim()) return;
+  // Варианты постов (история)
+  const [variants, setVariants] = useState([]);
+  const [editing, setEditing] = useState(false);
+
+  // Картинка
+  const [image, setImage] = useState(null);
+  const [genImage, setGenImage] = useState(false);
+
+  // Трансформации
+  const [transforming, setTransforming] = useState(false);
+
+  // Идеи тем
+  const [showIdeas, setShowIdeas] = useState(false);
+  const [ideas, setIdeas] = useState([]);
+  const [loadingIdeas, setLoadingIdeas] = useState(false);
+
+  async function fetchIdeas() {
+    setLoadingIdeas(true);
+    setError('');
+    try {
+      const res = await fetch('/api/generate/topics-ideas', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ channelId: channel.id, count: 7 }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'Ошибка');
+      setIdeas(data.topics || []);
+      setShowIdeas(true);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoadingIdeas(false);
+    }
+  }
+
+  async function generate(asVariant = false) {
+    if (!topic.trim() && !asVariant) return;
+    if (asVariant && !post) return;
     setGenerating(true);
     setError('');
-    setPost(null);
-    setTokens(null);
+
+    const useTopic = asVariant ? `${topic} (вариант ${variants.length + 2})` : topic.trim();
 
     try {
       const createRes = await fetch('/api/generate', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          type: 'post',
-          channelId: channel.id,
-          topic: topic.trim(),
-          useCritique: true,
+          type: 'post', channelId: channel.id, topic: useTopic, useCritique: true,
         }),
       });
       const job = await createRes.json();
       if (!createRes.ok) throw new Error(job.error || 'Ошибка');
 
-      // polling
       let final;
       for (let i = 0; i < 60; i++) {
         await new Promise(r => setTimeout(r, 2000));
         const r = await fetch(`/api/generate/${job.jobId}`);
         const j = await r.json();
-        if (j.status === 'done' || j.status === 'failed') {
-          final = j;
-          break;
-        }
+        if (j.status === 'done' || j.status === 'failed') { final = j; break; }
       }
       if (!final) throw new Error('Таймаут — попробуй ещё раз');
       if (final.status === 'failed') throw new Error(final.error || 'Генерация упала');
+
+      // Сохраняем предыдущий вариант в variants
+      if (asVariant && post) {
+        setVariants(v => [...v, { content: post, tokens, image }]);
+      }
+
       setPost(final.result);
       setTokens({ in: final.tokens_in, out: final.tokens_out });
+      setImage(null); // сбрасываем картинку при новом посте
     } catch (err) {
       setError(err.message);
     } finally {
@@ -59,6 +110,61 @@ export default function ChannelView({ channel }) {
     }
   }
 
+  async function transform(action) {
+    if (!post || transforming) return;
+    setTransforming(true);
+    setError('');
+    try {
+      const res = await fetch('/api/generate/transform', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ channelId: channel.id, originalPost: post, action }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'Ошибка');
+      // Сохраняем текущий в варианты
+      setVariants(v => [...v, { content: post, tokens, image }]);
+      setPost(data.content);
+      setImage(null);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setTransforming(false);
+    }
+  }
+
+  async function generateImage() {
+    if (!post || genImage) return;
+    setGenImage(true);
+    setError('');
+    try {
+      const res = await fetch('/api/generate/post-image', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ channelId: channel.id, post }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'Ошибка генерации картинки');
+      setImage(data.url);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setGenImage(false);
+    }
+  }
+
+  function restoreVariant(idx) {
+    const v = variants[idx];
+    setVariants(arr => {
+      const next = arr.filter((_, i) => i !== idx);
+      next.push({ content: post, tokens, image });
+      return next;
+    });
+    setPost(v.content);
+    setTokens(v.tokens);
+    setImage(v.image);
+  }
+
   async function copy() {
     await navigator.clipboard.writeText(post);
     setCopied(true);
@@ -90,10 +196,44 @@ export default function ChannelView({ channel }) {
 
       {/* Generator */}
       <div className="card p-5 mb-6">
-        <h2 className="font-semibold mb-3 flex items-center gap-2">
-          <Wand2 className="w-4 h-4 text-accent" />
-          Сгенерировать пост
-        </h2>
+        <div className="flex items-center justify-between mb-3 flex-wrap gap-2">
+          <h2 className="font-semibold flex items-center gap-2">
+            <Wand2 className="w-4 h-4 text-accent" />
+            Сгенерировать пост
+          </h2>
+          <button
+            onClick={fetchIdeas}
+            disabled={loadingIdeas}
+            className="text-xs inline-flex items-center gap-1 text-accent hover:underline disabled:opacity-50"
+          >
+            {loadingIdeas ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Sparkles className="w-3.5 h-3.5" />}
+            Идеи тем
+          </button>
+        </div>
+
+        {/* Список идей */}
+        {showIdeas && ideas.length > 0 && (
+          <div className="mb-3 p-3 rounded-lg bg-accent/5 border border-accent/20">
+            <div className="flex items-center justify-between mb-2">
+              <span className="text-xs font-semibold text-accent uppercase tracking-wide">Идеи для постов</span>
+              <button onClick={() => setShowIdeas(false)} className="text-xs text-gray-500 hover:text-gray-300">
+                <X className="w-3.5 h-3.5" />
+              </button>
+            </div>
+            <div className="space-y-1">
+              {ideas.map((idea, i) => (
+                <button
+                  key={i}
+                  onClick={() => { setTopic(idea); setShowIdeas(false); }}
+                  className="block w-full text-left text-sm px-2.5 py-1.5 rounded hover:bg-accent/10 text-gray-300 hover:text-white transition-colors"
+                >
+                  → {idea}
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
         <textarea
           className="input min-h-[80px] mb-3"
           value={topic}
@@ -105,7 +245,7 @@ export default function ChannelView({ channel }) {
           <div className="text-xs text-gray-500">
             ИИ напишет пост в стиле твоего канала с учётом примеров
           </div>
-          <button onClick={generate} disabled={generating || !topic.trim()} className="btn-primary">
+          <button onClick={() => generate(false)} disabled={generating || !topic.trim()} className="btn-primary">
             {generating ? (
               <><Loader2 className="w-4 h-4 animate-spin" />Генерирую...</>
             ) : (
@@ -122,15 +262,30 @@ export default function ChannelView({ channel }) {
 
       {/* Result */}
       {post && (
-        <div className="card p-5">
-          <div className="flex items-center justify-between mb-3">
-            <h3 className="font-semibold">Результат</h3>
-            <div className="flex items-center gap-3">
+        <div className="card p-5 mb-4">
+          <div className="flex items-center justify-between mb-3 flex-wrap gap-2">
+            <h3 className="font-semibold flex items-center gap-2">
+              Результат
+              {(transforming || genImage) && <Loader2 className="w-4 h-4 animate-spin text-accent" />}
+            </h3>
+            <div className="flex items-center gap-2 flex-wrap">
               {tokens && (
-                <span className="text-xs text-gray-500">
-                  {tokens.in}/{tokens.out} токенов
-                </span>
+                <span className="text-xs text-gray-500">{tokens.in}/{tokens.out} ток.</span>
               )}
+              <button
+                onClick={() => setEditing(v => !v)}
+                className="btn-ghost text-sm py-1"
+              >
+                <Pencil className="w-4 h-4" /> {editing ? 'Готово' : 'Править'}
+              </button>
+              <button
+                onClick={() => generate(true)}
+                disabled={generating}
+                className="btn-ghost text-sm py-1"
+                title="Сгенерировать ещё один вариант"
+              >
+                <RefreshCw className="w-4 h-4" /> Ещё вариант
+              </button>
               <button onClick={copy} className="btn-ghost text-sm py-1">
                 {copied ? (
                   <><Check className="w-4 h-4 text-accent" /> Скопировано</>
@@ -140,8 +295,96 @@ export default function ChannelView({ channel }) {
               </button>
             </div>
           </div>
-          <div className="bg-surface2 border border-border rounded-lg p-4 whitespace-pre-wrap text-sm leading-relaxed">
-            {post}
+
+          {/* Сам пост — редактируемый или нет */}
+          {editing ? (
+            <textarea
+              value={post}
+              onChange={e => setPost(e.target.value)}
+              className="input min-h-[200px] font-mono text-sm leading-relaxed"
+              autoFocus
+            />
+          ) : (
+            <div className="bg-surface2 border border-border rounded-lg p-4 whitespace-pre-wrap text-sm leading-relaxed">
+              {post}
+            </div>
+          )}
+
+          {/* Картинка к посту */}
+          {image && (
+            <div className="mt-4 relative">
+              <img src={image} alt="" className="w-full rounded-lg" />
+              <button
+                onClick={() => setImage(null)}
+                className="absolute top-2 right-2 p-1.5 rounded-lg bg-black/60 hover:bg-black/80 text-white"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </div>
+          )}
+
+          {/* Кнопка генерации картинки */}
+          {!image && (
+            <div className="mt-4">
+              <button
+                onClick={generateImage}
+                disabled={genImage}
+                className="w-full inline-flex items-center justify-center gap-2 py-2.5 rounded-lg border border-dashed border-border hover:border-accent hover:bg-accent/5 text-sm text-gray-400 hover:text-accent transition-colors disabled:opacity-50"
+              >
+                {genImage ? (
+                  <><Loader2 className="w-4 h-4 animate-spin" /> Генерирую картинку... (~30 сек)</>
+                ) : (
+                  <><ImageIcon className="w-4 h-4" /> Сгенерировать картинку</>
+                )}
+              </button>
+            </div>
+          )}
+
+          {/* Трансформации */}
+          <div className="mt-5 pt-4 border-t border-border">
+            <div className="text-xs font-semibold text-gray-400 uppercase tracking-wide mb-3">Переработать</div>
+            <div className="flex flex-wrap gap-2">
+              {TRANSFORMS.map(({ action, label, icon: Icon, desc }) => (
+                <button
+                  key={action}
+                  onClick={() => transform(action)}
+                  disabled={transforming || generating}
+                  title={desc}
+                  className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-border bg-surface2 hover:border-accent hover:bg-accent/5 text-sm transition-colors disabled:opacity-50"
+                >
+                  <Icon className="w-3.5 h-3.5" />
+                  {label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* История вариантов */}
+      {variants.length > 0 && (
+        <div className="card p-5">
+          <div className="flex items-center justify-between mb-3">
+            <h3 className="font-semibold text-sm">Предыдущие варианты ({variants.length})</h3>
+            <button onClick={() => setVariants([])} className="text-xs text-gray-500 hover:text-red-400">
+              Очистить
+            </button>
+          </div>
+          <div className="space-y-2">
+            {variants.map((v, i) => (
+              <div key={i} className="flex items-start gap-3 p-3 rounded-lg bg-surface2 border border-border">
+                <div className="flex-1 text-xs text-gray-400 line-clamp-3 whitespace-pre-wrap">
+                  {v.content}
+                </div>
+                <button
+                  onClick={() => restoreVariant(i)}
+                  className="text-xs text-accent hover:underline shrink-0"
+                  title="Сделать активным"
+                >
+                  ← вернуть
+                </button>
+              </div>
+            ))}
           </div>
         </div>
       )}