feat: P4 ChannelAnalytics tab; P5 FromUrlModal + URL→draft in ChannelView

app/api/generate/from-url/route.js

@@ -0,0 +1,20 @@
+import { NextResponse } from 'next/server';
+import { requireUser } from '@/lib/session';
+import { engine } from '@/lib/engine';
+
+export async function POST(request) {
+  const user = await requireUser();
+  if (!user) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+
+  const body = await request.json();
+  if (!body.channelId || !body.url) {
+    return NextResponse.json({ error: 'channelId and url required' }, { status: 400 });
+  }
+
+  try {
+    const data = await engine.generateFromUrl(user.id, body);
+    return NextResponse.json(data);
+  } catch (err) {
+    return NextResponse.json({ error: err.message }, { status: err.status || 500 });
+  }
+}

app/api/metrics/best-time/[channelId]/route.js

@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server';
+import { requireUser } from '@/lib/session';
+import { engine } from '@/lib/engine';
+
+export async function GET(request, { params }) {
+  const user = await requireUser();
+  if (!user) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  const { searchParams } = new URL(request.url);
+  try {
+    const data = await engine.getBestTime(params.channelId, Object.fromEntries(searchParams));
+    return NextResponse.json(data);
+  } catch (err) {
+    return NextResponse.json({ error: err.message }, { status: err.status || 500 });
+  }
+}

app/api/metrics/channel/[channelId]/route.js

@@ -0,0 +1,15 @@
+import { NextResponse } from 'next/server';
+import { requireUser } from '@/lib/session';
+import { engine } from '@/lib/engine';
+
+export async function GET(request, { params }) {
+  const user = await requireUser();
+  if (!user) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  const { searchParams } = new URL(request.url);
+  try {
+    const data = await engine.getChannelMetrics(params.channelId, Object.fromEntries(searchParams));
+    return NextResponse.json(data);
+  } catch (err) {
+    return NextResponse.json({ error: err.message }, { status: err.status || 500 });
+  }
+}

components/ChannelAnalytics.js

