@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/lib/video-tabs.ts

@@ -0,0 +1,118 @@
+/* The contents of the list in groups (tabs of the overview) and each one's order.
+   Each video falls into one group only:
+     scheduled   — publication scheduled and waiting (or publishing now through the scheduler)
+     published   — has a link/id on some platform, no schedule waiting
+     finished    — whole pipeline ready (export), nothing published or scheduled;
+                   a schedule that failed or missed its time also stays here, on top
+     processing  — the rest: a stage is missing, running, queued or waiting for the user
+     archived    — archived by hand (archived.json), whatever the state */
+
+import { toMs } from "./format";
+import type { Queue, Session, VideoSummary } from "../types/api";
+
+export type VideoTab = "processing" | "finished" | "scheduled" | "published" | "archived";
+export const VIDEO_TABS: { id: VideoTab; name: string; empty: string }[] = [
+  { id: "processing", name: "Em processamento", empty: "Nada em produção agora." },
+  { id: "finished", name: "Finalizados", empty: "Nenhum vídeo pronto esperando para ser publicado." },
+  { id: "scheduled", name: "Agendados", empty: "Nada agendado. Agende na etapa Publicar de um vídeo." },
+  { id: "published", name: "Publicados", empty: "Nada publicado ainda." },
+  {
+    id: "archived",
+    name: "Arquivados",
+    empty: "Nenhum vídeo arquivado. Arquive pelo botão no fim da linha de cada vídeo.",
+  },
+];
+
+/* the work tabs, in the order they open by themselves (the first with a video); never the archive */
+export const WORK_TABS = VIDEO_TABS.filter(t => t.id !== "archived");
+
+export const PUBLISH_PLATFORMS = ["youtube", "instagram", "tiktok"] as const;
+
+/* where the video is already live (has an id), in the fixed platform order */
+export const livePlatforms = (v: VideoSummary) => PUBLISH_PLATFORMS.filter(p => v.publication?.[p]?.id);
+
+/* the content's carousel is already on Instagram; ready = slides up to date, without warnings */
+export const carouselLive = (v: VideoSummary) => !!v.carousel?.publication?.instagram?.id;
+const carouselReady = (v: VideoSummary) => !!v.carousel?.stages.find(s => s.id === "composition")?.ok;
+/* everything the content delivers is ready to publish */
+export const contentReady = (v: VideoSummary) =>
+  (v.deliverables ?? ["video"]).every(e => (e === "video" ? !!v.status?.ready : carouselReady(v)));
+
+/* the schedule that will still go up: waiting for the time or publishing now */
+export function activeSchedule(v: VideoSummary) {
+  const s = v.publication?.schedule;
+  return s && (s.state === "scheduled" || s.state === "publishing") ? s : null;
+}
+
+/* the schedule that did not go up (failed or missed) or the last attempt with an error */
+function needsAttention(v: VideoSummary) {
+  const s = v.publication?.schedule;
+  if (s && (s.state === "failed" || s.state === "missed")) return true;
+  return PUBLISH_PLATFORMS.some(p => {
+    const x = v.publication?.[p];
+    return !!x?.last_error && (!x.published_at || x.last_error.at > x.published_at);
+  });
+}
+
+export function tabOf(v: VideoSummary): VideoTab {
+  if (v.archived) return "archived";
+  if (activeSchedule(v)) return "scheduled";
+  if (livePlatforms(v).length || carouselLive(v)) return "published";
+  return contentReady(v) ? "finished" : "processing";
+}
+
+/* Scheduled and Published pick the order: by posting (groupVideos') or by video creation */
+export type SortOrder = "posted" | "created";
+export const SORT_ORDERS: { value: SortOrder; label: string }[] = [
+  { value: "posted", label: "Data de postagem" },
+  { value: "created", label: "Data de criação" },
+];
+/* the most recently created first */
+export const byCreation = (list: VideoSummary[]) =>
+  [...list].sort((a, b) => b.created - a.created || b.slug.localeCompare(a.slug));
+
+/* the most recent publication across platforms */
+const lastPublishedAt = (v: VideoSummary) =>
+  Math.max(
+    0,
+    ...livePlatforms(v).map(p => toMs(v.publication?.[p]?.published_at) ?? 0),
+    toMs(v.carousel?.publication?.instagram?.published_at) ?? 0,
+  );
+
+const byUpdated = (a: VideoSummary, b: VideoSummary) => b.updated - a.updated || b.slug.localeCompare(a.slug);
+
+export function groupVideos(
+  videos: VideoSummary[],
+  queue: Queue | null,
+  sessions: Session[] | null,
+): Record<VideoTab, VideoSummary[]> {
+  /* what is happening now: 0 running, 1 waiting for the user, 2 queued, 3 the rest */
+  const priority = (v: VideoSummary) => {
+    const session = sessions?.find(s => s.type === "video" && s.target === v.slug);
+    if (queue?.running.some(t => t.dir === v.dir) || session?.state === "running") return 0;
+    if (v.scenes_approval?.status === "pending" || v.script_approval?.status === "pending") return 1;
+    if (queue?.waiting.some(t => t.dir === v.dir)) return 2;
+    return 3;
+  };
+
+  const groups: Record<VideoTab, VideoSummary[]> = {
+    processing: [],
+    finished: [],
+    scheduled: [],
+    published: [],
+    archived: [],
+  };
+  for (const v of videos) groups[tabOf(v)].push(v);
+
+  groups.processing.sort((a, b) => priority(a) - priority(b) || byUpdated(a, b));
+  groups.finished.sort((a, b) => Number(needsAttention(b)) - Number(needsAttention(a)) || byUpdated(a, b));
+  /* what goes up first on top */
+  groups.scheduled.sort(
+    (a, b) => (toMs(activeSchedule(a)!.when) ?? 0) - (toMs(activeSchedule(b)!.when) ?? 0) || byUpdated(a, b),
+  );
+  /* the newest first */
+  groups.published.sort((a, b) => lastPublishedAt(b) - lastPublishedAt(a) || byUpdated(a, b));
+  /* the last archived first */
+  groups.archived.sort((a, b) => (toMs(b.archived) ?? 0) - (toMs(a.archived) ?? 0) || b.slug.localeCompare(a.slug));
+  return groups;
+}

