@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/pages/SettingsPage/components/PublishingCategory/badges.tsx

@@ -0,0 +1,15 @@
+/* the badges on the cards' headers */
+
+import { Badge } from "../../../../components/ui/badge";
+import { Skeleton } from "../../../../components/ui/skeleton";
+
+export const BadgeSkeleton = () => <Skeleton style={{ height: 22, width: 92, borderRadius: 999 }} />;
+
+export const connectedBadge = (ready: boolean | undefined, loading: boolean) =>
+  ready ? (
+    <Badge variant="ok">Conectado</Badge>
+  ) : loading ? (
+    <BadgeSkeleton />
+  ) : (
+    <Badge variant="warning">Não conectado</Badge>
+  );

package/studio/web/pages/SettingsPage/components/PublishingCategory/index.tsx

@@ -0,0 +1,40 @@
+/* Configurações → Publicação (and the platform panels Plataformas reuses): YouTube, Instagram
+   and TikTok accounts, the fixed text that goes into every publication, what belongs to each
+   platform and auto-publishing. Everything goes to `publish` in omnivideo.config.json
+   (publish.mjs rereads it on every use); credentials go to .env, masked. */
+
+import { useAccounts } from "../../../../hooks/useAccounts";
+import type { Settings } from "../../../../types/api";
+import { AutoPublishPanel } from "./AutoPublishPanel";
+import { OmnichatSettingsPanel } from "./OmnichatSettingsPanel";
+import { SchedulePanel } from "./SchedulePanel";
+import { SettingsCardGroup } from "./SettingsCardGroup";
+import { TextPanel } from "./TextPanel";
+
+/* the platform panels and the card group, reused by Plataformas (PlatformsCategory) */
+export { InstagramPanel } from "./InstagramPanel";
+export { SettingsCardGroup } from "./SettingsCardGroup";
+export { TiktokPanel } from "./TiktokPanel";
+export { YoutubePanel } from "./YoutubePanel";
+
+/* --- category ----------------------------------------------------------------------- */
+/* Publicação: the fixed text, auto-publishing, the schedule and the omnichat */
+export function PublishingCategory({ settings, reload }: { settings: Settings; reload: () => void }) {
+  const { accounts, loading, reload: reloadAccounts } = useAccounts();
+  const p = settings.publish;
+  return (
+    <SettingsCardGroup>
+      {accounts?.error && <p className="response error">Contas: {accounts.error}</p>}
+      <TextPanel publish={p} onSave={reload} />
+      <AutoPublishPanel publish={p} accounts={accounts} loading={loading} onSave={reload} />
+      <SchedulePanel
+        publish={p}
+        accounts={accounts}
+        loading={loading}
+        onSave={reload}
+        reloadAccounts={reloadAccounts}
+      />
+      <OmnichatSettingsPanel omnichat={settings.omnichat} onSave={reload} />
+    </SettingsCardGroup>
+  );
+}

package/studio/web/pages/SettingsPage/components/PublishingCategory/types.ts

@@ -0,0 +1,10 @@
+import type { PlatformAccounts, Settings } from "../../../../types/api";
+
+export type Publish = Settings["publish"];
+export type PanelProps = {
+  publish: Publish;
+  accounts: PlatformAccounts | null;
+  loading: boolean;
+  onSave: () => void;
+  reloadAccounts: (refresh?: boolean) => void;
+};

package/studio/web/pages/SettingsPage/components/UsageCategory.tsx