@@ -0,0 +1,255 @@
+'use client';
+
+/**
+ * ChannelAnalytics — вкладка аналитики в ChannelView.
+ * Props: channelId, channelName
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { BarChart2, TrendingUp, Clock, RefreshCw,
+         Heart, Share2, Eye, AlertCircle, Calendar } from 'lucide-react';
+
+const DOW_SHORT  = ['Пн','Вт','Ср','Чт','Пт','Сб','Вс'];
+const BAR_HEIGHT = 80;
+
+// ── Мини-бар для гистограммы ──────────────────────────────────────────────────
+function Bar({ value, max, label, highlight }) {
+  const pct = max > 0 ? (value / max) : 0;
+  return (
+    <div className="flex flex-col items-center gap-1 flex-1">
+      <span className="text-[10px] text-text-mute">{value > 0 ? value : ''}</span>
+      <div className="w-full rounded-t-sm" style={{
+        height: BAR_HEIGHT,
+        display: 'flex',
+        alignItems: 'flex-end',
+      }}>
+        <div
+          className={`w-full rounded-t-sm transition-all ${highlight ? 'bg-accent' : 'bg-accent/30'}`}
+          style={{ height: `${Math.max(pct * BAR_HEIGHT, value > 0 ? 4 : 0)}px` }}
+        />
+      </div>
+      <span className="text-[10px] text-text-mute">{label}</span>
+    </div>
+  );
+}
+
+// ── Карточка метрики ──────────────────────────────────────────────────────────
+function MetricCard({ Icon, label, value, sub, color = 'text-accent' }) {
+  return (
+    <div className="card p-4 flex items-center gap-3">
+      <div className={`p-2 rounded-lg bg-surface2 ${color}`}>
+        <Icon className="w-5 h-5" />
+      </div>
+      <div>
+        <div className="text-xl font-bold">{value ?? '—'}</div>
+        <div className="text-xs text-text-mute">{label}</div>
+        {sub && <div className="text-xs text-text-mute mt-0.5">{sub}</div>}
+      </div>
+    </div>
+  );
+}
+
+// ── Строка реакций ────────────────────────────────────────────────────────────
+function ReactionBar({ reactions }) {
+  if (!reactions || !Object.keys(reactions).length) return null;
+  const total = Object.values(reactions).reduce((s, v) => s + v, 0);
+  return (
+    <div className="flex items-center gap-2 flex-wrap">
+      {Object.entries(reactions)
+        .sort((a, b) => b[1] - a[1])
+        .map(([emoji, count]) => (
+          <span key={emoji} className="flex items-center gap-1 text-sm bg-surface2 px-2 py-0.5 rounded-full border border-border">
+            {emoji} <span className="text-xs text-text-mute">{count}</span>
+          </span>
+        ))}
+      <span className="text-xs text-text-mute ml-auto">всего {total}</span>
+    </div>
+  );
+}
+
+// ── Главный компонент ─────────────────────────────────────────────────────────
+export default function ChannelAnalytics({ channelId, channelName }) {
+  const [metrics,   setMetrics]   = useState(null);
+  const [bestTime,  setBestTime]  = useState(null);
+  const [loading,   setLoading]   = useState(false);
+  const [error,     setError]     = useState('');
+  const [days,      setDays]      = useState(30);
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    setError('');
+    try {
+      const [m, b] = await Promise.all([
+        fetch(`/api/metrics/channel/${channelId}?days=${days}`).then(r => r.json()),
+        fetch(`/api/metrics/best-time/${channelId}?days=90`).then(r => r.json()),
+      ]);
+      if (m.error) throw new Error(m.error);
+      setMetrics(m);
+      setBestTime(b);
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [channelId, days]);
+
+  useEffect(() => { load(); }, [load]);
+
+  const totals = metrics?.totals || {};
+  const topPosts = metrics?.top_posts || [];
+  const reactionTotals = metrics?.reaction_totals || [];
+  const totalReactions = reactionTotals.reduce((s, r) => s + parseInt(r.total), 0);
+
+  // Лучший день недели по кол-ву публикаций
+  const dowData  = Array.from({ length: 7 }, (_, i) => {
+    const d = bestTime?.by_dow?.find(r => parseInt(r.dow) === i + 1);
+    return { label: DOW_SHORT[i], value: d?.count || 0 };
+  });
+  const maxDow = Math.max(...dowData.map(d => d.value), 1);
+  const bestDow = dowData.reduce((best, d, i) => d.value > best.value ? { ...d, i } : best, { value: 0, i: -1 });
+
+  // Лучший час
+  const hourData = Array.from({ length: 24 }, (_, h) => {
+    const d = bestTime?.by_hour?.find(r => parseInt(r.hour) === h);
+    return { label: `${h}`, value: d?.count || 0 };
+  });
+  const maxHour = Math.max(...hourData.map(d => d.value), 1);
+  const bestHour = hourData.reduce((best, d, i) => d.value > best.value ? { ...d, i } : best, { value: 0, i: -1 });
+
+  return (
+    <div className="flex flex-col gap-5">
+
+      {/* Тулбар */}
+      <div className="flex items-center justify-between flex-wrap gap-2">
+        <h3 className="font-semibold flex items-center gap-2">
+          <BarChart2 className="w-4 h-4 text-accent" />
+          Аналитика
+        </h3>
+        <div className="flex items-center gap-2">
+          <select
+            className="input py-1 text-sm w-32"
+            value={days}
+            onChange={e => setDays(parseInt(e.target.value))}
+          >
+            <option value={7}>7 дней</option>
+            <option value={30}>30 дней</option>
+            <option value={90}>90 дней</option>
+          </select>
+          <button onClick={load} className="btn-ghost p-1.5 rounded-lg" title="Обновить">
+            <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+          </button>
+        </div>
+      </div>
+
+      {error && (
+        <div className="card p-3 text-sm text-red-400 flex items-center gap-2">
+          <AlertCircle className="w-4 h-4 shrink-0" /> {error}
+        </div>
+      )}
+
+      {/* Карточки-цифры */}
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+        <MetricCard Icon={Calendar}  label={`Постов за ${days} дн.`} value={totals.total_posts || 0} />
+        <MetricCard Icon={Eye}       label="Опубликовано в TG"       value={totals.published_to_tg || 0} />
+        <MetricCard Icon={Heart}     label="Реакций за период"       value={totalReactions || 0}  color="text-pink-400" />
+        <MetricCard Icon={Share2}    label="Пересылок"               value={totals.total_forwards || 0} color="text-blue-400" />
+      </div>
+
+      {/* Топ реакций */}
+      {reactionTotals.length > 0 && (
+        <div className="card p-4">
+          <div className="text-sm font-semibold mb-3 flex items-center gap-2">
+            <Heart className="w-4 h-4 text-pink-400" /> Реакции за {days} дней
+          </div>
+          <div className="flex items-center gap-2 flex-wrap">
+            {reactionTotals.map(r => (
+              <span key={r.emoji} className="flex items-center gap-1.5 text-sm bg-surface2 px-3 py-1 rounded-full border border-border">
+                {r.emoji}
+                <span className="font-semibold">{r.total}</span>
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Лучший день недели */}
+      <div className="card p-4">
+        <div className="text-sm font-semibold mb-1 flex items-center gap-2">
+          <TrendingUp className="w-4 h-4 text-accent" /> Активность по дням недели
+        </div>
+        {bestDow.value > 0 && (
+          <p className="text-xs text-text-mute mb-3">
+            Чаще всего публикуешь в <span className="text-accent font-medium">{DOW_SHORT[bestDow.i]}</span>
+          </p>
+        )}
+        <div className="flex gap-1 items-end" style={{ height: BAR_HEIGHT + 32 }}>
+          {dowData.map((d, i) => (
+            <Bar key={i} value={d.value} max={maxDow} label={d.label} highlight={i === bestDow.i} />
+          ))}
+        </div>
+      </div>
+
+      {/* Лучший час */}
+      <div className="card p-4">
+        <div className="text-sm font-semibold mb-1 flex items-center gap-2">
+          <Clock className="w-4 h-4 text-accent" /> Активность по часам (МСК, 90 дн.)
+        </div>
+        {bestHour.value > 0 && (
+          <p className="text-xs text-text-mute mb-3">
+            Пик публикаций в <span className="text-accent font-medium">{bestHour.i}:00</span>
+          </p>
+        )}
+        <div className="flex gap-px items-end overflow-x-auto" style={{ height: BAR_HEIGHT + 32 }}>
+          {hourData.map((d, i) => (
+            <Bar key={i} value={d.value} max={maxHour} label={i % 4 === 0 ? String(i) : ''} highlight={i === bestHour.i} />
+          ))}
+        </div>
+      </div>
+
+      {/* Топ постов по реакциям */}
+      {topPosts.length > 0 && (
+        <div className="card p-4">
+          <div className="text-sm font-semibold mb-3 flex items-center gap-2">
+            <Heart className="w-4 h-4 text-pink-400" /> Топ постов по реакциям
+          </div>
+          <div className="flex flex-col gap-3">
+            {topPosts.map(p => (
+              <div key={p.id} className="p-3 rounded-lg bg-surface2 border border-border">
+                <div className="text-xs text-text-soft line-clamp-2 mb-2">{p.preview}</div>
+                <div className="flex items-center gap-3 flex-wrap">
+                  <ReactionBar reactions={p.reactions} />
+                  {p.forwards > 0 && (
+                    <span className="text-xs text-text-mute flex items-center gap-1">
+                      <Share2 className="w-3 h-3" /> {p.forwards}
+                    </span>
+                  )}
+                  <span className="text-xs text-text-mute ml-auto">
+                    {p.published_at ? new Date(p.published_at).toLocaleDateString('ru', { day:'numeric', month:'short' }) : ''}
+                  </span>
+                  {p.tg_message_id && (
+                    <a
+                      href={`https://t.me/${channelName?.replace('@','')}/${p.tg_message_id}`}
+                      target="_blank" rel="noopener noreferrer"
+                      className="text-xs text-accent hover:underline"
+                    >
+                      Открыть
+                    </a>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Нет данных */}
+      {!loading && metrics && topPosts.length === 0 && reactionTotals.length === 0 && (
+        <div className="card p-8 text-center text-text-mute">
+          <BarChart2 className="w-8 h-8 mx-auto mb-3 opacity-30" />
+          <p>Пока нет данных для отображения</p>
+          <p className="text-xs mt-1">Реакции появятся после первых публикаций через этот канал</p>
+        </div>
+      )}
+    </div>
+  );
+}

components/ChannelView.js

@@ -9,6 +9,8 @@ import {
 import PhotoSearchModal from './PhotoSearchModal';
 import PostPreview from './PostPreview';
 import PostTemplates from './PostTemplates';
+import ChannelAnalytics from './ChannelAnalytics';
+import FromUrlModal from './FromUrlModal';
 
 const GOAL_LABELS = {
   educational: 'Обучение', news: 'Новости',
@@ -53,6 +55,7 @@ export default function ChannelView({ channel }) {
 
   // Photo search modal
   const [showPhotoSearch, setShowPhotoSearch] = useState(false);
+  const [showFromUrl,     setShowFromUrl]     = useState(false);
 
   // Трансформации
   const [transforming, setTransforming] = useState(false);
@@ -85,6 +88,7 @@ export default function ChannelView({ channel }) {
   // Сохранение и публикация
   const [savedPostId, setSavedPostId] = useState(null);
   const [publishing, setPublishing] = useState(false);
+  const [activeTab, setActiveTab] = useState('generate'); // generate | analytics
   const [showScheduler, setShowScheduler] = useState(false);
   const [scheduleAt, setScheduleAt] = useState('');
   const [history, setHistory] = useState([]);
@@ -118,6 +122,13 @@ export default function ChannelView({ channel }) {
     setShowPhotoSearch(false);
   }
 
+  function applyFromUrl({ content, imageUrl, title }) {
+    setPost(content);
+    if (imageUrl) setImage(imageUrl);
+    if (title && !topic.trim()) setTopic(title.slice(0, 120));
+    setSavedPostId(null);
+  }
+
   async function savePost(status = 'draft', scheduledAt = null) {
     if (!post) return;
     setPublishing(true);
@@ -330,6 +341,22 @@ export default function ChannelView({ channel }) {
         </Link>
       </div>
 
+      {/* Вкладки */}
+      <div className="flex items-center gap-0.5 rounded-lg p-0.5 bg-surface2 border border-border self-start mb-2">
+        {[['generate','Создать пост'],['analytics','Аналитика']].map(([id,label]) => (
+          <button key={id} onClick={() => setActiveTab(id)}
+            className={`px-4 py-1.5 rounded-md text-sm font-medium transition-colors
+              ${activeTab===id ? 'bg-surface text-text shadow-sm' : 'text-text-soft hover:text-text'}`}>
+            {label}
+          </button>
+        ))}
+      </div>
+
+      {activeTab === 'analytics' && (
+        <ChannelAnalytics channelId={channel.id} channelName={channel.tg_username} />
+      )}
+
+      {activeTab === 'generate' && <>
       {/* Generator */}
       <div className="card p-5 mb-6">
         <div className="flex items-center justify-between mb-3 flex-wrap gap-2">
@@ -339,6 +366,13 @@ export default function ChannelView({ channel }) {
           </h2>
           <div className="flex items-center gap-3">
             <PostTemplates onSelect={applyTemplate} disabled={generating} />
+            <button
+              onClick={() => setShowFromUrl(true)}
+              className="text-xs inline-flex items-center gap-1 text-accent hover:underline"
+            >
+              <Link2 className="w-3.5 h-3.5" />
+              По ссылке
+            </button>
             <button
               onClick={fetchIdeas}
               disabled={loadingIdeas}
@@ -613,6 +647,14 @@ export default function ChannelView({ channel }) {
         </div>
       )}
 
+      {/* From URL modal */}
+      <FromUrlModal
+        open={showFromUrl}
+        channelId={channel.id}
+        onClose={() => setShowFromUrl(false)}
+        onApply={applyFromUrl}
+      />
+
       {/* Photo search modal */}
       <PhotoSearchModal
         open={showPhotoSearch}
@@ -709,6 +751,7 @@ export default function ChannelView({ channel }) {
           </div>
         </div>
       )}
+    </> }
     </main>
   );
 }

components/FromUrlModal.js

@@ -0,0 +1,191 @@
+'use client';
+
+/**
+ * FromUrlModal — модальное окно «URL → черновик».
+ * Props:
+ *   open       — bool
+ *   channelId  — number
+ *   onClose()
+ *   onApply({ content, imageUrl, title }) — вызывается с результатом
+ */
+
+import { useState } from 'react';
+import { X, Link2, Loader2, Youtube, Globe, Send, AlertCircle } from 'lucide-react';
+
+function detectSource(url) {
+  try {
+    const u = new URL(url);
+    if (u.hostname.includes('youtube.com') || u.hostname.includes('youtu.be')) return 'youtube';
+    if (u.hostname === 't.me') return 'telegram';
+    return 'web';
+  } catch { return 'web'; }
+}
+
+const SOURCE_ICONS = {
+  youtube:  { Icon: Youtube, label: 'YouTube', color: 'text-red-400' },
+  telegram: { Icon: Send,    label: 'Telegram', color: 'text-blue-400' },
+  web:      { Icon: Globe,   label: 'Сайт',    color: 'text-text-mute' },
+};
+
+export default function FromUrlModal({ open, channelId, onClose, onApply }) {
+  const [url,      setUrl]      = useState('');
+  const [loading,  setLoading]  = useState(false);
+  const [error,    setError]    = useState('');
+  const [result,   setResult]   = useState(null);
+  const [edited,   setEdited]   = useState('');
+
+  if (!open) return null;
+
+  const source = detectSource(url);
+  const { Icon: SrcIcon, label: srcLabel, color: srcColor } = SOURCE_ICONS[source] || SOURCE_ICONS.web;
+
+  async function generate() {
+    if (!url.trim()) return;
+    setLoading(true);
+    setError('');
+    setResult(null);
+    try {
+      const res = await fetch('/api/generate/from-url', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ channelId, url: url.trim() }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'Ошибка генерации');
+      setResult(data);
+      setEdited(data.content);
+    } catch (e) {
+      setError(e.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function apply() {
+    if (!edited.trim()) return;
+    onApply({
+      content:  edited,
+      imageUrl: result?.imageUrl || null,
+      title:    result?.title || '',
+    });
+    handleClose();
+  }
+
+  function handleClose() {
+    setUrl('');
+    setResult(null);
+    setEdited('');
+    setError('');
+    onClose();
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
+      <div className="w-full max-w-lg rounded-2xl bg-surface border border-border shadow-2xl flex flex-col max-h-[90vh]">
+
+        {/* Шапка */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-border shrink-0">
+          <h2 className="font-semibold flex items-center gap-2">
+            <Link2 className="w-4 h-4 text-accent" />
+            URL → черновик
+          </h2>
+          <button onClick={handleClose} className="btn-ghost p-1.5 rounded-lg">
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+
+        {/* Контент */}
+        <div className="flex flex-col gap-4 p-5 overflow-y-auto">
+
+          {/* Инпут URL */}
+          <div>
+            <label className="label">Ссылка на статью, YouTube-видео или Telegram-пост</label>
+            <div className="relative">
+              <div className={`absolute left-3 top-1/2 -translate-y-1/2 ${srcColor}`}>
+                <SrcIcon className="w-4 h-4" />
+              </div>
+              <input
+                type="url"
+                className="input pl-9 pr-3"
+                placeholder="https://..."
+                value={url}
+                onChange={e => { setUrl(e.target.value); setResult(null); setError(''); }}
+                disabled={loading}
+                onKeyDown={e => e.key === 'Enter' && !loading && generate()}
+              />
+            </div>
+            {url && (
+              <p className="hint mt-1">Источник: {srcLabel}</p>
+            )}
+          </div>
+
+          {/* Кнопка генерации */}
+          {!result && (
+            <button
+              onClick={generate}
+              disabled={loading || !url.trim()}
+              className="btn-primary w-full"
+            >
+              {loading ? (
+                <><Loader2 className="w-4 h-4 animate-spin" /> Читаю и генерирую…</>
+              ) : (
+                <><Link2 className="w-4 h-4" /> Сгенерировать пост</>
+              )}
+            </button>
+          )}
+
+          {/* Ошибка */}
+          {error && (
+            <div className="card p-3 text-sm text-red-400 flex items-center gap-2">
+              <AlertCircle className="w-4 h-4 shrink-0" /> {error}
+            </div>
+          )}
+
+          {/* Результат */}
+          {result && (
+            <>
+              {result.title && (
+                <div className="text-xs text-text-mute border-l-2 border-accent/40 pl-3 py-1">
+                  Источник: {result.title}
+                </div>
+              )}
+
+              <div>
+                <label className="label">Черновик поста — отредактируй и применяй</label>
+                <textarea
+                  className="input min-h-[180px] text-sm leading-relaxed"
+                  value={edited}
+                  onChange={e => setEdited(e.target.value)}
+                  autoFocus
+                />
+                <p className="hint">{edited.length} символов</p>
+              </div>
+
+              {result.imageUrl && (
+                <div>
+                  <label className="label">Обложка из источника</label>
+                  <img
+                    src={result.imageUrl}
+                    alt=""
+                    className="w-full rounded-lg max-h-40 object-cover"
+                    referrerPolicy="no-referrer"
+                    onError={e => { e.target.style.display = 'none'; }}
+                  />
+                </div>
+              )}
+
+              <div className="flex gap-2">
+                <button onClick={apply} className="btn-primary flex-1">
+                  Применить в редактор
+                </button>
+                <button onClick={() => { setResult(null); setEdited(''); }} className="btn-ghost">
+                  Заново
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

lib/engine.js

@@ -74,6 +74,22 @@ export const engine = {
     const qs = new URLSearchParams(params).toString();
     return call(`/api/calendar${qs ? '?' + qs : ''}`, { userId });
   },
+  // Metrics
+  getChannelMetrics: (channelId, params = {}) => {
+    const qs = new URLSearchParams(params).toString();
+    return call(`/api/metrics/channel/${channelId}${qs ? '?' + qs : ''}`);
+  },
+  getBestTime: (channelId, params = {}) => {
+    const qs = new URLSearchParams(params).toString();
+    return call(`/api/metrics/best-time/${channelId}${qs ? '?' + qs : ''}`);
+  },
+  getUserPostMetrics: (userId, channelId, params = {}) => {
+    const qs = new URLSearchParams(params).toString();
+    return call(`/api/metrics/user-posts/${channelId}${qs ? '?' + qs : ''}`, { userId });
+  },
+  collectMetrics: () => call('/api/metrics/collect', { method: 'POST' }),
+  generateFromUrl: (userId, data) => call('/api/generate/from-url', { userId, method: 'POST', body: data }),
+
   updateUserPostSchedule: (userId, id, scheduledAt) =>
     call(`/api/user-posts/${id}`, { userId, method: 'PATCH', body: { scheduled_at: scheduledAt } }),
 };