package/studio/web/lib/voice-profile-draft.ts

@@ -0,0 +1,34 @@
+/* The draft of a voice being edited (EditVoiceDialog): name, provider order and each provider's
+   Voice ID, and what "Salvar voz" sends from it. */
+
+import type { VoiceProfile } from "../types/api";
+import { ALL_VOICE_PROVIDERS, type VoiceProviderId } from "./providers";
+
+export type ProfileDraft = { name: string; order: VoiceProviderId[]; ids: Record<VoiceProviderId, string> };
+
+export const draftFromProfile = (p: VoiceProfile | undefined, voiceStudioProfile: string | null): ProfileDraft =>
+  p
+    ? {
+        name: p.name,
+        order: p.order.filter((x): x is VoiceProviderId => ALL_VOICE_PROVIDERS.includes(x as VoiceProviderId)),
+        ids: {
+          fish: p.fish ?? "",
+          cartesia: p.cartesia ?? "",
+          voicestudio: p.voicestudio ?? "",
+          elevenlabs: p.elevenlabs ?? "",
+        },
+      }
+    : { name: "", order: [], ids: { fish: "", cartesia: "", voicestudio: voiceStudioProfile ?? "", elevenlabs: "" } };
+
+/* the Voice IDs "Salvar voz" sends: only the checked providers keep theirs, the others go empty */
+export const savedIds = (r: ProfileDraft) =>
+  Object.fromEntries(ALL_VOICE_PROVIDERS.map(p => [p, r.order.includes(p) ? r.ids[p].trim() : ""]));
+
+/* the cards: the checked ones in priority order, then the rest */
+export const cardOrder = (order: VoiceProviderId[]) => [
+  ...order,
+  ...ALL_VOICE_PROVIDERS.filter(p => !order.includes(p)),
+];
+
+/* the checked providers still without a Voice ID */
+export const missingIds = (r: ProfileDraft) => r.order.filter(p => !r.ids[p].trim());

package/studio/web/lib/voice-profiles.ts

@@ -0,0 +1,3 @@
+/* voice profile name length */
+export const NAME_MIN = 3;
+export const NAME_MAX = 20;

package/studio/web/main.tsx

@@ -0,0 +1,14 @@
+import { createRoot } from "react-dom/client";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { RouterProvider } from "@tanstack/react-router";
+import { connectSseToQueries, queryClient } from "./lib/query-client";
+import { router } from "./router";
+
+/* one EventSource for the page, feeding the query cache */
+connectSseToQueries();
+
+createRoot(document.getElementById("root")!).render(
+  <QueryClientProvider client={queryClient}>
+    <RouterProvider router={router} />
+  </QueryClientProvider>,
+);

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