@@ -0,0 +1,389 @@
+/* Usage of the paid voices: what is left on Fish and Cartesia and what each video spent.
+   Lives in Configurações → Uso das vozes; /usage opens there. */
+
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { Link } from "@tanstack/react-router";
+import { useQueue } from "../../../hooks/useQueue";
+import { useUsage } from "../../../hooks/useUsage";
+import { api, errorText, send } from "../../../lib/api";
+import { formatWhen, timeAgo } from "../../../lib/format";
+import { queryClient, queryKeys } from "../../../lib/query-client";
+import type { Usage, UsageData, UsageRun } from "../../../types/api";
+import { ArrowClockwise, ArrowRight } from "../../../components/icons";
+import { Badge } from "../../../components/ui/badge";
+import { Panel } from "../../../components/ui/panel";
+import { Skeleton } from "../../../components/ui/skeleton";
+
+const num = (v: number | null | undefined, decimals = 0) =>
+  v == null ? "—" : v.toLocaleString("pt-BR", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
+const usd = (v: number) => `US$ ${num(v, 4)}`;
+const day = (iso: string) =>
+  new Date(iso).toLocaleDateString("pt-BR", { day: "2-digit", month: "2-digit", timeZone: "UTC" });
+const duration = (s: number) =>
+  s >= 60 ? `${Math.floor(s / 60)}min${String(Math.round(s % 60)).padStart(2, "0")}s` : `${Math.round(s)} s`;
+const plural = (n: number) => (n === 1 ? "1 fala" : `${n} falas`);
+
+const PROVIDER_LABEL: Record<string, string> = { fish: "Fish Audio", cartesia: "Cartesia", voicestudio: "VoiceStudio" };
+
+function bar(fraction: number) {
+  return fraction >= 0.85 ? "error" : fraction >= 0.6 ? "warning" : "";
+}
+
+/* what is chosen in Configurações, read-only here */
+function PlanChoices({ items }: { items: [string, ReactNode][] }) {
+  return (
+    <p className="usage-choices">
+      {items.map(([k, v]) => (
+        <span key={k}>
+          <span className="subtle">{k}</span> {v}
+        </span>
+      ))}
+      <Link to="/settings/$category" params={{ category: "providers" }} className="link">
+        Editar em Provedores de voz <ArrowRight className="ic" />
+      </Link>
+    </p>
+  );
+}
+
+const MODEL_LABEL: Record<string, string> = { "s2.1-pro-free": "S2.1 Pro free", "s2.1-pro": "S2.1 Pro pago" };
+const voiceIdLabel = (id: string | null) =>
+  id ? <span className="mono">{id.slice(0, 8)}…</span> : <span className="warning">Sem voice_id</span>;
+
+function FishUsage({ data }: { data: UsageData }) {
+  const f = data.fish;
+  return (
+    <Panel
+      title="Fish Audio"
+      extra={<Badge variant={f.key ? "ok" : "warning"}>{f.key ? "Chave ok" : "Sem chave"}</Badge>}
+      className="usage-card"
+    >
+      <PlanChoices
+        items={[
+          [
+            "modelo",
+            <>
+              {MODEL_LABEL[f.model] ?? f.model}
+              {f.fallback_model && (
+                <span className="subtle"> → {MODEL_LABEL[f.fallback_model] ?? f.fallback_model}</span>
+              )}
+            </>,
+          ],
+          ["voz", voiceIdLabel(f.voice_id)],
+        ]}
+      />
+      <p className="usage-number">
+        {num(f.balance.credit, 4)}
+        <small>Saldo da API pré-paga</small>
+      </p>
+      <p className="meta">
+        {f.balance.at
+          ? `Lido da plataforma ${timeAgo(f.balance.at)}`
+          : "Ainda sem leitura: use Atualizar ou gere uma fala"}
+      </p>
+      <dl className="data">
+        <dt>Neste ciclo</dt>
+        <dd>
+          {plural(f.cycle.lines)} · {num(f.cycle.bytes)} bytes
+          {f.cycle.lines_free > 0 && <span className="subtle"> · {f.cycle.lines_free} no free</span>}
+        </dd>
+        <dt>Estimado</dt>
+        <dd>
+          {usd(f.cycle.estimated_usd)}{" "}
+          <span className="subtle">Só o pago, a US$ {num(f.price_usd_per_million_bytes, 0)} por milhão de bytes</span>
+        </dd>
+        <dt>Plataforma</dt>
+        <dd>
+          {f.cycle.platform == null ? (
+            <span className="subtle">Precisa de duas leituras no ciclo</span>
+          ) : (
+            <>
+              {num(f.cycle.platform, 4)}{" "}
+              <span className="subtle">Gastos desde {formatWhen(f.cycle.platform_since)}</span>
+            </>
+          )}
+        </dd>
+      </dl>
+      <p className="note">
+        O saldo é o que a API devolve, na unidade dela; a estimativa usa a tabela de preços e conta só as falas do
+        modelo pago. O free não sai do saldo. Os créditos grátis do plano (8 mil) valem para o app e o MCP oficial, não
+        para a API.
+      </p>
+    </Panel>
+  );
+}
+
+function CartesiaUsage({ data }: { data: UsageData }) {
+  const c = data.cartesia;
+  return (
+    <Panel
+      title="Cartesia"
+      extra={<Badge variant={c.key ? "ok" : "warning"}>{c.key ? "Chave ok" : "Sem chave"}</Badge>}
+      className="usage-card"
+    >
+      <PlanChoices
+        items={[
+          ["plano", c.plan],
+          ["renova", `dia ${c.cycle_day}`],
+          ["voz", voiceIdLabel(c.voice_id)],
+        ]}
+      />
+      <p className="usage-number">
+        {num(c.used)}
+        <small>De {num(c.quota)} créditos no ciclo</small>
+      </p>
+      <div className="bar large">
+        <div className={bar(c.fraction)} style={{ width: `${Math.max(c.fraction * 100, c.used ? 1 : 0)}%` }} />
+      </div>
+      <dl className="data">
+        <dt>Restante</dt>
+        <dd>
+          <strong>{num(c.remaining)}</strong> <span className="subtle">({Math.round((1 - c.fraction) * 100)}%)</span>
+        </dd>
+        <dt>Fonte</dt>
+        <dd>
+          <Badge
+            variant={c.source === "platform" ? "ok" : "warning"}
+            title={
+              c.source === "platform"
+                ? "Lido da API de uso da Cartesia"
+                : "Caracteres gerados por aqui; não vê uso de outros apps"
+            }
+          >
+            {c.source === "platform" ? "plataforma" : "estimado"}
+          </Badge>{" "}
+          {c.read_at && <span className="subtle">Lido {timeAgo(c.read_at)}</span>}
+        </dd>
+        <dt>Gerado aqui</dt>
+        <dd>
+          {plural(c.cycle.lines)} · {num(c.cycle.chars)} caracteres
+        </dd>
+      </dl>
+      {!c.admin_key && (
+        <p className="note">
+          A Cartesia só mostra o consumo para chave <b>admin</b> (<code>sk_car_admin_…</code>). Crie uma no painel dela
+          e coloque em{" "}
+          <Link to="/settings/$category" params={{ category: "providers" }} className="link">
+            Provedores de voz
+          </Link>
+          ; sem ela, o número acima é estimado.
+        </p>
+      )}
+    </Panel>
+  );
+}
+
+function LocalUsage({ data }: { data: UsageData }) {
+  const v = data.voicestudio;
+  return (
+    <Panel title="VoiceStudio" extra={<Badge>Local</Badge>} className="usage-card">
+      <p className="usage-number">
+        {v.lines}
+        <small>{v.lines === 1 ? "fala" : "falas"} no ciclo</small>
+      </p>
+      <p className="meta">{duration(v.audio_s)} de áudio · sem custo, roda na máquina</p>
+    </Panel>
+  );
+}
+
+function UsageRunRow({ run: r }: { run: UsageRun }) {
+  const parts = Object.entries(r.providers).filter(([, p]) => p.lines > 0);
+  return (
+    <tr>
+      <td title={r.at}>{timeAgo(r.at)}</td>
+      <td>
+        {r.video ? (
+          <Link to="/videos/$slug" params={{ slug: r.video }}>
+            {r.video}
+          </Link>
+        ) : (
+          "—"
+        )}
+      </td>
+      <td>
+        {parts.map(([id, p]) => (
+          <div key={id}>
+            <strong>{PROVIDER_LABEL[id] ?? id}</strong> · {plural(p.lines)}
+            {p.lines_free ? <span className="subtle"> ({p.lines_free} no free)</span> : null}
+            {p.estimated_usd != null && (
+              <>
+                {" "}
+                · {usd(p.estimated_usd)}
+                {p.platform != null && <span className="subtle"> (plataforma {num(p.platform, 4)})</span>}
+              </>
+            )}
+            {p.estimated_credits != null && <> · {num(p.estimated_credits)} créditos</>}
+          </div>
+        ))}
+        {r.failures.map((f, i) => (
+          <div key={i} className="error">
+            {PROVIDER_LABEL[f.provider] ?? f.provider} {f.line ?? ""}: {f.reason}
+          </div>
+        ))}
+      </td>
+    </tr>
+  );
+}
+
+export function UsageCategory() {
+  const { usage, error: fetchError, reload } = useUsage();
+  const [refreshError, setRefreshError] = useState<string | null>(null);
+  const [refreshing, setRefreshing] = useState(false);
+  const queue = useQueue();
+  /* the queue changes when a `voice` starts or ends: time to reread the record */
+  const mark = queue
+    ? `${queue.running.map(t => t.id).join(",")}|${queue.recent[0]?.id ?? ""}|${queue.recent[0]?.effective ?? ""}`
+    : "";
+  const lastMark = useRef(mark);
+  useEffect(() => {
+    if (lastMark.current === mark) return;
+    lastMark.current = mark;
+    reload();
+  }, [mark, reload]);
+
+  const refresh = async () => {
+    setRefreshing(true);
+    try {
+      const r: Usage = await send(api.usage.refresh.$post({ json: {} }));
+      queryClient.setQueryData(queryKeys.usage, r);
+      setRefreshError(null);
+    } catch (e) {
+      setRefreshError(errorText(e));
+    } finally {
+      setRefreshing(false);
+    }
+  };
+
+  const error = refreshError ?? fetchError;
+  const d = usage && !("error" in usage) ? usage : null;
+  return (
+    <div className="usage-page">
+      <header className="header">
+        {d && (
+          <span className="subtle">
+            Ciclo {day(d.cycle.start)} → {day(d.cycle.end)} (UTC)
+          </span>
+        )}
+        <span className="push-end" />
+        <button className="button" onClick={refresh} disabled={refreshing}>
+          <ArrowClockwise className="ic" /> {refreshing ? "Perguntando às plataformas…" : "Atualizar das plataformas"}
+        </button>
+      </header>
+      <p className="intro">
+        Cada <code>voice</code> registra o que gerou e, ao terminar, lê o saldo na Fish e o consumo na Cartesia. Aqui
+        estão o registro e a leitura lado a lado. No terminal: <code>$PY tools/usage.py</code> (ou <code>--live</code>{" "}
+        para perguntar às plataformas agora).
+      </p>
+
+      {(error || (usage && "error" in usage)) && (
+        <p className="response error">{error ?? (usage as { error: string }).error}</p>
+      )}
+      {!d && !error && !(usage && "error" in usage) && (
+        <>
+          <div className="usage-grid" aria-busy="true" aria-label="Carregando o uso">
+            {["Fish Audio", "Cartesia", "Local"].map(t => (
+              <Panel key={t} title={t} className="usage-card">
+                <Skeleton className="row" style={{ width: "70%" }} />
+                <Skeleton style={{ height: 36, width: 120, marginTop: 12 }} />
+                <Skeleton className="row" style={{ width: "55%", marginTop: 8 }} />
+                <Skeleton className="row" style={{ width: "85%", marginTop: 16 }} />
+                <Skeleton className="row" style={{ width: "75%", marginTop: 8 }} />
+              </Panel>
+            ))}
+          </div>
+          <Panel title="Por vídeo (este ciclo)">
+            {Array.from({ length: 3 }, (_, i) => (
+              <Skeleton key={i} className="row" style={{ width: "100%", height: 20, marginTop: i ? 10 : 0 }} />
+            ))}
+          </Panel>
+        </>
+      )}
+
+      {d && (
+        <>
+          {(d.warnings.length > 0 || d.refresh.errors.length > 0) && (
+            <ul className="usage-notices">
+              {d.warnings.map(a => (
+                <li key={a}>
+                  <span className="point warning" />
+                  {a}
+                </li>
+              ))}
+              {d.refresh.errors.map(a => (
+                <li key={a}>
+                  <span className="point error" />
+                  {a}
+                </li>
+              ))}
+            </ul>
+          )}
+
+          <div className="usage-grid">
+            <FishUsage data={d} />
+            <CartesiaUsage data={d} />
+            <LocalUsage data={d} />
+          </div>
+
+          <Panel title="Por vídeo (este ciclo)">
+            {d.by_video.length === 0 ? (
+              <p className="empty">
+                Nenhuma fala registrada neste ciclo. O registro começa na próxima <code>voice</code>.
+              </p>
+            ) : (
+              <table className="table">
+                <thead>
+                  <tr>
+                    <th>Vídeo</th>
+                    <th>Falas</th>
+                    <th>Áudio</th>
+                    <th>Fish (estimado)</th>
+                    <th>Cartesia</th>
+                    <th>Voz</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {d.by_video.map(v => (
+                    <tr key={v.video}>
+                      <td>
+                        <Link to="/videos/$slug" params={{ slug: v.video }}>
+                          {v.video}
+                        </Link>
+                      </td>
+                      <td>{v.lines}</td>
+                      <td>{duration(v.audio_s)}</td>
+                      <td>{v.fish_usd ? usd(v.fish_usd) : <span className="subtle">—</span>}</td>
+                      <td>
+                        {v.cartesia_credits ? `${num(v.cartesia_credits)} créditos` : <span className="subtle">—</span>}
+                      </td>
+                      <td>{v.providers.map(p => PROVIDER_LABEL[p] ?? p).join(", ")}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </Panel>
+
+          <Panel title="Últimas gerações">
+            {d.runs.length === 0 ? (
+              <p className="empty">Ainda não há geração registrada.</p>
+            ) : (
+              <table className="table">
+                <thead>
+                  <tr>
+                    <th>Quando</th>
+                    <th>Vídeo</th>
+                    <th>O que saiu</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {d.runs.map(r => (
+                    <UsageRunRow key={r.run} run={r} />
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </Panel>
+        </>
+      )}
+    </div>
+  );
+}

package/studio/web/pages/SettingsPage/components/VoiceProvidersCategory.tsx

@@ -0,0 +1,97 @@
+/* Configurações → Provedores de voz: only what holds for every voice of the provider: key,
+   model, cost. The Voice ID belongs to the voice and lives in its editor. */
+
+import { Link } from "@tanstack/react-router";
+import { useServices } from "../../../hooks/useServices";
+import type { Settings } from "../../../types/api";
+import { ArrowLeft } from "../../../components/icons";
+import { ProviderLogo } from "../../../components/ProviderLogo";
+import { ApiKeyField } from "../../../components/ApiKeyField";
+import { FishModelSetting } from "../../../components/FishModelSetting";
+import { FishPriceSetting } from "../../../components/FishPriceSetting";
+import { CartesiaPlanSetting } from "../../../components/CartesiaPlanSetting";
+import { Badge } from "../../../components/ui/badge";
+import { Panel } from "../../../components/ui/panel";
+
+function ProviderTitle({ id, name }: { id: string; name: string }) {
+  return (
+    <span className="provider-title">
+      <ProviderLogo id={id} size={22} />
+      {name}
+    </span>
+  );
+}
+
+const KeyBadge = ({ ok }: { ok: boolean }) =>
+  ok ? <Badge variant="ok">Chave gravada</Badge> : <Badge variant="warning">Sem chave</Badge>;
+
+export function VoiceProvidersCategory({ settings, reload }: { settings: Settings; reload: () => void }) {
+  const vs = useServices()?.voicestudio;
+  const v = settings.voice;
+  return (
+    <>
+      <div className="category-actions back">
+        <Link to="/settings/$category" params={{ category: "voice" }} className="button">
+          <ArrowLeft weight="bold" className="ic" /> Voltar para Voz
+        </Link>
+      </div>
+      <Panel
+        title={<ProviderTitle id="fish" name="Fish Audio" />}
+        extra={<KeyBadge ok={!!v.fish.key.masked || v.fish.key.in_env} />}
+      >
+        <ApiKeyField
+          keyStatus={v.fish.key}
+          label="API key"
+          help="fish.audio → API Keys. Vale para todas as vozes da Fish"
+          onSave={reload}
+        />
+        <FishModelSetting fish={v.fish} next={null} onSave={reload} />
+        <FishPriceSetting current={v.fish.usd_per_million_bytes} onSave={reload} />
+      </Panel>
+      <Panel
+        title={<ProviderTitle id="cartesia" name="Cartesia" />}
+        extra={<KeyBadge ok={!!v.cartesia.key.masked || v.cartesia.key.in_env} />}
+      >
+        <ApiKeyField
+          keyStatus={v.cartesia.key}
+          label="API key"
+          help="play.cartesia.ai → API Keys. Vale para todas as vozes da Cartesia"
+          onSave={reload}
+        />
+        <ApiKeyField
+          keyStatus={v.cartesia.admin_key}
+          label="API key admin"
+          onSave={reload}
+          required
+          help={
+            <>
+              <code>sk_car_admin_…</code>, em play.cartesia.ai → API Keys: lê o consumo para a tela Uso
+            </>
+          }
+        />
+        <CartesiaPlanSetting cartesia={v.cartesia} onSave={reload} />
+      </Panel>
+      <Panel
+        title={<ProviderTitle id="elevenlabs" name="ElevenLabs" />}
+        extra={<KeyBadge ok={!!v.elevenlabs.key.masked || v.elevenlabs.key.in_env} />}
+      >
+        <ApiKeyField
+          keyStatus={v.elevenlabs.key}
+          label="API key"
+          help="elevenlabs.io → Developers → API Keys. Vale para todas as vozes da ElevenLabs"
+          onSave={reload}
+        />
+      </Panel>
+      <Panel
+        title={<ProviderTitle id="voicestudio" name="VoiceStudio" />}
+        extra={vs ? vs.ok ? <Badge variant="ok">No ar</Badge> : <Badge variant="warning">Fechado</Badge> : null}
+      >
+        <p className="hint">
+          Roda nesta máquina, sem chave nem custo. Precisa do app aberto (ou <code>bun run dev:api</code> na pasta do
+          repositório do VoiceStudio) quando for o único provedor que sobrou.
+        </p>
+      </Panel>
+      <p className="hint">O Voice ID de cada provedor é da voz: fica no editor de cada voz, em Voz.</p>
+    </>
+  );
+}

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

@@ -0,0 +1,85 @@
+/* Configurações, by category: Voz (the voice carousel), Agente de IA and Publicação. A
+   secondary sidebar lists the categories (/settings/$category) and the content shows only the
+   chosen one. Keys go to .env and come back only masked; the rest goes to omnivideo.config.json. */
+
+import { useEffect, type ReactNode } from "react";
+import { Link } from "@tanstack/react-router";
+import { useSettings } from "../../hooks/useSettings";
+import { CATEGORY_GROUPS, SETTINGS_CATEGORIES, type SettingsCategoryId } from "../../lib/settings-categories";
+import type { Settings } from "../../types/api";
+import { Chart, ClaudeMark, Microphone, Stack, UploadSimple } from "../../components/icons";
+import { VoiceCategory } from "../../components/VoiceCategory";
+import { SettingsCategorySkeleton } from "../../components/SettingsCategorySkeleton";
+import { VoiceProvidersCategory } from "./components/VoiceProvidersCategory";
+import { UsageCategory } from "./components/UsageCategory";
+import { AgentCategory } from "./components/AgentCategory";
+import { PlatformsCategory } from "./components/PlatformsCategory";
+import { PublishingCategory } from "./components/PublishingCategory";
+
+/* one category = one id in the URL, one icon and one group in the sidebar */
+const CATEGORY_ICON: Partial<Record<SettingsCategoryId, ReactNode>> = {
+  voice: <Microphone />,
+  usage: <Chart />,
+  agent: <ClaudeMark />,
+  platforms: <Stack />,
+  publishing: <UploadSimple />,
+};
+
+export function SettingsPage({ category }: { category?: string }) {
+  const { settings, error, reload } = useSettings();
+  const current = SETTINGS_CATEGORIES.find(c => c.id === category) ?? SETTINGS_CATEGORIES[0];
+  const inMenu = current.id === "providers" ? "voice" : current.id;
+  useEffect(() => {
+    document.title = `${current.name} · Configurações · Omni`;
+  }, [current.name]);
+
+  const content: Record<SettingsCategoryId, (s: Settings) => ReactNode> = {
+    voice: s => <VoiceCategory settings={s} reload={reload} />,
+    providers: s => <VoiceProvidersCategory settings={s} reload={reload} />,
+    usage: () => <UsageCategory />,
+    agent: s => <AgentCategory settings={s} reload={reload} />,
+    platforms: s => <PlatformsCategory settings={s} reload={reload} />,
+    publishing: s => <PublishingCategory settings={s} reload={reload} />,
+  };
+
+  return (
+    <div className="settings-shell">
+      <aside className="settings-sidebar">
+        <h1>Configurações</h1>
+        <nav aria-label="Categorias das configurações">
+          {CATEGORY_GROUPS.map(g => (
+            <div key={g.name} className="settings-group">
+              <span className="settings-group-name">{g.name}</span>
+              {g.categories.map(c => (
+                <Link
+                  key={c.id}
+                  to="/settings/$category"
+                  params={{ category: c.id }}
+                  activeProps={{}}
+                  className={c.id === inMenu ? "active" : ""}
+                  aria-current={c.id === inMenu ? "page" : undefined}
+                >
+                  {CATEGORY_ICON[c.id]}
+                  {c.name}
+                </Link>
+              ))}
+            </div>
+          ))}
+        </nav>
+      </aside>
+      <div className="settings-content">
+        {error && <p className="response error">{error}</p>}
+        {!settings && !error && <SettingsCategorySkeleton />}
+        {settings && (
+          <section className="category" aria-labelledby="category-title">
+            <header className="category-header">
+              <h2 id="category-title">{current.name}</h2>
+              <p>{current.description}</p>
+            </header>
+            {content[current.id](settings)}
+          </section>
+        )}
+      </div>
+    </div>
+  );
+}