@crievo/omni 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,49 @@
+/* model and effort of one stage or session */
+
+import type { ModelChoice, Settings } from "../../../types/api";
+import { Picker } from "../../../components/ui/picker";
+
+export const MODEL_LABEL: Record<string, string> = {
+  fable: "Fable 5.1 · US$ 10/50",
+  opus: "Opus 5.5 · US$ 4/20",
+  sonnet: "Sonnet 5.5 · US$ 2/10",
+  haiku: "Haiku 5.5 · US$ 0,10/0,50",
+};
+
+/* only Haiku 4.x, by the full id; the `haiku` alias is 5.5, which has effort */
+export const withoutEffort = (m: string) => /haiku-4/.test(m);
+
+export function ModelPicker({
+  choice: m,
+  options,
+  onChange,
+}: {
+  choice: ModelChoice;
+  options: Settings["models"]["options"];
+  onChange: (m: ModelChoice) => void;
+}) {
+  return (
+    <div className="model-picker">
+      <Picker
+        aria-label="Modelo"
+        value={m.model}
+        onChange={model => onChange({ ...m, model })}
+        options={[
+          ...(options.models.includes(m.model) ? [] : [{ value: m.model, label: m.model }]),
+          ...options.models.map(o => ({ value: o, label: MODEL_LABEL[o] ?? o })),
+        ]}
+      />
+      <Picker
+        aria-label="Effort"
+        value={withoutEffort(m.model) ? "" : (m.effort ?? "")}
+        disabled={withoutEffort(m.model)}
+        onChange={effort => onChange({ ...m, effort: effort || undefined })}
+        title={withoutEffort(m.model) ? "O Haiku 4.x não tem effort" : "Effort: quanto ele pensa e verifica"}
+        options={[
+          { value: "", label: withoutEffort(m.model) ? "Sem effort" : "Padrão" },
+          ...options.efforts.map(o => ({ value: o, label: o })),
+        ]}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,138 @@
+/* model and effort: the orchestrator and the reference are studio sessions; each stage runs
+   in a fork with its own (tools/models.mjs writes them into the skills) */
+
+import { useEffect, useState } from "react";
+import { useSaveAction } from "../../../hooks/useSaveAction";
+import { api } from "../../../lib/api";
+import type { ModelChoice, Settings } from "../../../types/api";
+import { ArrowCounterClockwise, FloppyDisk } from "../../../components/icons";
+import { ResultMessage } from "../../../components/ResultMessage";
+import { SettingRow } from "../../../components/SettingRow";
+import { ModelPicker, withoutEffort } from "./ModelPicker";
+
+const STAGE_LABEL: Record<string, [string, string]> = {
+  "av-script": ["1", "Roteiro"],
+  "av-motion": ["2 · 3", "Roteiro de motion e composição"],
+  "av-narration": ["4", "Narração"],
+  "av-voice": ["5", "Voz"],
+  "av-render": ["6", "Render final e som"],
+  "av-captions": ["7", "Legenda"],
+  "av-assemble": ["8", "Montagem e exportação"],
+  "av-thumbnail": ["", "Thumbnail (opcional, a pedido)"],
+  "av-premiere": ["", "Premiere (opcional)"],
+  "av-analysis": ["", "Análise das métricas (a pedido, Analytics)"],
+};
+
+export function ModelsSettings({ models: d, onSave }: { models: Settings["models"]; onSave: () => void }) {
+  const initial = () => ({
+    orchestrator: d.orchestrator ?? { model: "sonnet", effort: "medium" },
+    reference: d.reference ?? { model: "opus", effort: "high" },
+    stages: Object.fromEntries(d.stages.map(e => [e.stage, { model: e.model, effort: e.effort }])) as Record<
+      string,
+      ModelChoice
+    >,
+  });
+  const [r, setR] = useState(initial);
+  const { result, saving, save } = useSaveAction(onSave);
+  useEffect(() => {
+    setR(initial());
+  }, [JSON.stringify(d)]);
+  const changed = JSON.stringify(r) !== JSON.stringify(initial());
+  const outOfSync = d.stages.filter(
+    e =>
+      !e.in_skill ||
+      e.in_skill.model !== e.model ||
+      !e.in_skill.fork ||
+      (!withoutEffort(e.model) && e.in_skill.effort !== (e.effort ?? null)),
+  );
+  return (
+    <SettingRow
+      label="Modelo por etapa"
+      help={
+        <>
+          Preço por milhão de tokens, entrada/saída. O cache read custa US$ 0,20 no Opus e no Sonnet: o que barateia de
+          verdade é cada etapa rodar com o contexto dela
+        </>
+      }
+    >
+      <table className="table models-table">
+        <tbody>
+          <tr className="group">
+            <td colSpan={2}>Sessões do studio</td>
+          </tr>
+          <tr>
+            <td>
+              <b>Orquestrador</b>
+              <small>A sessão que roda o vídeo: chama as etapas e fala com você</small>
+            </td>
+            <td>
+              <ModelPicker
+                choice={r.orchestrator}
+                options={d.options}
+                onChange={m => setR({ ...r, orchestrator: m })}
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <b>Estilo visual</b>
+              <small>Mede um vídeo e escreve o GUIDE.md: lê muitas folhas</small>
+            </td>
+            <td>
+              <ModelPicker choice={r.reference} options={d.options} onChange={m => setR({ ...r, reference: m })} />
+            </td>
+          </tr>
+          <tr className="group">
+            <td colSpan={2}>Etapas (cada uma em fork, com contexto próprio)</td>
+          </tr>
+          {d.stages.map(e => {
+            const [num, name] = STAGE_LABEL[e.stage] ?? ["", e.stage];
+            return (
+              <tr key={e.stage}>
+                <td>
+                  <b>
+                    {num && <span className="subtle">{num} · </span>}
+                    {name}
+                  </b>
+                  <small className="mono">{e.stage}</small>
+                </td>
+                <td>
+                  <ModelPicker
+                    choice={r.stages[e.stage]}
+                    options={d.options}
+                    onChange={m => setR({ ...r, stages: { ...r.stages, [e.stage]: m } })}
+                  />
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      {outOfSync.length > 0 && !changed && (
+        <p className="hint warning">
+          Skills diferentes da config: {outOfSync.map(e => e.stage).join(", ")}. Gravar de novo (ou{" "}
+          <code>node tools/models.mjs apply</code>) acerta.
+        </p>
+      )}
+      <div className="setting-row">
+        <button
+          className="button primary"
+          disabled={saving || (!changed && !outOfSync.length)}
+          onClick={() => save(() => api.settings.models.$post({ json: r }))}
+        >
+          <FloppyDisk className="ic" /> {saving ? "Gravando…" : "Gravar modelos"}
+        </button>
+        {changed && (
+          <button className="button" disabled={saving} onClick={() => setR(initial())}>
+            <ArrowCounterClockwise className="ic" /> Descartar
+          </button>
+        )}
+      </div>
+      <p className="hint">
+        Vale para a próxima etapa que começar, no studio e no chat. O orquestrador e o estilo visual valem a partir do
+        próximo turno.
+      </p>
+      <ResultMessage result={result} />
+    </SettingRow>
+  );
+}

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

@@ -0,0 +1,23 @@
+/* Configurações → Plataformas: the accounts and keys of each one (YouTube, Instagram, TikTok) */
+
+import { useAccounts } from "../../../hooks/useAccounts";
+import type { Settings } from "../../../types/api";
+import { InstagramPanel, SettingsCardGroup, TiktokPanel, YoutubePanel } from "./PublishingCategory";
+
+export function PlatformsCategory({ settings, reload }: { settings: Settings; reload: () => void }) {
+  const { accounts, loading, reload: reloadAccounts } = useAccounts();
+  const p = settings.publish;
+  const props = { publish: p, accounts, loading, onSave: reload, reloadAccounts };
+  return (
+    <SettingsCardGroup>
+      {accounts?.error && <p className="response error">Contas: {accounts.error}</p>}
+      <YoutubePanel {...props} />
+      <InstagramPanel {...props} />
+      <TiktokPanel {...props} />
+      <p className="hint">
+        Passo a passo das contas em <code>reference/publish.md</code>. As credenciais ficam no <code>.env</code>, fora
+        do git.
+      </p>
+    </SettingsCardGroup>
+  );
+}

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

@@ -0,0 +1,29 @@
+import { Badge } from "../../../../components/ui/badge";
+import { Skeleton } from "../../../../components/ui/skeleton";
+
+export function AccountStatus({
+  account: c,
+  loading,
+}: {
+  account?: { ready: boolean; account?: string; reason?: string };
+  loading: boolean;
+}) {
+  if (!c)
+    return loading ? (
+      <Skeleton className="row" aria-busy="true" style={{ width: 180 }} />
+    ) : (
+      <p className="setting-current subtle">Sem resposta</p>
+    );
+  return c.ready ? (
+    <p className="setting-current">
+      <Badge variant="ok">Conectada</Badge> <span className="mono">{c.account}</span>
+    </p>
+  ) : (
+    <>
+      <p className="setting-current">
+        <Badge variant="warning">Não conectada</Badge>
+      </p>
+      {c.reason && <p className="hint">{c.reason}</p>}
+    </>
+  );
+}

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

@@ -0,0 +1,90 @@
+/* --- auto-publishing --------------------------------------------------------------- */
+
+import { useEffect, useState } from "react";
+import { useSettingsSection } from "../../../../hooks/useSettingsSection";
+import { PLATFORMS, formatPlatformList } from "../../../../lib/platforms";
+import { togglePlatform } from "../../../../lib/publish-settings";
+import { ArrowCounterClockwise, FloppyDisk, Power, X } from "../../../../components/icons";
+import { PlatformCard } from "../../../../components/PlatformCard";
+import { ResultMessage } from "../../../../components/ResultMessage";
+import { SettingRow } from "../../../../components/SettingRow";
+import { Badge } from "../../../../components/ui/badge";
+import { CheckField } from "./CheckField";
+import { SettingsCard } from "./SettingsCard";
+import type { PanelProps } from "./types";
+
+export function AutoPublishPanel({ publish: p, accounts, loading, onSave }: Omit<PanelProps, "reloadAccounts">) {
+  const s = useSettingsSection("auto", p.auto, onSave);
+  const [confirming, setConfirming] = useState(false);
+  /* turning it on is a permanent permission to publish without asking: asks for confirmation */
+  const enabling = s.values.approved && !p.auto.approved;
+  const check = (id: string, yes: boolean) => s.set("platforms", togglePlatform(s.values.platforms, id, yes));
+  useEffect(() => {
+    if (!enabling) setConfirming(false);
+  }, [enabling]);
+  return (
+    <SettingsCard
+      id="auto"
+      title="Publicação automática"
+      extra={p.auto.approved ? <Badge variant="warning">Ligada</Badge> : <Badge>Desligada</Badge>}
+    >
+      <SettingRow label="Aprovação" help="A permissão permanente: sem ela, o agente nunca publica por conta própria">
+        <CheckField value={s.values.approved} onChange={v => s.set("approved", v)} disabled={s.saving}>
+          no fim do pipeline, o agente publica o vídeo exportado sem perguntar
+        </CheckField>
+        <p className="hint">
+          Desligada, só publica quando você aperta Publicar na tela ou pede no chat. Ligada, vale para todo vídeo novo,
+          nas plataformas abaixo.
+        </p>
+      </SettingRow>
+      <SettingRow label="Plataformas" help="Onde a publicação automática sobe">
+        <div className="platform-cards" role="group" aria-label="Plataformas da publicação automática">
+          {PLATFORMS.map(({ id }) => (
+            <PlatformCard
+              key={id}
+              id={id}
+              account={accounts?.[id]}
+              loading={loading}
+              checked={s.values.platforms.includes(id)}
+              onChange={v => check(id, v)}
+              disabled={s.saving}
+              unlocked
+            />
+          ))}
+        </div>
+      </SettingRow>
+      <div className="setting-bar">
+        {enabling && confirming ? (
+          <div className="setting-row">
+            <span className="warning">
+              Ligar a publicação automática {formatPlatformList(s.values.platforms) || "em nenhuma plataforma"}?
+            </span>
+            <button className="button approve" disabled={s.saving} onClick={() => s.save()}>
+              <Power className="ic" /> {s.saving ? "Gravando…" : "Sim, ligar"}
+            </button>
+            <button className="button" disabled={s.saving} onClick={() => setConfirming(false)}>
+              <X className="ic" /> Cancelar
+            </button>
+          </div>
+        ) : (
+          <div className="setting-row">
+            <button
+              className="button primary"
+              disabled={s.saving || !s.changed}
+              onClick={() => (enabling ? setConfirming(true) : s.save())}
+            >
+              <FloppyDisk className="ic" />
+              {s.saving ? "Gravando…" : "Gravar"}
+            </button>
+            {s.changed && (
+              <button className="button" disabled={s.saving} onClick={s.discard}>
+                <ArrowCounterClockwise className="ic" /> Descartar
+              </button>
+            )}
+          </div>
+        )}
+        <ResultMessage result={s.result} />
+      </div>
+    </SettingsCard>
+  );
+}

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

@@ -0,0 +1,62 @@
+/* --- browser login (YouTube and TikTok) ---------------------------------------------- */
+/* opens in Dia, in the default browser, or only makes the link to paste (useBrowserConnect) */
+
+import { useBrowserConnect } from "../../../../hooks/useBrowserConnect";
+import { Copy, LinkSimple, Plug } from "../../../../components/icons";
+import { ResultMessage } from "../../../../components/ResultMessage";
+
+export function BrowserConnect({
+  platform,
+  ready,
+  hasKeys,
+  onConnect,
+}: {
+  platform: "youtube" | "tiktok";
+  ready: boolean;
+  hasKeys: boolean;
+  onConnect: () => void;
+}) {
+  const yt = platform === "youtube";
+  const keys = yt ? "o Client ID e o Client secret" : "a Client key e o Client secret";
+  const { asking, result, connection, copied, waiting, ask, copy } = useBrowserConnect(platform, onConnect);
+
+  return (
+    <>
+      <div className="setting-row">
+        <button className="button" disabled={!!asking || !hasKeys} onClick={() => ask("dia")}>
+          <Plug className="ic" /> {asking === "dia" ? "Abrindo…" : ready ? "Reconectar no Dia" : "Conectar no Dia"}
+        </button>
+        <button className="button" disabled={!!asking || !hasKeys} onClick={() => ask("link")}>
+          <LinkSimple className="ic" /> {asking === "link" ? "Gerando…" : "Gerar link para copiar"}
+        </button>
+        <button className="subtle-link" disabled={!!asking || !hasKeys} onClick={() => ask("default")}>
+          Abrir no navegador padrão
+        </button>
+      </div>
+      {waiting && connection?.url && (
+        <div className="setting-row">
+          <input
+            readOnly
+            value={connection.url}
+            onFocus={e => e.target.select()}
+            spellCheck={false}
+            aria-label={`Link do login ${yt ? "do Google" : "do TikTok"}`}
+          />
+          <button className="button" onClick={copy}>
+            <Copy className="ic" /> {copied ? "copiado" : "Copiar"}
+          </button>
+        </div>
+      )}
+      <p className="hint">
+        {!hasKeys
+          ? `Grave ${keys} abaixo antes de conectar.`
+          : waiting
+            ? `Aguardando o login (até 10 min). O link só funciona num navegador desta máquina: a volta ${yt ? "do Google" : "do TikTok"} é para 127.0.0.1.`
+            : yt
+              ? "Escolha a conta do canal no login do Google. O link serve em qualquer navegador desta máquina."
+              : "Entre na conta do TikTok que recebe os vídeos. O link serve em qualquer navegador desta máquina."}
+      </p>
+      <ResultMessage result={result} />
+    </>
+  );
+}

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import { Checkbox } from "../../../../components/ui/checkbox";
+
+export const CheckField = ({
+  value,
+  onChange,
+  disabled,
+  children,
+}: {
+  value: boolean;
+  onChange: (v: boolean) => void;
+  disabled?: boolean;
+  children: ReactNode;
+}) => (
+  <label className="check-toggle">
+    <Checkbox checked={value} disabled={disabled} onCheckedChange={onChange} />
+    <span>{children}</span>
+  </label>
+);

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

@@ -0,0 +1,113 @@
+/* --- Instagram ------------------------------------------------------------------- */
+
+import { useState } from "react";
+import { useSaveAction } from "../../../../hooks/useSaveAction";
+import { useSettingsSection } from "../../../../hooks/useSettingsSection";
+import { api } from "../../../../lib/api";
+import { coverToNumber, coverToText } from "../../../../lib/publish-settings";
+import { Plug } from "../../../../components/icons";
+import { PlatformIcon } from "../../../../components/PlatformIcon";
+import { ResultMessage } from "../../../../components/ResultMessage";
+import { SettingRow } from "../../../../components/SettingRow";
+import { AccountStatus } from "./AccountStatus";
+import { connectedBadge } from "./badges";
+import { CheckField } from "./CheckField";
+import { SaveBar } from "./SaveBar";
+import { SettingsCard } from "./SettingsCard";
+import type { PanelProps } from "./types";
+
+export function InstagramPanel({ publish: p, accounts, loading, onSave, reloadAccounts }: PanelProps) {
+  const s = useSettingsSection(
+    "instagram",
+    { ...p.instagram, cover_at_s: coverToText(p.instagram.cover_at_s) },
+    onSave,
+    v => ({ ...v, cover_at_s: coverToNumber(v.cover_at_s) }),
+  );
+  const [token, setToken] = useState("");
+  const connect = useSaveAction(() => {
+    onSave();
+    reloadAccounts(true);
+  });
+  const ig = accounts?.instagram;
+  const sendToken = async () => {
+    if (await connect.save(() => api.settings.publish.connect.$post({ json: { platform: "instagram", token } })))
+      setToken("");
+  };
+  return (
+    <SettingsCard
+      id="instagram"
+      title="Instagram"
+      icon={<PlatformIcon id="instagram" />}
+      extra={connectedBadge(ig?.ready, loading)}
+    >
+      <SettingRow label="Conta" help="Reels: só conta profissional (Criador ou Empresa)">
+        <AccountStatus account={ig} loading={loading} />
+        {ig?.ready && ig.expires && (
+          <p className="hint">
+            Token vale até {new Date(ig.expires).toLocaleDateString("pt-BR")}; renova sozinho a cada publicação.
+          </p>
+        )}
+      </SettingRow>
+      <SettingRow
+        label="Token"
+        help={
+          <>
+            Meta for Developers → Instagram → Generate access tokens (<code>instagram_business_content_publish</code>;
+            para o omnichat, também <code>instagram_business_manage_comments</code> e{" "}
+            <code>instagram_business_manage_messages</code>)
+          </>
+        }
+      >
+        <form
+          className="setting-row"
+          onSubmit={e => {
+            e.preventDefault();
+            if (token.trim()) sendToken();
+          }}
+        >
+          <input
+            type="password"
+            value={token}
+            onChange={e => setToken(e.target.value)}
+            disabled={connect.saving}
+            placeholder={ig?.ready ? "Cole um token novo para trocar" : "Cole o token"}
+            autoComplete="off"
+            spellCheck={false}
+          />
+          <button className="button" type="submit" disabled={connect.saving || !token.trim()}>
+            <Plug className="ic" /> {connect.saving ? "Conectando…" : "Conectar"}
+          </button>
+        </form>
+        <ResultMessage result={connect.result} />
+      </SettingRow>
+
+      <SettingRow label="Feed" help="Além de aparecer em Reels">
+        <CheckField value={s.values.share_to_feed} onChange={v => s.set("share_to_feed", v)} disabled={s.saving}>
+          Compartilhar também no feed
+        </CheckField>
+      </SettingRow>
+      <SettingRow label="Capa" help="Vazio = a escolha do Instagram">
+        <div className="setting-row">
+          <input
+            className="short"
+            inputMode="decimal"
+            value={s.values.cover_at_s}
+            disabled={s.saving}
+            onChange={e => s.set("cover_at_s", e.target.value)}
+          />
+          <span className="subtle">Segundos do vídeo</span>
+        </div>
+      </SettingRow>
+      <SettingRow label="Versão da API" help="Graph API do Instagram, como v23.0">
+        <input
+          className="short"
+          value={s.values.api_version}
+          disabled={s.saving}
+          spellCheck={false}
+          onChange={e => s.set("api_version", e.target.value)}
+        />
+      </SettingRow>
+      <SaveBar changed={s.changed} saving={s.saving} onSave={() => s.save()} onDiscard={s.discard} result={s.result} />
+    </SettingsCard>
+  );
+}