@@ -0,0 +1,123 @@
+/* The admin panel: settings that hold for every user of the studio, local or hosted (services/admin.ts).
+   Omni: on or off, the engine, the voice, the voice model and the OpenRouter model. Each choice saves on
+   its own; every open page follows it, and a conversation on the old engine, or with Omni off, ends. */
+
+import { useEffect, useState } from "react";
+import { Panel } from "../../components/ui/panel";
+import { Picker } from "../../components/ui/picker";
+import { Switch } from "../../components/ui/switch";
+import { SettingRow } from "../../components/SettingRow";
+import { ResultMessage } from "../../components/ResultMessage";
+import { useAdmin } from "../../hooks/useAdmin";
+import { api, send, type ActionResult } from "../../lib/api";
+import { invalidate, queryKeys } from "../../lib/query-client";
+import { FISH_MODELS, FISH_VOICES, GROK_VOICES, OMNI_ENGINES, OMNI_LLMS } from "../../../shared/omni-admin";
+import type { OmniAdminSettings } from "../../types/api";
+
+export function AdminPage() {
+  const { info, error } = useAdmin();
+  const [result, setResult] = useState<ActionResult>(null);
+  const [saving, setSaving] = useState(false);
+  useEffect(() => {
+    document.title = "Admin · Omni";
+  }, []);
+  if (error) return <p className="response error">{error}</p>;
+  if (!info) return <p className="hint">Carregando…</p>;
+  if (!info.admin || !info.omni)
+    return (
+      <div className="page admin-page">
+        <header className="header">
+          <h1>Admin</h1>
+        </header>
+        <p className="intro">Só o admin abre este painel{info.email ? ` (você entrou como ${info.email})` : ""}.</p>
+      </div>
+    );
+  const omni = info.omni;
+  const cascade = omni.engine !== "grok";
+
+  const change = async (c: Partial<OmniAdminSettings>) => {
+    setSaving(true);
+    setResult(null);
+    const r = await send(api.admin.omni.$post({ json: c }));
+    setSaving(false);
+    setResult(r.ok ? { ok: true, output: r.output } : { ok: false, error: r.error });
+    await invalidate(queryKeys.admin, queryKeys.agent);
+  };
+
+  const voices = cascade ? FISH_VOICES : GROK_VOICES;
+  return (
+    <div className="page admin-page">
+      <header className="header">
+        <h1>Admin</h1>
+      </header>
+      <p className="intro">O que muda aqui vale para todos os usuários do studio, na hora.</p>
+      <Panel title="Omni">
+        <SettingRow label="Omni" help="Desligada, some para todos e as conversas abertas terminam">
+          <label className="toggle-switch">
+            <Switch
+              checked={omni.enabled}
+              disabled={saving}
+              onCheckedChange={enabled => change({ enabled })}
+              aria-label="Omni ligada"
+            />
+            <span>{omni.enabled ? "Ligada" : "Desligada"}</span>
+          </label>
+        </SettingRow>
+        <SettingRow label="Engine" help={OMNI_ENGINES.find(e => e.id === omni.engine)?.hint}>
+          <Picker
+            aria-label="Engine"
+            value={omni.engine}
+            disabled={saving}
+            onChange={engine => change({ engine: engine as OmniAdminSettings["engine"] })}
+            options={OMNI_ENGINES.map(e => ({ value: e.id, label: e.label }))}
+          />
+        </SettingRow>
+        <SettingRow label="Voz" help={cascade ? "Voz da Fish, na cascata" : "Voz do Grok"}>
+          <Picker
+            aria-label="Voz"
+            value={omni.voice}
+            disabled={saving}
+            onChange={voice => change({ voice })}
+            options={[
+              ...(voices.some(v => v.id === omni.voice) ? [] : [{ value: omni.voice, label: omni.voice }]),
+              ...voices.map(v => ({ value: v.id, label: v.label })),
+            ]}
+          />
+        </SettingRow>
+        <SettingRow
+          label="Modelo de voz"
+          help={cascade ? "Quem fala a resposta, na cascata" : "No Grok, a voz é do próprio Grok Voice"}
+        >
+          <Picker
+            aria-label="Modelo de voz"
+            value={omni.fish_model}
+            disabled={saving || !cascade}
+            onChange={fish_model => change({ fish_model })}
+            options={[
+              ...(FISH_MODELS.some(m => m.id === omni.fish_model)
+                ? []
+                : [{ value: omni.fish_model, label: omni.fish_model }]),
+              ...FISH_MODELS.map(m => ({ value: m.id, label: m.label })),
+            ]}
+          />
+        </SettingRow>
+        <SettingRow
+          label="Modelo (OpenRouter)"
+          help={cascade ? "Quem pensa a resposta, na cascata" : "No Grok, quem pensa é o próprio Grok"}
+        >
+          <Picker
+            aria-label="Modelo do OpenRouter"
+            value={omni.llm}
+            disabled={saving || !cascade}
+            onChange={llm => change({ llm })}
+            options={[
+              ...(OMNI_LLMS.some(m => m.id === omni.llm) ? [] : [{ value: omni.llm, label: omni.llm }]),
+              ...OMNI_LLMS.map(m => ({ value: m.id, label: m.label })),
+            ]}
+          />
+        </SettingRow>
+        <ResultMessage result={result} />
+      </Panel>
+    </div>
+  );
+}

