@crievo/omni 0.0.0-stage → 0.1.0

package/studio/web/pages/AnalyticsPage/components/ReelView.tsx

@@ -0,0 +1,290 @@
+/* one Reel (/analytics/$slug) */
+
+import { Fragment, useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { ArrowRight, ArrowUpRight, Sparkle } from "../../../components/icons";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../../components/ui/accordion";
+import { Skeleton } from "../../../components/ui/skeleton";
+import { useReel } from "../../../hooks/useAnalytics";
+import { useSessionFor } from "../../../hooks/useSessions";
+import { api, send, type ActionResult } from "../../../lib/api";
+import {
+  ALL_METRICS,
+  METRICS,
+  MILESTONES,
+  MILESTONE_LABEL,
+  REEL_TABS,
+  fmtAge,
+  fmtNum,
+  fmtPct,
+  fmtSec,
+  shortLabel,
+  variation,
+  type MetricId,
+  type ReelTab,
+} from "../../../lib/analytics-metrics";
+import { timeAgo } from "../../../lib/format";
+import type { MetricsSnapshot } from "../../../types/api";
+import { Diagnosis } from "./Diagnosis";
+import { HourlyWave } from "./HourlyWave";
+import { MetricCard } from "./MetricCard";
+import { ReelThumb } from "./ReelThumb";
+import { SegmentedControl } from "./SegmentedControl";
+import { VsMedian } from "./VsMedian";
+
+export function ReelView({ slug }: { slug: string }) {
+  const { reel, error } = useReel(slug);
+  const [tab, setTab] = useState<ReelTab>("diagnosis");
+  const [requesting, setRequesting] = useState(false);
+  const [result, setResult] = useState<ActionResult>(null);
+  const analyzing = useSessionFor("analysis", "channel")?.state === "running";
+  /* the Reel also has `error` (the last reading that failed): what tells the page failure apart is the slug */
+  const r = reel && "slug" in reel ? reel : null;
+  const pageError = reel && !("slug" in reel) ? reel.error : null;
+  const m = r?.medians.current ?? null;
+  const a = r?.current ?? null;
+  const snapshots = r
+    ? MILESTONES.map(name => r.snapshots.find(s => s.milestone === name)).filter((s): s is MetricsSnapshot => !!s)
+    : [];
+  const analyze = async () => {
+    setRequesting(true);
+    setResult(null);
+    const x = await send(api.analytics.analyze.$post({ json: { slug } }));
+    setRequesting(false);
+    setResult(x);
+    if (x.ok) setTab("diagnosis");
+  };
+  const medianOf = (id: MetricId) => {
+    const key = METRICS[id].median;
+    return key ? (m?.[key] ?? null) : null;
+  };
+  const vsMedian = (id: MetricId, inPoints = false) =>
+    a ? variation(METRICS[id].of(a), medianOf(id), !!METRICS[id].lowerIsBetter, inPoints) : null;
+  const medianText = (id: MetricId) => {
+    const v = medianOf(id);
+    return v == null ? undefined : `mediana do canal: ${METRICS[id].fmt(v)}`;
+  };
+  const reading = a ? `leitura com ${fmtAge(a.age_h)} no ar` : undefined;
+  return (
+    <div className="page analytics-page">
+      <nav className="trail" aria-label="Trilha">
+        <Link to="/" className="subtle-link">
+          Dashboard
+        </Link>
+        <span className="subtle">/</span>
+        <span className="trail-current">{shortLabel(r?.title ?? slug, 60)}</span>
+      </nav>
+      <header className="header analytics-header">
+        {r && <ReelThumb r={r} size="l" />}
+        <div className="analytics-title">
+          <h1>{r?.title ?? slug}</h1>
+          {r && (
+            <span className="row-status subtle">
+              Publicado {timeAgo(r.published_at)}
+              {r.duration_s ? ` · ${fmtSec(r.duration_s)} de vídeo` : ""}
+              {r.pillar ? ` · ${r.pillar}` : ""}
+              {r.goal ? ` · objetivo: ${r.goal}` : ""}
+              {a ? ` · última leitura ${timeAgo(a.at)}` : ""}
+            </span>
+          )}
+        </div>
+        <span className="header-action analytics-actions">
+          {r?.url && (
+            <a className="button" href={r.url} target="_blank" rel="noreferrer">
+              Instagram <ArrowUpRight className="ic" />
+            </a>
+          )}
+          <Link to="/videos/$slug" params={{ slug }} className="button">
+            Abrir o vídeo
+          </Link>
+          <button className="button primary" disabled={requesting || analyzing} onClick={analyze}>
+            <Sparkle className="ic" /> {analyzing ? "Analisando…" : requesting ? "Pedindo…" : "Analisar este Reel"}
+          </button>
+        </span>
+      </header>
+      {(error || pageError) && <p className="response error">{error ?? pageError}</p>}
+      {result && <p className={`response ${result.ok ? "ok" : "error"}`}>{result.ok ? result.output : result.error}</p>}
+      {!reel && !error && (
+        <div className="metric-cards">
+          {[0, 1, 2, 3].map(i => (
+            <div key={i} className="metric-card">
+              <Skeleton style={{ height: 70 }} />
+            </div>
+          ))}
+        </div>
+      )}
+
+      {r && (
+        <>
+          <div className="metric-cards">
+            <MetricCard
+              description="Views"
+              value={fmtNum(a?.views)}
+              trend={vsMedian("views")}
+              line={medianText("views")}
+              dimmed={reading}
+              hint="Comparado com a mediana do canal na leitura atual."
+            />
+            <MetricCard
+              description="Pulam em 3 s"
+              value={fmtPct(a?.skip_3s_pct)}
+              trend={vsMedian("skip", true)}
+              line={medianText("skip")}
+              dimmed={reading}
+              hint={`Julga ${METRICS.skip.judges}. Menos é melhor.`}
+            />
+            <MetricCard
+              description="% assistido"
+              value={fmtPct(a?.watched_pct)}
+              trend={vsMedian("watched", true)}
+              line={medianText("watched")}
+              dimmed={a ? `${fmtSec(a.avg_watch_s)} de ${fmtSec(r.duration_s)}` : undefined}
+              hint={`Julga ${METRICS.watched.judges}.`}
+            />
+            <MetricCard
+              description="Salvos por mil views"
+              value={a ? fmtNum(METRICS.saves_per_k.of(a), 1) : "—"}
+              trend={vsMedian("saves_per_k")}
+              line={medianText("saves_per_k")}
+              dimmed={a ? `${fmtNum(a.saves)} salvos` : undefined}
+              hint={`Julga ${METRICS.saves_per_k.judges}.`}
+            />
+          </div>
+
+          <HourlyWave hourly={r.hourly} published={r.published_at} />
+
+          <section className="panel card-tabs">
+            <SegmentedControl options={REEL_TABS} value={tab} onChange={setTab} label="Seções do Reel" />
+            {tab === "diagnosis" && <Diagnosis text={r.analysis_text} slug={slug} />}
+            {tab === "opening" && (
+              <div className="tab-content opening-grid">
+                {r.opening ? (
+                  <img
+                    className="reel-opening"
+                    src={`/media/${encodeURIComponent(slug)}/analysis/opening.png?v=${r.analysis?.at ?? ""}`}
+                    alt="Quadros da abertura em 0; 0,5; 1; 2 e 3 s"
+                  />
+                ) : (
+                  <div className="chart-empty">A folha dos primeiros 3 s sai na análise do Reel.</div>
+                )}
+                <dl className="data">
+                  <dt>Primeira frase</dt>
+                  <dd>{r.hook?.line ?? r.first_line ?? "—"}</dd>
+                  <dt>Quadro 0</dt>
+                  <dd>{r.hook?.frame0 ?? <span className="subtle">o roteiro não diz</span>}</dd>
+                  <dt>Texto na tela</dt>
+                  <dd>{r.hook?.text ?? <span className="subtle">o roteiro não diz</span>}</dd>
+                  {r.hook?.type && (
+                    <>
+                      <dt>Tipo</dt>
+                      <dd>{r.hook.type}</dd>
+                    </>
+                  )}
+                  {a && (
+                    <>
+                      <dt>Pulam em 3 s</dt>
+                      <dd>
+                        {fmtPct(a.skip_3s_pct)}
+                        <VsMedian value={a.skip_3s_pct} id="skip" medians={m} />
+                      </dd>
+                    </>
+                  )}
+                </dl>
+              </div>
+            )}
+            {tab === "milestones" && (
+              <div className="tab-content">
+                {snapshots.length ? (
+                  <div className="scroll-x">
+                    <table className="table">
+                      <thead>
+                        <tr>
+                          <th>Marco</th>
+                          <th className="num">Views</th>
+                          <th className="num">Pulam em 3 s</th>
+                          <th className="num">Assistido</th>
+                          <th className="num">Salvos</th>
+                          <th className="num">Compart.</th>
+                          <th className="num">Coment.</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {snapshots.map(s => (
+                          <tr key={s.milestone}>
+                            <td>
+                              {MILESTONE_LABEL[s.milestone!]} <span className="subtle">({fmtAge(s.age_h)})</span>
+                            </td>
+                            <td className="num">{fmtNum(s.views)}</td>
+                            <td className="num">{fmtPct(s.skip_3s_pct)}</td>
+                            <td className="num">
+                              {fmtSec(s.avg_watch_s)} <span className="subtle">({fmtPct(s.watched_pct)})</span>
+                            </td>
+                            <td className="num">{fmtNum(s.saves)}</td>
+                            <td className="num">{fmtNum(s.shares)}</td>
+                            <td className="num">{fmtNum(s.comments)}</td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                ) : (
+                  <div className="chart-empty">
+                    Nenhum marco ainda. As leituras de 1 h, 3 h, 24 h, 72 h, 7 e 30 dias ficam guardadas na idade certa;
+                    Reel publicado antes da coleta só tem as de depois dela.
+                  </div>
+                )}
+              </div>
+            )}
+            {tab === "script" && (
+              <div className="tab-content">
+                {r.pillar || r.goal || r.promise || r.hook ? (
+                  <dl className="data">
+                    <dt>Pilar</dt>
+                    <dd>{r.pillar ?? "—"}</dd>
+                    <dt>Objetivo</dt>
+                    <dd>{r.goal ?? "—"}</dd>
+                    <dt>Promessa</dt>
+                    <dd>{r.promise ?? "—"}</dd>
+                    <dt>Gancho</dt>
+                    <dd>{r.hook?.line ?? "—"}</dd>
+                  </dl>
+                ) : (
+                  <div className="chart-empty">
+                    Roteiro anterior à Estratégia (pilar, objetivo e ganchos): os próximos já vêm com ela.
+                  </div>
+                )}
+                <Link to="/videos/$slug/$stage" params={{ slug, stage: "script" }} className="subtle-link">
+                  Abrir o roteiro no studio <ArrowRight className="ic" />
+                </Link>
+              </div>
+            )}
+          </section>
+
+          {a && (
+            <Accordion type="multiple" className="footer-accordion">
+              <AccordionItem value="all">
+                <AccordionTrigger>Todas as métricas</AccordionTrigger>
+                <AccordionContent>
+                  <dl className="data metrics-data">
+                    {ALL_METRICS.map(id => {
+                      const v = METRICS[id].of(a);
+                      return (
+                        <Fragment key={id}>
+                          <dt>{METRICS[id].name}</dt>
+                          <dd>
+                            {v == null ? "—" : METRICS[id].fmt(v)}
+                            <VsMedian value={v} id={id} medians={m} />
+                          </dd>
+                        </Fragment>
+                      );
+                    })}
+                  </dl>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

package/studio/web/pages/AnalyticsPage/components/ReelsTable.tsx

@@ -0,0 +1,269 @@
+/* channel: the comparison table (dashboard-01's data table) */
+
+import { useMemo, useState, type Dispatch, type SetStateAction } from "react";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { ArrowLeft, ArrowRight, Columns, X } from "../../../components/icons";
+import { Checkbox } from "../../../components/ui/checkbox";
+import { Picker } from "../../../components/ui/picker";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover";
+import { ALL, COLUMNS, PAGE_SIZE, metricValue } from "../../../lib/analytics-metrics";
+import type { Medians, ReelMetrics } from "../../../types/api";
+import { Comparison } from "./Comparison";
+import { ReelThumb } from "./ReelThumb";
+import { VsMedian } from "./VsMedian";
+
+export function ReelsTable({
+  reels,
+  medians: m,
+  selected,
+  setSelected,
+}: {
+  reels: ReelMetrics[];
+  medians: Medians | null;
+  selected: Set<string>;
+  setSelected: Dispatch<SetStateAction<Set<string>>>;
+}) {
+  const navigate = useNavigate();
+  const [search, setSearch] = useState("");
+  const [pillar, setPillar] = useState(ALL);
+  const [goal, setGoal] = useState(ALL);
+  const [visible, setVisible] = useState<Set<string>>(() => new Set(COLUMNS.filter(c => c.default).map(c => c.id)));
+  const [order, setOrder] = useState<{ id: string; desc: boolean }>({ id: "published", desc: true });
+  const [page, setPage] = useState(0);
+  const [comparing, setComparing] = useState(false);
+  const pillars = [...new Set(reels.map(r => r.pillar).filter(Boolean))] as string[];
+  const goals = [...new Set(reels.map(r => r.goal).filter(Boolean))] as string[];
+  const cols = COLUMNS.filter(c => visible.has(c.id));
+
+  const filtered = useMemo(() => {
+    const term = search.trim().toLowerCase();
+    const col = COLUMNS.find(c => c.id === order.id);
+    const val = (r: ReelMetrics) => (order.id === "title" ? (r.title ?? r.slug) : col ? col.value(r) : r.published_at);
+    return reels
+      .filter(r => !term || (r.title ?? r.slug).toLowerCase().includes(term))
+      .filter(r => !pillar || r.pillar === pillar)
+      .filter(r => !goal || r.goal === goal)
+      .sort((a, b) => {
+        const x = val(a),
+          y = val(b);
+        if (x == null) return 1;
+        if (y == null) return -1;
+        const c = typeof x === "number" && typeof y === "number" ? x - y : String(x).localeCompare(String(y));
+        return order.desc ? -c : c;
+      });
+  }, [reels, search, pillar, goal, order]);
+  const pages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
+  const current = Math.min(page, pages - 1);
+  const rows = filtered.slice(current * PAGE_SIZE, (current + 1) * PAGE_SIZE);
+  const allChecked = rows.length > 0 && rows.every(r => selected.has(r.slug));
+
+  const sortBy = (id: string) => setOrder(o => ({ id, desc: o.id === id ? !o.desc : true }));
+  /* always from the newest state: two clicks in the same frame don't cancel out */
+  const check = (slug: string, on: boolean) =>
+    setSelected(prev => {
+      const s = new Set(prev);
+      if (on) s.add(slug);
+      else s.delete(slug);
+      return s;
+    });
+  const checkPage = (on: boolean) =>
+    setSelected(prev => {
+      const s = new Set(prev);
+      for (const r of rows)
+        if (on) s.add(r.slug);
+        else s.delete(r.slug);
+      return s;
+    });
+  const header = (id: string, name: string, numeric = false) => (
+    <th
+      key={id}
+      className={numeric ? "num" : ""}
+      aria-sort={order.id === id ? (order.desc ? "descending" : "ascending") : "none"}
+    >
+      <button className="sort" onClick={() => sortBy(id)}>
+        {name}
+        <span className="order-arrow">{order.id === id ? (order.desc ? "↓" : "↑") : "↕"}</span>
+      </button>
+    </th>
+  );
+  const chosen = reels.filter(r => selected.has(r.slug));
+
+  return (
+    <div className="data-table">
+      <div className="table-bar">
+        <input
+          type="search"
+          aria-label="Buscar pelo título"
+          placeholder="Buscar pelo título…"
+          value={search}
+          onChange={e => {
+            setSearch(e.target.value);
+            setPage(0);
+          }}
+        />
+        <Picker
+          aria-label="Filtrar por pilar"
+          value={pillar}
+          onChange={v => {
+            setPillar(v);
+            setPage(0);
+          }}
+          disabled={!pillars.length}
+          title={pillars.length ? undefined : "Nenhum roteiro tem Estratégia (pilar e objetivo) ainda"}
+          options={[{ value: ALL, label: "Todos os pilares" }, ...pillars.map(p => ({ value: p, label: p }))]}
+          className="chart-picker"
+        />
+        <Picker
+          aria-label="Filtrar por objetivo"
+          value={goal}
+          onChange={v => {
+            setGoal(v);
+            setPage(0);
+          }}
+          disabled={!goals.length}
+          title={goals.length ? undefined : "Nenhum roteiro tem Estratégia (pilar e objetivo) ainda"}
+          options={[{ value: ALL, label: "Todos os objetivos" }, ...goals.map(o => ({ value: o, label: o }))]}
+          className="chart-picker"
+        />
+        <span className="push-end" />
+        {selected.size >= 2 && (
+          <button className={`button small${comparing ? "" : " primary"}`} onClick={() => setComparing(!comparing)}>
+            {comparing ? "Esconder comparação" : `Comparar ${selected.size}`}
+          </button>
+        )}
+        {selected.size > 0 && (
+          <button
+            className="button small"
+            onClick={() => {
+              setSelected(new Set());
+              setComparing(false);
+            }}
+          >
+            <X className="ic" /> Limpar seleção
+          </button>
+        )}
+        <Popover>
+          <PopoverTrigger asChild>
+            <button className="button small">
+              <Columns className="ic" /> Colunas
+            </button>
+          </PopoverTrigger>
+          <PopoverContent align="end" className="columns-popover">
+            {COLUMNS.map(c => (
+              <label key={c.id} className="row-column">
+                <Checkbox
+                  checked={visible.has(c.id)}
+                  onCheckedChange={on =>
+                    setVisible(prev => {
+                      const s = new Set(prev);
+                      if (on) s.add(c.id);
+                      else s.delete(c.id);
+                      return s;
+                    })
+                  }
+                />
+                {c.name}
+              </label>
+            ))}
+          </PopoverContent>
+        </Popover>
+      </div>
+
+      {comparing && chosen.length >= 2 && <Comparison reels={chosen} medians={m} />}
+
+      <div className="scroll-x">
+        <table className="table reels-table">
+          <thead>
+            <tr>
+              <th className="col-mark">
+                <Checkbox aria-label="Marcar os Reels desta página" checked={allChecked} onCheckedChange={checkPage} />
+              </th>
+              {header("title", "Reel")}
+              {cols.map(c => header(c.id, c.name, c.num))}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map(r => (
+              <tr
+                key={r.slug}
+                className={`clickable-row${selected.has(r.slug) ? " checked" : ""}`}
+                onClick={e => {
+                  if (!(e.target as HTMLElement).closest("button, a, input, [role=checkbox], label"))
+                    navigate({ to: "/analytics/$slug", params: { slug: r.slug } });
+                }}
+              >
+                <td className="col-mark">
+                  <Checkbox
+                    aria-label={`Marcar ${r.title ?? r.slug}`}
+                    checked={selected.has(r.slug)}
+                    onCheckedChange={on => check(r.slug, on)}
+                  />
+                </td>
+                <td>
+                  <span className="reel-with-thumb">
+                    <ReelThumb r={r} />
+                    <span>
+                      <Link to="/analytics/$slug" params={{ slug: r.slug }} className="reel-title">
+                        {r.title ?? r.slug}
+                      </Link>
+                      {r.analysis && <span className="subtle reel-sub">analisado</span>}
+                    </span>
+                  </span>
+                </td>
+                {r.current ? (
+                  cols.map(c => (
+                    <td key={c.id} className={c.num ? "num" : ""}>
+                      {c.text(r) ?? <span className="subtle">—</span>}
+                      {c.metric && <VsMedian value={metricValue(r, c.metric)} id={c.metric} medians={m} />}
+                    </td>
+                  ))
+                ) : (
+                  <td colSpan={cols.length} className="subtle">
+                    {r.error ? `Sem leitura: ${r.error.message}` : "Sem leitura ainda: o agente lê na próxima hora"}
+                  </td>
+                )}
+              </tr>
+            ))}
+            {!rows.length && (
+              <tr>
+                <td colSpan={cols.length + 2} className="subtle">
+                  Nenhum Reel com esse filtro.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+      <div className="table-footer">
+        <span className="subtle">
+          {selected.size
+            ? `${selected.size} de ${filtered.length} marcados`
+            : `${filtered.length} ${filtered.length === 1 ? "Reel" : "Reels"}`}
+        </span>
+        {pages > 1 && (
+          <span className="pagination">
+            <span className="subtle">
+              Página {current + 1} de {pages}
+            </span>
+            <button
+              className="button small"
+              disabled={current === 0}
+              onClick={() => setPage(current - 1)}
+              aria-label="Página anterior"
+            >
+              <ArrowLeft className="ic" />
+            </button>
+            <button
+              className="button small"
+              disabled={current >= pages - 1}
+              onClick={() => setPage(current + 1)}
+              aria-label="Próxima página"
+            >
+              <ArrowRight className="ic" />
+            </button>
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

package/studio/web/pages/AnalyticsPage/components/RequestWithFocus.tsx

@@ -0,0 +1,38 @@
+/* ask the agent for an analysis with a focus (of the channel, or of one Reel with `slug`) */
+
+import { useState } from "react";
+import { Sparkle } from "../../../components/icons";
+import { api, send, type ActionResult } from "../../../lib/api";
+import { useSessionFor } from "../../../hooks/useSessions";
+
+export function RequestWithFocus({ slug }: { slug?: string }) {
+  const [focus, setFocus] = useState("");
+  const [sending, setSending] = useState(false);
+  const [result, setResult] = useState<ActionResult>(null);
+  const running = useSessionFor("analysis", "channel")?.state === "running";
+  const request = async () => {
+    setSending(true);
+    setResult(null);
+    const r = await send(api.analytics.analyze.$post({ json: { slug, focus } }));
+    setSending(false);
+    setResult(r);
+    if (r.ok) setFocus("");
+  };
+  return (
+    <div className="generate-analysis">
+      <textarea
+        aria-label="Foco da análise"
+        rows={2}
+        value={focus}
+        onChange={e => setFocus(e.target.value)}
+        placeholder="O que você quer entender: por que o campeão foi bem, que gancho testar, se vale encurtar…"
+      />
+      <div className="actions">
+        <button className="button" disabled={sending || running || !focus.trim()} onClick={request}>
+          <Sparkle className="ic" /> {sending ? "Pedindo…" : "Analisar com este foco"}
+        </button>
+      </div>
+      {result && <p className={`response ${result.ok ? "ok" : "error"}`}>{result.ok ? result.output : result.error}</p>}
+    </div>
+  );
+}

package/studio/web/pages/AnalyticsPage/components/SegmentedControl.tsx

@@ -0,0 +1,35 @@
+/* tabs and toggles in the studio's segmented style */
+
+import type { ReactNode } from "react";
+import type { IconComponent } from "../../../lib/analytics-metrics";
+
+export function SegmentedControl<T extends string>({
+  options,
+  value,
+  onChange,
+  label,
+  small,
+}: {
+  options: { id: T; name: ReactNode; Icon?: IconComponent }[];
+  value: T;
+  onChange: (v: T) => void;
+  label: string;
+  small?: boolean;
+}) {
+  return (
+    <div className={`segmented${small ? " small" : ""}`} role="tablist" aria-label={label}>
+      {options.map(o => (
+        <button
+          key={o.id}
+          role="tab"
+          aria-selected={o.id === value}
+          className={o.id === value ? "active" : ""}
+          onClick={() => onChange(o.id)}
+        >
+          {o.Icon && <o.Icon aria-hidden="true" />}
+          {o.name}
+        </button>
+      ))}
+    </div>
+  );
+}

package/studio/web/pages/AnalyticsPage/components/VsMedian.tsx

@@ -0,0 +1,31 @@
+/* next to a number: above or below the channel median, lightly. Within ±10 % it's the average and
+   gets no mark; with fewer than 3 Reels the median says nothing */
+
+import { METRICS, type MetricId } from "../../../lib/analytics-metrics";
+import type { Medians } from "../../../types/api";
+
+export function VsMedian({
+  value,
+  id,
+  medians: m,
+}: {
+  value: number | null | undefined;
+  id: MetricId;
+  medians: Medians | null;
+}) {
+  const metric = METRICS[id];
+  const med = metric.median ? m?.[metric.median] : null;
+  if (value == null || med == null || !m || m.n < 3 || med === 0) return null;
+  const diff = (value - med) / med;
+  if (Math.abs(diff) < 0.1) return null;
+  const above = diff > 0;
+  const good = above !== !!metric.lowerIsBetter;
+  const strong = above ? diff >= 1 : diff <= -0.5;
+  const text = `${strong ? "muito " : ""}${above ? "acima" : "abaixo"} da mediana do canal (${metric.fmt(med)}, ${m.n} Reels)`;
+  return (
+    <span className={`compared ${good ? "ok" : "warning"}`} title={text} aria-label={text}>
+      {above ? "↑" : "↓"}
+      {strong ? (above ? "↑" : "↓") : ""}
+    </span>
+  );
+}

package/studio/web/pages/AnalyticsPage/index.tsx

@@ -0,0 +1,17 @@
+/* Analytics: the metrics of the published Reels and what the agent draws from them.
+   The numbers come from tools/analysis.mjs (over tools/metrics.mjs, which the launchd agent
+   collects every 4 hours); the analysis is the av-analysis skill, in a studio session of its own.
+   / and /analytics are the channel; /analytics/$slug, one Reel.
+
+   The layout is shadcn's dashboard-01: metric cards on top, the progression chart right below
+   (what shows without scrolling), the Reels comparison, and the rest in tabs (the comparison
+   table first). Explanations go in ⓘ or a closed accordion; no loose paragraphs. The charts are
+   shadcn's (components/ui/chart). */
+
+import { ChannelView } from "./components/ChannelView";
+import { ReelView } from "./components/ReelView";
+
+export function AnalyticsPage({ slug }: { slug?: string }) {
+  if (slug) return <ReelView slug={slug} />;
+  return <ChannelView />;
+}