@crievo/omni 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,137 @@
+/* the channel dashboard (/ and /analytics) */
+
+import { useState } from "react";
+import { ArrowClockwise, Sparkle } from "../../../components/icons";
+import { Panel } from "../../../components/ui/panel";
+import { Skeleton } from "../../../components/ui/skeleton";
+import { useAnalytics } from "../../../hooks/useAnalytics";
+import { useSessionFor } from "../../../hooks/useSessions";
+import { api, send, type ActionResult } from "../../../lib/api";
+import { CHANNEL_TABS, type ChannelTab } from "../../../lib/analytics-metrics";
+import { About } from "./About";
+import { ChannelCards } from "./ChannelCards";
+import { CollectionStatus } from "./CollectionStatus";
+import { Highlights } from "./Highlights";
+import { HookVsBody } from "./HookVsBody";
+import { Insights } from "./Insights";
+import { PlanSection } from "./PlanSection";
+import { ProgressionChart } from "./ProgressionChart";
+import { ReelBarsChart } from "./ReelBarsChart";
+import { ReelsTable } from "./ReelsTable";
+import { SegmentedControl } from "./SegmentedControl";
+
+export function ChannelView() {
+  const { data, error } = useAnalytics();
+  const [tab, setTab] = useState<ChannelTab>("reels");
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [collecting, setCollecting] = useState(false);
+  const [requesting, setRequesting] = useState(false);
+  const [result, setResult] = useState<ActionResult>(null);
+  const analyzing = useSessionFor("analysis", "channel")?.state === "running";
+  const d = data && !("error" in data) ? data : null;
+  const dataError = data && "error" in data ? data.error : null;
+  const reels = (d?.videos ?? []).filter(r => !r.removed);
+  const m = d?.medians.current ?? null;
+  const last = reels
+    .map(r => r.current?.at)
+    .filter((x): x is string => !!x)
+    .sort()
+    .at(-1);
+  const collect = async () => {
+    setCollecting(true);
+    setResult(null);
+    const r = await send(api.analytics.collect.$post({ json: {} }));
+    setCollecting(false);
+    setResult(r);
+  };
+  const generate = async () => {
+    setRequesting(true);
+    setResult(null);
+    const r = await send(api.analytics.analyze.$post({ json: {} }));
+    setRequesting(false);
+    setResult(r);
+    if (r.ok) setTab("insights");
+  };
+  return (
+    <div className="page analytics-page">
+      <header className="header analytics-header">
+        <div className="analytics-title">
+          <h1>Dashboard</h1>
+          {d && <CollectionStatus agent={d.agent} last={last} />}
+        </div>
+        <span className="header-action analytics-actions">
+          <button
+            className="button"
+            disabled={collecting}
+            onClick={collect}
+            title="Lê a API do Instagram agora (só leitura)"
+          >
+            <ArrowClockwise className="ic" /> {collecting ? "Lendo…" : "Coletar agora"}
+          </button>
+          <button
+            className="button primary"
+            disabled={requesting || analyzing}
+            onClick={generate}
+            title={
+              analyzing
+                ? "O agente já está analisando: veja na aba Insights"
+                : "O agente lê os números, os roteiros e a abertura de cada Reel e escreve insights e plano"
+            }
+          >
+            <Sparkle className="ic" /> {analyzing ? "Analisando…" : requesting ? "Pedindo…" : "Gerar análise"}
+          </button>
+        </span>
+      </header>
+      {(error || dataError) && <p className="response error">{error ?? dataError}</p>}
+      {result && <p className={`response ${result.ok ? "ok" : "error"}`}>{result.ok ? result.output : result.error}</p>}
+
+      {!d && !error && !dataError && (
+        <>
+          <div className="metric-cards" aria-busy="true" aria-label="Carregando as métricas">
+            {[0, 1, 2, 3].map(i => (
+              <div key={i} className="metric-card">
+                <Skeleton className="row" style={{ width: "50%" }} />
+                <Skeleton style={{ height: 32, width: "60%", marginTop: 10 }} />
+                <Skeleton className="row" style={{ width: "80%", marginTop: 14 }} />
+              </div>
+            ))}
+          </div>
+          <Panel title="Progressão">
+            <Skeleton style={{ height: 240 }} />
+          </Panel>
+        </>
+      )}
+
+      {d && (
+        <>
+          <ChannelCards account={d.account} reels={reels} before={d.before} />
+          <ProgressionChart progression={d.progression} publications={d.publications} />
+          <div className="analytics-compare">
+            <ReelBarsChart reels={reels} selected={selected} />
+            <Highlights reels={reels} />
+          </div>
+          <section className="panel card-tabs">
+            <SegmentedControl options={CHANNEL_TABS} value={tab} onChange={setTab} label="Seções do Dashboard" />
+            {tab === "reels" &&
+              (reels.length ? (
+                <ReelsTable reels={reels} medians={m} selected={selected} setSelected={setSelected} />
+              ) : (
+                <div className="chart-empty">
+                  Nenhum Reel publicado ainda. As métricas começam quando um vídeo sobe pelo Publicar do studio.
+                </div>
+              ))}
+            {tab === "insights" && <Insights analysis={d.last_analysis} />}
+            {tab === "plan" && <PlanSection analysis={d.last_analysis} />}
+            {tab === "points" &&
+              (m ? (
+                <HookVsBody reels={reels} medians={m} />
+              ) : (
+                <div className="chart-empty">Sem Reels lidos ainda.</div>
+              ))}
+          </section>
+          <About removed={(d.videos ?? []).filter(r => r.removed)} />
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,46 @@
+/* header: the collection status and the agent, in a popover */
+
+import { useState } from "react";
+import { Power } from "../../../components/icons";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover";
+import { api, send } from "../../../lib/api";
+import { timeAgo } from "../../../lib/format";
+
+export function CollectionStatus({
+  agent,
+  last,
+}: {
+  agent: { installed: boolean; loaded: boolean };
+  last: string | undefined;
+}) {
+  const [changing, setChanging] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const toggle = async () => {
+    setChanging(true);
+    const r = await send(api.analytics.agent.$post({ json: { enable: !agent.loaded } }));
+    setChanging(false);
+    setError(r.ok ? null : (r.error ?? "falhou"));
+  };
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button className={`collection-status${agent.loaded ? "" : " off"}`}>
+          <span className={`point ${agent.loaded ? "ok" : "warning"}`} />
+          {agent.loaded ? "coleta de 4 em 4 h" : "coleta desligada"}
+          {last ? ` · última leitura ${timeAgo(last)}` : ""}
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="collection-popover">
+        <p>
+          {agent.loaded
+            ? "O agente do launchd lê as métricas de 4 em 4 horas, com o studio aberto ou não. Só lê: nada muda no Instagram."
+            : "O agente está desligado: as leituras das próximas horas se perdem."}
+        </p>
+        <button className="button small" disabled={changing} onClick={toggle}>
+          <Power className="ic" /> {changing ? "…" : agent.loaded ? "Desligar a coleta" : "Ligar a coleta"}
+        </button>
+        {error && <p className="response error">{error}</p>}
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,68 @@
+/* the checked Reels side by side: metrics in rows, Reels in columns, the channel median at the
+   end; the best of each row is highlighted */
+
+import { Link } from "@tanstack/react-router";
+import { COMPARISON_ROWS, METRICS, fmtAge, shortLabel, metricValue } from "../../../lib/analytics-metrics";
+import type { Medians, ReelMetrics } from "../../../types/api";
+import { Hint } from "./Hint";
+import { ReelThumb } from "./ReelThumb";
+
+export function Comparison({ reels, medians: m }: { reels: ReelMetrics[]; medians: Medians | null }) {
+  return (
+    <div className="scroll-x comparison">
+      <table className="table">
+        <thead>
+          <tr>
+            <th>Métrica</th>
+            {reels.map(r => (
+              <th key={r.slug} className="num">
+                <Link to="/analytics/$slug" params={{ slug: r.slug }} className="reel-title compare-header">
+                  <ReelThumb r={r} size="m" />
+                  {shortLabel(r.title ?? r.slug, 28)}
+                </Link>
+              </th>
+            ))}
+            <th className="num">Mediana do canal</th>
+          </tr>
+        </thead>
+        <tbody>
+          {COMPARISON_ROWS.map(id => {
+            const metric = METRICS[id];
+            const values = reels.map(r => metricValue(r, id));
+            const valid = values.filter((v): v is number => v != null);
+            const best = valid.length ? (metric.lowerIsBetter ? Math.min(...valid) : Math.max(...valid)) : null;
+            const med = metric.median ? m?.[metric.median] : null;
+            return (
+              <tr key={id}>
+                <td>
+                  {metric.name}
+                  {metric.judges && (
+                    <Hint text={`Julga ${metric.judges}.${metric.lowerIsBetter ? " Menos é melhor." : ""}`} />
+                  )}
+                </td>
+                {values.map((v, i) => (
+                  <td
+                    key={reels[i].slug}
+                    className={`num${v != null && v === best && valid.length > 1 ? " best" : ""}`}
+                  >
+                    {v == null ? "—" : metric.fmt(v)}
+                  </td>
+                ))}
+                <td className="num subtle">{med == null ? "—" : metric.fmt(med)}</td>
+              </tr>
+            );
+          })}
+          <tr>
+            <td>Idade</td>
+            {reels.map(r => (
+              <td key={r.slug} className="num">
+                {fmtAge(r.current?.age_h)}
+              </td>
+            ))}
+            <td className="num subtle">—</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  );
+}

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

@@ -0,0 +1,50 @@
+/* Reel: the diagnosis tab (videos/<slug>/analysis.md) */
+
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../../components/ui/accordion";
+import { Markdown } from "../../../components/Markdown";
+import { SessionPanel } from "../../../components/SessionPanel";
+import { sections } from "../../../lib/analytics-metrics";
+import { RequestWithFocus } from "./RequestWithFocus";
+
+export function Diagnosis({ text, slug }: { text: string | null; slug: string }) {
+  if (!text) {
+    return (
+      <div className="tab-content">
+        <div className="chart-empty">Este Reel ainda não foi analisado: "Analisar este Reel", no alto.</div>
+        <SessionPanel type="analysis" target="channel" />
+      </div>
+    );
+  }
+  const { intro, sections: s } = sections(text.replace(/^# .*\n/, ""));
+  const open = s.filter(x => /levar/i.test(x.title)).map(x => x.title);
+  return (
+    <div className="tab-content">
+      <div className="analysis-text">
+        <Markdown text={intro} />
+      </div>
+      {s.length > 0 && (
+        <Accordion type="multiple" defaultValue={open} className="insights-accordion">
+          {s.map(x => (
+            <AccordionItem key={x.title} value={x.title}>
+              <AccordionTrigger>
+                <span className="insight-title">{x.title}</span>
+              </AccordionTrigger>
+              <AccordionContent className="analysis-text">
+                <Markdown text={x.body} />
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      )}
+      <Accordion type="multiple" className="insights-accordion secondary">
+        <AccordionItem value="focus">
+          <AccordionTrigger>Pedir uma análise com foco</AccordionTrigger>
+          <AccordionContent>
+            <RequestWithFocus slug={slug} />
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+      <SessionPanel type="analysis" target="channel" />
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+/* channel: the best Reel for the hook, saves and comments */
+
+import { Link } from "@tanstack/react-router";
+import { Panel } from "../../../components/ui/panel";
+import { METRICS, metricValue, type MetricId } from "../../../lib/analytics-metrics";
+import type { ReelMetrics } from "../../../types/api";
+import { ReelThumb } from "./ReelThumb";
+
+export function Highlights({ reels }: { reels: ReelMetrics[] }) {
+  const best = (id: MetricId) => {
+    const withValue = reels
+      .map(r => ({ r, v: metricValue(r, id) }))
+      .filter((x): x is { r: ReelMetrics; v: number } => x.v != null);
+    if (!withValue.length) return null;
+    return withValue.reduce((a, b) => (METRICS[id].lowerIsBetter ? (b.v < a.v ? b : a) : b.v > a.v ? b : a));
+  };
+  const items: { label: string; id: MetricId; suffix: string }[] = [
+    { label: "Melhor gancho", id: "skip", suffix: "pulam em 3 s" },
+    { label: "Mais salvos", id: "saves_per_k", suffix: "salvos por mil views" },
+    { label: "Mais comentários", id: "comments_per_k", suffix: "comentários por mil views" },
+  ];
+  return (
+    <Panel title="Destaques" className="highlights-panel">
+      <ul className="highlights">
+        {items.map(i => {
+          const d = best(i.id);
+          return (
+            <li key={i.id}>
+              <span className="highlight-label">{i.label}</span>
+              {d ? (
+                <>
+                  <span className="highlight-number">
+                    {METRICS[i.id].fmt(d.v)} <small>{i.suffix}</small>
+                  </span>
+                  <Link to="/analytics/$slug" params={{ slug: d.r.slug }} className="reel-highlight">
+                    <ReelThumb r={d.r} />
+                    {d.r.title ?? d.r.slug}
+                  </Link>
+                </>
+              ) : (
+                <span className="subtle">—</span>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </Panel>
+  );
+}

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

@@ -0,0 +1,11 @@
+/* an explanation that takes no room: the ⓘ shows it on hover and focus */
+
+import { Info } from "../../../components/icons";
+
+export function Hint({ text }: { text: string }) {
+  return (
+    <span className="hint-info" tabIndex={0} title={text} aria-label={text}>
+      <Info aria-hidden="true" />
+    </span>
+  );
+}

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

@@ -0,0 +1,100 @@
+/* channel: hook × body (scatter) */
+
+import { useNavigate } from "@tanstack/react-router";
+import { CartesianGrid, LabelList, ReferenceLine, Scatter, ScatterChart, XAxis, YAxis, ZAxis } from "recharts";
+import { ChartContainer, ChartTooltip } from "../../../components/ui/chart";
+import { POINTS_CONFIG, axisProps, fmtNum, fmtPct, noAnimation, shortLabel } from "../../../lib/analytics-metrics";
+import type { Medians, ReelMetrics } from "../../../types/api";
+import { Hint } from "./Hint";
+import { ReelThumb } from "./ReelThumb";
+
+export function HookVsBody({ reels, medians: m }: { reels: ReelMetrics[]; medians: Medians }) {
+  const navigate = useNavigate();
+  const data = reels
+    .filter(r => r.current?.skip_3s_pct != null && r.current?.watched_pct != null)
+    .map(r => ({
+      slug: r.slug,
+      name: r.title ?? r.slug,
+      cover: r.cover,
+      skip: r.current!.skip_3s_pct!,
+      watched: r.current!.watched_pct!,
+      views: r.current!.views ?? 0,
+    }));
+  if (data.length < 2) return <div className="chart-empty">O gráfico aparece com dois Reels lidos.</div>;
+  const champion = data.reduce((a, b) => (b.views > a.views ? b : a));
+  const labeled = data.map(d => ({ ...d, label: d === champion ? shortLabel(d.name, 24) : "" }));
+  return (
+    <div className="tab-content">
+      <p className="panel-description">
+        Cada ponto é um Reel, do tamanho das views. Em cima e à esquerda das medianas, ele prende e segura{" "}
+        <Hint text="Pulo em 3 s julga o gancho; % assistido julga o miolo. As linhas são as medianas do canal." />
+      </p>
+      <ChartContainer config={POINTS_CONFIG} className="chart-points" aria-label="Gancho e miolo de cada Reel">
+        <ScatterChart accessibilityLayer margin={{ left: 4, right: 24, top: 18, bottom: 18 }}>
+          <CartesianGrid />
+          <XAxis
+            type="number"
+            dataKey="skip"
+            name="Pulam em 3 s"
+            {...axisProps}
+            unit="%"
+            domain={[0, "auto"]}
+            label={{
+              value: "pulam nos 3 primeiros segundos (menos é melhor)",
+              position: "bottom",
+              offset: 2,
+              className: "chart-axis-title",
+            }}
+          />
+          <YAxis
+            type="number"
+            dataKey="watched"
+            name="% assistido"
+            {...axisProps}
+            unit="%"
+            width={44}
+            domain={[0, "auto"]}
+          />
+          <ZAxis type="number" dataKey="views" range={[60, 520]} name="Views" />
+          {m.skip_3s_pct != null && (
+            <ReferenceLine
+              x={m.skip_3s_pct}
+              className="chart-median"
+              label={{ value: "mediana", position: "top", className: "chart-median-label" }}
+            />
+          )}
+          {m.watched_pct != null && <ReferenceLine y={m.watched_pct} className="chart-median" />}
+          <ChartTooltip
+            cursor={false}
+            content={({ active, payload }: any) => {
+              const d = active && payload?.[0]?.payload;
+              return d ? (
+                <div className="chart-tooltip chart-tooltip-reel">
+                  <ReelThumb r={d} size="m" />
+                  <div>
+                    <div className="chart-tooltip-label">{d.name}</div>
+                    <span className="subtle">
+                      {fmtPct(d.skip)} pulam · {fmtPct(d.watched)} assistido · {fmtNum(d.views)} views
+                    </span>
+                  </div>
+                </div>
+              ) : null;
+            }}
+          />
+          <Scatter
+            data={labeled}
+            fill="var(--color-reels)"
+            className="chart-point"
+            {...noAnimation}
+            onClick={(d: any) => {
+              const slug = d?.payload?.slug ?? d?.slug;
+              if (slug) navigate({ to: "/analytics/$slug", params: { slug } });
+            }}
+          >
+            <LabelList dataKey="label" position="right" offset={10} className="chart-label" />
+          </Scatter>
+        </ScatterChart>
+      </ChartContainer>
+    </div>
+  );
+}

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

@@ -0,0 +1,133 @@
+/* Reel: hour by hour (the same wave line with area as the progression) */
+
+import { useId, useState } from "react";
+import { Area, AreaChart, CartesianGrid, ReferenceLine, XAxis, YAxis } from "recharts";
+import { Panel } from "../../../components/ui/panel";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "../../../components/ui/chart";
+import {
+  HOURS,
+  METRICS,
+  METRIC_ICON,
+  ageAxis,
+  axisProps,
+  fmtAge,
+  fmtAxisY,
+  fmtNum,
+  noAnimation,
+  type MetricId,
+} from "../../../lib/analytics-metrics";
+import type { MetricsSnapshot } from "../../../types/api";
+import { Hint } from "./Hint";
+import { SegmentedControl } from "./SegmentedControl";
+
+export function HourlyWave({ hourly, published }: { hourly: MetricsSnapshot[]; published: string }) {
+  const [id, setId] = useState<MetricId>("views");
+  const gradient = `hours-${useId().replace(/:/g, "")}`;
+  const metric = METRICS[id];
+  /* the age comes from the reading's time, not the rounded age_h (two readings in the same tenth
+     of an hour fell on the same x) */
+  const pub = Date.parse(published);
+  const data = hourly
+    .map(s => ({ h: Number.isFinite(pub) ? (Date.parse(s.at) - pub) / 3_600_000 : s.age_h, value: metric.of(s) }))
+    .filter((d): d is { h: number; value: number } => d.value != null);
+  const start = data[0]?.h ?? 0;
+  const end = data.at(-1)?.h ?? 0;
+  /* the axis runs from the first to the last reading, like the progression: starting at 0 h squeezed
+     the readings of a Reel with a just-enabled agent onto the right edge. Ticks on round ages. */
+  const span = end - start;
+  const step = span <= 2 ? 0.25 : span <= 12 ? 1 : span <= 48 ? 4 : span <= 7 * 24 ? 24 : 5 * 24;
+  const ticks: number[] = [];
+  for (let h = Math.ceil(start / step) * step; h <= end; h += step) ticks.push(h);
+  const isCount = id !== "skip" && id !== "watched";
+  const fmtY = isCount ? fmtAxisY(data.map(d => d.value)) : (v: number) => `${fmtNum(v)}%`;
+  const config = { value: { label: metric.name, color: "var(--chart-1)" } } satisfies ChartConfig;
+  return (
+    <Panel
+      title={
+        <span className="title-with-hint">
+          Hora a hora
+          <Hint text="Uma leitura a cada 4 horas nos primeiros 30 dias (mais as do Coletar agora). As linhas de 24 h e 72 h são as idades que comparam um Reel com outro." />
+        </span>
+      }
+      extra={
+        <SegmentedControl
+          options={HOURS.map(h => ({ id: h, name: METRICS[h].name, Icon: METRIC_ICON[h] }))}
+          value={id}
+          onChange={setId}
+          label="Métrica no tempo"
+          small
+        />
+      }
+      className="progression-panel"
+    >
+      <p className="panel-description">
+        {metric.name} desde a publicação · {hourly.length} {hourly.length === 1 ? "leitura" : "leituras"}
+      </p>
+      {data.length < 2 ? (
+        <div className="chart-empty">A curva aparece com duas leituras: o agente lê o Reel de 4 em 4 horas.</div>
+      ) : (
+        <ChartContainer config={config} className="chart-progression" aria-label={`${metric.name} hora a hora`}>
+          <AreaChart accessibilityLayer data={data} margin={{ left: 4, right: 16, top: 18 }}>
+            <defs>
+              <linearGradient id={gradient} x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="var(--color-value)" stopOpacity={0.28} />
+                <stop offset="95%" stopColor="var(--color-value)" stopOpacity={0.02} />
+              </linearGradient>
+            </defs>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              type="number"
+              dataKey="h"
+              {...axisProps}
+              domain={["dataMin", "dataMax"]}
+              ticks={ticks.length >= 2 ? ticks : undefined}
+              tickFormatter={h => ageAxis(Number(h), step)}
+              minTickGap={28}
+            />
+            <YAxis
+              {...axisProps}
+              width={64}
+              domain={["auto", "auto"]}
+              allowDecimals={!isCount}
+              tickFormatter={v => fmtY(Number(v))}
+            />
+            {[24, 72]
+              .filter(h => start <= h && end >= h)
+              .map(h => (
+                <ReferenceLine
+                  key={h}
+                  x={h}
+                  className="chart-median"
+                  label={{ value: `${h} h`, position: "top", className: "chart-median-label" }}
+                />
+              ))}
+            <ChartTooltip
+              cursor={false}
+              content={
+                <ChartTooltipContent
+                  hideIndicator
+                  labelFormatter={(_l, p) => `${fmtAge(Number(p?.[0]?.payload?.h))} no ar`}
+                  formatter={v => (
+                    <div className="chart-tooltip-row">
+                      <span className="chart-tooltip-name">{metric.name}</span>
+                      <span className="chart-tooltip-value">{metric.fmt(Number(v))}</span>
+                    </div>
+                  )}
+                />
+              }
+            />
+            <Area
+              dataKey="value"
+              type="monotoneX"
+              stroke="var(--color-value)"
+              strokeWidth={2}
+              fill={`url(#${gradient})`}
+              activeDot={{ r: 4 }}
+              {...noAnimation}
+            />
+          </AreaChart>
+        </ChartContainer>
+      )}
+    </Panel>
+  );
+}

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

@@ -0,0 +1,70 @@
+/* channel: the insights of the last analysis (channel/analyses/<day>.md) */
+
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../../components/ui/accordion";
+import { Markdown } from "../../../components/Markdown";
+import { SessionPanel } from "../../../components/SessionPanel";
+import { fmtDay, numberedItems, sections } from "../../../lib/analytics-metrics";
+import { timeAgo } from "../../../lib/format";
+import { RequestWithFocus } from "./RequestWithFocus";
+
+export function Insights({ analysis }: { analysis: { day: string; at: string; text: string | null } | null }) {
+  if (!analysis?.text) {
+    return (
+      <div className="tab-content">
+        <div className="chart-empty">
+          Nenhuma análise ainda. "Gerar análise", no alto, escreve o diagnóstico de cada Reel, os insights e o plano.
+        </div>
+        <SessionPanel type="analysis" target="channel" />
+      </div>
+    );
+  }
+  const { intro, sections: s } = sections(analysis.text);
+  const sentence = /\*\*Em uma frase:\*\*\s*([\s\S]+?)(?:\n\s*\n|$)/.exec(intro)?.[1]?.trim();
+  const ins = s.find(x => /^insights/i.test(x.title));
+  const { items, rest } = ins ? numberedItems(ins.body) : { items: [], rest: "" };
+  return (
+    <div className="tab-content">
+      <div className="insight-sentence">
+        <span className="subtle">
+          Análise de {fmtDay(analysis.day)} · {timeAgo(analysis.at)}
+        </span>
+        {sentence ? <Markdown text={sentence} /> : <p>A análise não trouxe a frase-resumo: veja a análise completa.</p>}
+      </div>
+      {items.length > 0 && (
+        <Accordion type="multiple" className="insights-accordion">
+          {items.map((it, i) => (
+            <AccordionItem key={i} value={`i${i}`}>
+              <AccordionTrigger>
+                <span className="insight-number">{i + 1}</span>
+                <span className="insight-title">{it.title}</span>
+              </AccordionTrigger>
+              <AccordionContent className="analysis-text">
+                <Markdown text={it.text} />
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      )}
+      {rest && (
+        <div className="analysis-text insights-note">
+          <Markdown text={rest} />
+        </div>
+      )}
+      <Accordion type="multiple" className="insights-accordion secondary">
+        <AccordionItem value="full">
+          <AccordionTrigger>Ver análise completa</AccordionTrigger>
+          <AccordionContent className="analysis-text">
+            <Markdown text={analysis.text} />
+          </AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="focus">
+          <AccordionTrigger>Pedir uma análise com foco</AccordionTrigger>
+          <AccordionContent>
+            <RequestWithFocus />
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+      <SessionPanel type="analysis" target="channel" />
+    </div>
+  );
+}