package/studio/web/pages/AgentPage/components/Measurements.tsx

@@ -0,0 +1,102 @@
+/* What the MVP measures, over every conversation so far (.agent/log.jsonl): latency to the first
+   audio, minutes and cost, tool calls and the 👍/👎 per reply; then the same per way of talking
+   (Grok, cascade by streaming or by utterance), to compare them. */
+
+import type { AgentModeStats, AgentStats } from "../../../types/api";
+
+const usd = (v: number) => (v < 0.01 && v > 0 ? "< US$ 0,01" : `US$ ${v.toFixed(2).replace(".", ",")}`);
+const sec = (ms: number | null) => (ms == null ? "—" : `${(ms / 1000).toFixed(2).replace(".", ",")} s`);
+
+export function Measurements({ stats }: { stats: AgentStats }) {
+  const votes = stats.thumbs_up + stats.thumbs_down;
+  const items = [
+    {
+      label: "Conversas",
+      value: String(stats.sessions),
+      hint: `${stats.minutes.toLocaleString("pt-BR")} min no total`,
+    },
+    {
+      label: "Latência mediana",
+      value: sec(stats.latency_p50_ms),
+      hint: `90% abaixo de ${sec(stats.latency_p90_ms)} · ${stats.turns} respostas`,
+    },
+    {
+      label: "Custo",
+      value: usd(stats.voice_cost_usd + stats.classify_cost_usd),
+      hint: `voz ${usd(stats.voice_cost_usd)} · classificação ${usd(stats.classify_cost_usd)}`,
+    },
+    {
+      label: "Aprovação",
+      value: votes ? `${Math.round((stats.thumbs_up / votes) * 100)}%` : "—",
+      hint: `${stats.thumbs_up} 👍 · ${stats.thumbs_down} 👎`,
+    },
+    {
+      label: "Ferramentas",
+      value: String(stats.tool_calls),
+      hint: stats.tool_errors ? `${stats.tool_errors} com erro` : "nenhum erro",
+    },
+  ];
+  return (
+    <>
+      <section className="omni-stats" aria-label="Medições">
+        {items.map(i => (
+          <div key={i.label} className="omni-stat">
+            <span className="subtle">{i.label}</span>
+            <strong>{i.value}</strong>
+            <span className="hint">{i.hint}</span>
+          </div>
+        ))}
+      </section>
+      <ByMode rows={stats.by_mode ?? []} />
+    </>
+  );
+}
+
+const MODE_NAME: Record<AgentModeStats["mode"], string> = {
+  grok: "Grok",
+  stream: "Cascata · streaming",
+  chunks: "Cascata · trechos",
+};
+/* below a cent per minute the 2-decimal format hides the difference between the modes */
+const perMin = (v: number | null) => (v == null ? "—" : `US$ ${v.toFixed(v < 0.01 ? 4 : 3).replace(".", ",")}`);
+
+function ByMode({ rows }: { rows: AgentModeStats[] }) {
+  const used = rows.filter(r => r.sessions > 0);
+  if (!used.length) return null;
+  return (
+    <section className="omni-by-mode" aria-label="Por modo">
+      <h3>Por modo</h3>
+      <table className="table">
+        <thead>
+          <tr>
+            <th>Modo</th>
+            <th>Conversas</th>
+            <th>Minutos</th>
+            <th>Latência mediana</th>
+            <th>90% abaixo de</th>
+            <th>Custo</th>
+            <th>Custo por minuto</th>
+            <th>Aprovação</th>
+          </tr>
+        </thead>
+        <tbody>
+          {used.map(r => {
+            const votes = r.thumbs_up + r.thumbs_down;
+            return (
+              <tr key={r.mode}>
+                <td>{MODE_NAME[r.mode]}</td>
+                <td>{r.sessions}</td>
+                <td>{r.minutes.toLocaleString("pt-BR")}</td>
+                <td>{sec(r.latency_p50_ms)}</td>
+                <td>{sec(r.latency_p90_ms)}</td>
+                <td>{usd(r.cost_usd)}</td>
+                <td>{perMin(r.cost_per_min_usd)}</td>
+                <td>{votes ? `${Math.round((r.thumbs_up / votes) * 100)}% (${votes})` : "—"}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </section>
+  );
+}

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

@@ -0,0 +1,28 @@
+/* /agent: what the Omni MVP measures across every conversation (latency, minutes and cost, tools,
+   👍/👎). Omni itself opens from the sidebar button on every screen (components/Omni/OmniWidget). */
+
+import { useEffect } from "react";
+import { useAgentInfo } from "../../hooks/useOmniAgent";
+import { Measurements } from "./components/Measurements";
+
+export function AgentPage() {
+  const { info, error } = useAgentInfo();
+  useEffect(() => {
+    document.title = "Omni · Omni";
+  }, []);
+  return (
+    <div className="page agent-page">
+      <header className="header">
+        <h1>
+          <em>Omni</em>, o agente de voz
+        </h1>
+      </header>
+      <p className="intro">
+        O Omni fica no canto inferior direito de todas as telas. Aqui ficam as medições de todas as conversas: quanto
+        ele demora para começar a responder, quanto custou, quantas ferramentas chamou e como você avaliou as respostas.
+      </p>
+      {error && <p className="response error">{error}</p>}
+      {info && <Measurements stats={info.stats} />}
+    </div>
+  );
+}

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

@@ -0,0 +1,52 @@
+/* channel: what is explanation stays in the footer, closed */
+
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../../components/ui/accordion";
+import { METRICS, type MetricId } from "../../../lib/analytics-metrics";
+import type { ReelMetrics } from "../../../types/api";
+import { ReelThumb } from "./ReelThumb";
+
+export function About({ removed }: { removed: ReelMetrics[] }) {
+  const judged = (Object.keys(METRICS) as MetricId[]).filter(id => METRICS[id].judges);
+  return (
+    <Accordion type="multiple" className="footer-accordion">
+      <AccordionItem value="metrics">
+        <AccordionTrigger>O que cada métrica julga</AccordionTrigger>
+        <AccordionContent>
+          <table className="table">
+            <tbody>
+              {judged.map(id => (
+                <tr key={id}>
+                  <td>{METRICS[id].name}</td>
+                  <td className="subtle">
+                    {METRICS[id].judges}
+                    {METRICS[id].lowerIsBetter ? " · menos é melhor" : ""}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          <p className="hint">
+            As setas comparam com a mediana do canal na leitura atual, com idades diferentes: a comparação firme é na
+            mesma idade (24 h e 72 h, na página de cada Reel). No terminal: <code>node tools/metrics.mjs show</code>.
+          </p>
+        </AccordionContent>
+      </AccordionItem>
+      {removed.length > 0 && (
+        <AccordionItem value="removed">
+          <AccordionTrigger>Reels fora da conta ({removed.length})</AccordionTrigger>
+          <AccordionContent>
+            <p className="hint">Foram removidos do Instagram (a API não acha mais) e ficam fora das médias:</p>
+            <ul className="simple-list">
+              {removed.map(r => (
+                <li key={r.slug} className="reel-with-thumb">
+                  <ReelThumb r={r} />
+                  {r.title ?? r.slug}
+                </li>
+              ))}
+            </ul>
+          </AccordionContent>
+        </AccordionItem>
+      )}
+    </Accordion>
+  );
+}

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

@@ -0,0 +1,106 @@
+/* channel: the metric cards */
+
+import {
+  DAY_MS,
+  METRICS,
+  fmtDay,
+  fmtNum,
+  fmtPct,
+  fmtSec,
+  median,
+  metricValue,
+  variation,
+  type MetricId,
+} from "../../../lib/analytics-metrics";
+import type { AccountSnapshot, ReelMetrics } from "../../../types/api";
+import { MetricCard } from "./MetricCard";
+
+export function ChannelCards({
+  account,
+  reels,
+  before,
+}: {
+  account: AccountSnapshot[];
+  reels: ReelMetrics[];
+  before: { skip_3s_pct: [number, number] } | null;
+}) {
+  const snapshots = [...account].sort((a, b) => a.day.localeCompare(b.day));
+  const last = snapshots.at(-1);
+  const prev = snapshots.at(-2);
+  const now = Date.now();
+  const read = reels.filter(r => r.current);
+  const inWindow = (from: number, to: number) =>
+    read.filter(r => {
+      const t = Date.parse(r.published_at);
+      return t >= now - to && t < now - from;
+    });
+  const week = inWindow(0, 7 * DAY_MS);
+  const prevWeek = inWindow(7 * DAY_MS, 14 * DAY_MS);
+  const sum = (rs: ReelMetrics[]) => rs.reduce((a, r) => a + (r.current?.views ?? 0), 0);
+  const recent = [...read].sort((a, b) => b.published_at.localeCompare(a.published_at));
+  const medianOf = (rs: ReelMetrics[], id: MetricId) =>
+    median(rs.map(r => metricValue(r, id)).filter((v): v is number => v != null));
+  const last5 = recent.slice(0, 5),
+    prev5 = recent.slice(5, 10);
+  const skip = medianOf(last5, "skip"),
+    skipPrev = prev5.length >= 3 ? medianOf(prev5, "skip") : null;
+  const watched = medianOf(last5, "watched"),
+    watchedPrev = prev5.length >= 3 ? medianOf(prev5, "watched") : null;
+  const diff =
+    last && prev && last.followers != null && prev.followers != null ? last.followers - prev.followers : null;
+  return (
+    <div className="metric-cards">
+      <MetricCard
+        description="Seguidores"
+        value={fmtNum(last?.followers)}
+        trend={
+          diff == null
+            ? null
+            : {
+                text: `${diff > 0 ? "+" : ""}${fmtNum(diff)}`,
+                up: diff >= 0,
+                good: diff > 0 ? true : diff < 0 ? false : null,
+              }
+        }
+        line={`${fmtNum(last?.profile_visits_day)} visitas ao perfil hoje`}
+        dimmed={
+          prev ? `contra ${fmtNum(prev.followers)} em ${fmtDay(prev.day)}` : "a variação aparece com a foto de amanhã"
+        }
+      />
+      <MetricCard
+        description="Views em 7 dias"
+        value={fmtNum(sum(week))}
+        trend={prevWeek.length ? variation(sum(week), sum(prevWeek)) : null}
+        line={`${week.length} ${week.length === 1 ? "Reel publicado" : "Reels publicados"} na semana`}
+        dimmed={
+          prevWeek.length
+            ? `contra ${fmtNum(sum(prevWeek))} na semana anterior`
+            : "sem Reel na semana anterior para comparar"
+        }
+        hint="A soma das views de hoje dos Reels publicados nos últimos 7 dias."
+      />
+      <MetricCard
+        description="Pulam em 3 s"
+        value={fmtPct(skip)}
+        trend={variation(skip, skipPrev, true, true)}
+        line={`mediana dos últimos ${last5.length} Reels · quanto menor, melhor`}
+        dimmed={
+          before
+            ? `antes do OmniVideo: ${fmtNum(before.skip_3s_pct[0])}–${fmtNum(before.skip_3s_pct[1])}%`
+            : skipPrev != null
+              ? `contra ${fmtPct(skipPrev)} nos 5 anteriores`
+              : undefined
+        }
+        hint={`Julga ${METRICS.skip.judges}. A seta compara com a mediana dos 5 Reels anteriores.`}
+      />
+      <MetricCard
+        description="% assistido"
+        value={fmtPct(watched)}
+        trend={variation(watched, watchedPrev, false, true)}
+        line={`mediana dos últimos ${last5.length} Reels`}
+        dimmed={`${fmtSec(medianOf(last5, "watched_s"))} assistidos em média`}
+        hint={`Julga ${METRICS.watched.judges}: o tempo médio assistido dividido pela duração do vídeo publicado.`}
+      />
+    </div>
+  );
+}