@crievo/omni 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,153 @@
+/* /omnichat: every omnichat rule on Instagram comments (tools/omnichat.mjs), the videos', the
+   carousels' and the outside posts' (Reel, carousel or photo), each a card that opens the rule on its own
+   screen: /omnichat/<video|carousel|post>/<id> (OmnichatRulePage), with a Voltar bar. */
+
+import { useMemo, useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { Link } from "@tanstack/react-router";
+import { ArrowClockwise, Carousel, LinkSimple, VideoCamera } from "../../components/icons";
+import { OmnichatAccountStatus } from "../../components/OmnichatAccountStatus";
+import { Skeleton } from "../../components/ui/skeleton";
+import { useOmnichatState } from "../../hooks/useOmnichat";
+import { useVideos } from "../../hooks/useVideos";
+import { api, read } from "../../lib/api";
+import { aspectRatio, mediaUrl } from "../../lib/media";
+import type { OmnichatRuleSummary } from "../../types/api";
+import { NewFromLink } from "./components/NewFromLink";
+import { RuleListItem, ruleKey } from "./components/RuleListItem";
+import type { RulePreviewData } from "./components/RulePreview";
+import { RuleView, type RuleKind } from "./components/RuleView";
+
+/* the list is split by what the rule is on, one tab each; every tab keeps the newest-first order */
+const GROUPS: { type: OmnichatRuleSummary["type"]; title: string; Icon: typeof VideoCamera }[] = [
+  { type: "video", title: "Vídeos", Icon: VideoCamera },
+  { type: "carousel", title: "Carrosséis", Icon: Carousel },
+  { type: "post", title: "Posts de fora", Icon: LinkSimple },
+];
+
+/* one rule on its own screen (the Publish stage's "Abrir no Omnichat" lands here) */
+export function OmnichatRulePage({ kind, id }: { kind: RuleKind; id: string }) {
+  const { state, error } = useOmnichatState(true);
+  const { videos } = useVideos();
+  const title = videos?.find(v => v.slug === id)?.title;
+  return <RuleView kind={kind} id={id} title={title} videosLoaded={!!videos} state={state} error={error} />;
+}
+
+export function OmnichatPage() {
+  const navigate = useNavigate();
+  const { state, error, reload } = useOmnichatState(true);
+  const { videos } = useVideos();
+  const [checking, setChecking] = useState(false);
+  const titles = useMemo(() => new Map((videos ?? []).map(v => [v.slug, v.title])), [videos]);
+  /* newest first, by the post's publish date; without one (not up yet) to the end, by the rule's last change */
+  const rules = useMemo(() => {
+    const ms = (d?: string | null) => {
+      const t = d ? Date.parse(d) : NaN;
+      return Number.isFinite(t) ? t : -Infinity;
+    };
+    return [...(state?.rules ?? [])].sort(
+      (a, b) => ms(b.published_at) - ms(a.published_at) || ms(b.updated_at) - ms(a.updated_at),
+    );
+  }, [state]);
+  /* one tab per kind of post that has rules; a card opened by a link brings its tab */
+  const [tab, setTab] = useState<OmnichatRuleSummary["type"]>("video");
+  const tabs = GROUPS.map(g => ({ ...g, rules: rules.filter(r => r.type === g.type) })).filter(g => g.rules.length);
+  const current = tabs.find(g => g.type === tab) ?? tabs[0];
+  const enabledCount = rules.filter(r => r.enabled).length;
+  /* asks the API again (account and permission), without waiting the 2 min */
+  const check = async () => {
+    setChecking(true);
+    await read(api.omnichat.$get({ query: { refresh: "", rules: "0" } })).catch(() => null);
+    reload();
+    setChecking(false);
+  };
+  const previews = useMemo(
+    () =>
+      new Map(
+        (videos ?? []).map(v => [
+          v.slug,
+          { src: mediaUrl(v, v.thumbnail ?? v.cover), aspect: aspectRatio(v) } as RulePreviewData,
+        ]),
+      ),
+    [videos],
+  );
+  const titleOf = (r: OmnichatRuleSummary) =>
+    r.type === "video"
+      ? (titles.get(r.id) ?? r.id)
+      : r.type === "carousel"
+        ? (titles.get(r.id) ?? r.id)
+        : `Post ${r.id}`;
+
+  return (
+    <div className="page omnichat-page">
+      <header className="header">
+        <h1>Omnichat</h1>
+        <span className="subtle">
+          {state ? (
+            `${rules.length} ${rules.length === 1 ? "regra" : "regras"} · ${enabledCount} ${enabledCount === 1 ? "ligada" : "ligadas"}`
+          ) : (
+            <Skeleton className="row" style={{ display: "inline-block", width: 130, verticalAlign: "middle" }} />
+          )}
+        </span>
+        <button
+          className="button small header-action"
+          disabled={checking}
+          onClick={check}
+          title="Pergunta ao Instagram de novo pela conta e pela permissão de comentários"
+        >
+          <ArrowClockwise className="ic" /> {checking ? "Conferindo…" : "Conferir a conta"}
+        </button>
+      </header>
+      <p className="intro">
+        Quem comenta a palavra-chave num post recebe uma DM com o link e uma resposta pública. Toda regra nasce
+        desligada: liga com você, ou sozinha quando o post sobe, se{" "}
+        <Link to="/settings/$category" params={{ category: "publishing" }} className="link">
+          Ao publicar
+        </Link>{" "}
+        estiver marcado.
+      </p>
+      {error && <p className="response error">{error}</p>}
+      <OmnichatAccountStatus state={state} enabled={enabledCount > 0} />
+      <NewFromLink
+        onCreate={(type, id) => {
+          reload();
+          navigate({ to: "/omnichat/$kind/$id", params: { kind: type, id } });
+        }}
+      />
+      {state && !rules.length && (
+        <p className="hint">
+          Nenhuma regra ainda. Crie na etapa <strong>Publicar</strong> de um vídeo ou de um carrossel, ou cole acima o
+          link de um post que já está no ar.
+        </p>
+      )}
+      {!!tabs.length && (
+        <div className="segmented" role="tablist" aria-label="Tipo de post">
+          {tabs.map(g => (
+            <button
+              key={g.type}
+              type="button"
+              role="tab"
+              aria-selected={g.type === current?.type}
+              className={g.type === current?.type ? "active" : ""}
+              onClick={() => setTab(g.type)}
+            >
+              <g.Icon className="ic" /> {g.title} <span className="tab-count">{g.rules.length}</span>
+            </button>
+          ))}
+        </div>
+      )}
+      {current && (
+        <div className="auto-rule-grid">
+          {current.rules.map(r => (
+            <RuleListItem
+              key={ruleKey(r)}
+              rule={r}
+              title={titleOf(r)}
+              preview={r.type !== "post" ? (previews.get(r.id) ?? null) : null}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,22 @@
+/* The whole machine queue, with each task's log. */
+
+import { QueuePanel } from "../../components/QueuePanel";
+
+export function QueuePage() {
+  return (
+    <div className="page queue-page">
+      <header className="header">
+        <h1>
+          <em>Fila da</em> máquina
+        </h1>
+      </header>
+      <p className="intro">
+        Uma tarefa pesada por vez: voz, legenda, render final, som, montagem e, quando usado, o Premiere (montar,
+        conferir, exportar). Cada ferramenta pega a vez sozinha, venha do chat, do terminal ou do studio, e a fila vale
+        mesmo com o studio desligado. No terminal: <code>$PY tools/job_queue.py</code>. Como funciona:{" "}
+        <code>reference/studio.md</code>.
+      </p>
+      <QueuePanel recent={30} />
+    </div>
+  );
+}

package/studio/web/pages/ReferencePage/components/ReferenceTexts.tsx

@@ -0,0 +1,131 @@
+import { useEffect, useRef, useState } from "react";
+import { api, enc, send } from "../../../lib/api";
+import { Markdown } from "../../../components/Markdown";
+import { FloppyDisk, Pencil, X } from "../../../components/icons";
+import type { ReferenceDetail } from "../../../types/api";
+
+/* swaps the guide's first `# …` line for the new title (or creates it) */
+const withTitle = (text: string, title: string) =>
+  /^#\s+.+$/m.test(text) ? text.replace(/^#\s+.+$/m, () => `# ${title}`) : `# ${title}\n\n${text}`;
+
+/* the reference texts (guide, tokens), each editable. `editing` is the header's "Editar": opens the
+   guide in the editor and, on save, takes along the name the header has in its field. */
+export function ReferenceTexts({
+  name,
+  texts,
+  editing,
+  onClose,
+  currentTitle,
+  newTitle,
+}: {
+  name: string;
+  texts: ReferenceDetail["texts"];
+  editing: boolean;
+  onClose: () => void;
+  currentTitle: string;
+  newTitle: string;
+}) {
+  const [tab, setTab] = useState(texts[0]?.path);
+  const [draft, setDraft] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const root = useRef<HTMLDivElement>(null);
+  const current = texts.find(t => t.path === tab) ?? texts[0];
+
+  useEffect(() => {
+    if (editing) {
+      const guide = texts.find(t => t.type === "md") ?? texts[0];
+      if (!guide) return;
+      setTab(guide.path);
+      setError(null);
+      setDraft(guide.text);
+      root.current?.scrollIntoView({ behavior: "smooth", block: "start" });
+    } else {
+      setDraft(null);
+    }
+  }, [editing]);
+
+  if (!current) return null;
+  const isGuide = editing && current.type === "md";
+  const renamed = isGuide && newTitle.trim() && newTitle.trim() !== currentTitle ? newTitle.trim() : null;
+  const switchTo = (path: string) => {
+    if (draft !== null && draft !== current.text && !confirm("Descartar as mudanças deste arquivo?")) return;
+    setTab(path);
+    setDraft(null);
+    setError(null);
+    if (editing) onClose();
+  };
+  const close = () => {
+    setDraft(null);
+    setError(null);
+    if (editing) onClose();
+  };
+  const save = async () => {
+    if (draft === null) return;
+    setSaving(true);
+    setError(null);
+    const text = renamed ? withTitle(draft, renamed) : draft;
+    const r = await send(
+      api.references[":name"].text.$post({ param: { name: enc(name) }, json: { path: current.path, text } }),
+    );
+    setSaving(false);
+    if (r.ok) close();
+    else setError(r.error ?? "Não deu para salvar");
+  };
+  const changed = draft !== null && (draft !== current.text || !!renamed);
+  return (
+    <div className="texts" ref={root}>
+      <div className="tabs">
+        {texts.map(t => (
+          <button key={t.path} className={t.path === current.path ? "active" : ""} onClick={() => switchTo(t.path)}>
+            {t.path}
+          </button>
+        ))}
+        {draft === null && (
+          <button
+            className="button small push-end"
+            onClick={() => {
+              setError(null);
+              setDraft(current.text);
+            }}
+          >
+            <Pencil className="ic" /> Editar este arquivo
+          </button>
+        )}
+      </div>
+      {draft === null ? (
+        current.type === "md" ? (
+          <Markdown text={current.text} />
+        ) : (
+          <pre className="code">{current.text}</pre>
+        )
+      ) : (
+        <div className="text-editor">
+          <textarea
+            value={draft}
+            onChange={e => setDraft(e.target.value)}
+            spellCheck={current.type === "md"}
+            rows={28}
+            autoFocus={!editing}
+            onKeyDown={e => {
+              if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+                e.preventDefault();
+                save();
+              }
+            }}
+          />
+          <div className="actions">
+            <button className="button primary" disabled={saving || !changed} onClick={save}>
+              <FloppyDisk className="ic" /> {saving ? "Salvando…" : "Salvar"}
+            </button>
+            <button className="button" disabled={saving} onClick={close}>
+              <X className="ic" /> Cancelar
+            </button>
+            <span className="hint">⌘S salva. A versão de antes fica guardada ao lado do arquivo.</span>
+          </div>
+          {error && <p className="response error">{error}</p>}
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,216 @@
+/* One reference of the library: measurements, palette, motion strip, videos, sheets and the
+   editable guide, plus the agent session that measures and writes it. */
+
+import { useEffect, useState } from "react";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { useReference } from "../../hooks/useReferences";
+import { useSessionFor } from "../../hooks/useSessions";
+import { timeAgo } from "../../lib/format";
+import { referenceFileUrl } from "../../lib/media";
+import { referenceFacts } from "../../lib/references";
+import { Badge } from "../../components/ui/badge";
+import { Skeleton } from "../../components/ui/skeleton";
+import { NotFound } from "../../components/NotFound";
+import { Palette } from "../../components/Palette";
+import { SessionPanel } from "../../components/SessionPanel";
+import { openLightbox } from "../../components/Lightbox";
+import { ArrowLeft, ArrowUpRight, Pencil } from "../../components/icons";
+import { ReferenceActions } from "../../components/ReferenceActions";
+import { ReferenceTexts } from "./components/ReferenceTexts";
+
+const VIDEO_FILE = /\.(mp4|mov|webm|m4v)$/i;
+
+export function ReferencePage({ name }: { name: string }) {
+  const navigate = useNavigate();
+  const { reference: r, error } = useReference(name);
+  const session = useSessionFor("reference", name);
+  const [editing, setEditing] = useState(false);
+  const [newTitle, setNewTitle] = useState("");
+  useEffect(() => {
+    document.title = `${r?.title ?? name} · Omni`;
+  }, [r?.title, name]);
+
+  if (!r && error?.startsWith("404") && !session) {
+    return (
+      <NotFound
+        title="Estilo visual não encontrado"
+        path={name}
+        text="Nenhum estilo visual com esse nome."
+        back={{ to: "/styles", name: "Estilos visuais" }}
+      />
+    );
+  }
+  if (!r) {
+    return (
+      <div className="page reference">
+        <Link to="/styles" className="back">
+          <ArrowLeft className="ic" /> Estilos visuais
+        </Link>
+        <header className="video-title">
+          <h1>{name}</h1>
+        </header>
+        {error && !session && <p className="error">{error}</p>}
+        {!error && (
+          <div
+            aria-busy="true"
+            aria-label="Carregando o estilo visual"
+            style={{ display: "flex", flexDirection: "column", gap: 12 }}
+          >
+            <Skeleton className="row" style={{ width: "50%" }} />
+            <Skeleton style={{ height: 180, borderRadius: "var(--radius)" }} />
+          </div>
+        )}
+        {session && (
+          <>
+            <p className="note">
+              A pasta aparece quando o <code>measure</code> terminar.
+            </p>
+            <SessionPanel type="reference" target={name} />
+          </>
+        )}
+      </div>
+    );
+  }
+
+  const videos = r.files.filter(f => VIDEO_FILE.test(f.path));
+  const images = r.files.filter(f => !VIDEO_FILE.test(f.path));
+  const m = r.measurements;
+  return (
+    <div className="page reference">
+      <Link to="/styles" className="back">
+        <ArrowLeft className="ic" /> Estilos visuais
+      </Link>
+      <header className="video-header">
+        <ReferenceActions reference={r} part="switch" />
+        <div className="video-title">
+          {editing ? (
+            <input
+              className="title-editing"
+              value={newTitle}
+              maxLength={140}
+              aria-label="Nome do estilo visual"
+              onChange={e => setNewTitle(e.target.value)}
+            />
+          ) : (
+            <h1>{r.title}</h1>
+          )}
+          {!r.enabled && <Badge variant="warning">Desligada</Badge>}
+          {!editing && !!r.texts.length && (
+            <button
+              className="button small"
+              onClick={() => {
+                setNewTitle(r.title);
+                setEditing(true);
+              }}
+            >
+              <Pencil className="ic" /> Editar
+            </button>
+          )}
+          <ReferenceActions
+            reference={r}
+            usedIn={r.used_in.length}
+            onDelete={() => navigate({ to: "/styles" })}
+            part="delete"
+          />
+        </div>
+        <div className="meta">
+          <span className="mono">{r.dir}</span>
+          {referenceFacts(m).map(f => (
+            <span key={f}>{f}</span>
+          ))}
+          {m?.source && /^https?:/.test(m.source) && (
+            <a href={m.source} target="_blank" rel="noreferrer" className="link">
+              Fonte <ArrowUpRight className="ic" />
+            </a>
+          )}
+          <span>Mexida {timeAgo(r.updated)}</span>
+        </div>
+        {r.essence && <p className="essence large">{r.essence}</p>}
+        {!!r.used_in.length && (
+          <p className="meta">
+            Usada em{" "}
+            {r.used_in.map((v, i) => (
+              <span key={v.slug}>
+                {i ? ", " : ""}
+                <Link to="/videos/$slug" params={{ slug: v.slug }} className="link">
+                  {v.title}
+                </Link>
+              </span>
+            ))}
+          </p>
+        )}
+      </header>
+
+      <SessionPanel type="reference" target={name} />
+
+      {(!!r.palette.length || m?.strip) && (
+        <section className="panel">
+          {!!r.palette.length && (
+            <>
+              <h3>
+                Paleta{" "}
+                {m ? (
+                  <span className="subtle">Medida: área na tela e destaques</span>
+                ) : (
+                  <span className="subtle">Dos tokens</span>
+                )}
+              </h3>
+              <Palette colors={r.palette} large />
+            </>
+          )}
+          {m?.strip && (
+            <>
+              <h3>
+                Movimento <span className="subtle">Cada caractere = {m.step} s</span>
+              </h3>
+              <pre className="range">{m.strip}</pre>
+            </>
+          )}
+        </section>
+      )}
+
+      {!!videos.length && (
+        <section className="panel">
+          <h3>Vídeos</h3>
+          <div className="videos-grid">
+            {videos.map(f => (
+              <div key={f.path} className="video-card">
+                <div className="media-card">
+                  <video src={referenceFileUrl(name, f)!} controls preload="metadata" playsInline />
+                </div>
+                <footer>
+                  <span className="mono">{f.path}</span>
+                </footer>
+              </div>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {!!images.length && (
+        <section className="panel">
+          <h3>Quadros e folhas</h3>
+          <div className="sheets-grid">
+            {images.map(f => (
+              <button key={f.path} className="image" onClick={() => openLightbox(referenceFileUrl(name, f)!, f.path)}>
+                <img src={referenceFileUrl(name, f)!} alt="" loading="lazy" />
+                <span>{f.path}</span>
+              </button>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {!!r.texts.length && (
+        <ReferenceTexts
+          name={name}
+          texts={r.texts}
+          editing={editing}
+          onClose={() => setEditing(false)}
+          currentTitle={r.title}
+          newTitle={newTitle}
+        />
+      )}
+    </div>
+  );
+}

package/studio/web/pages/ReferencesPage/components/NewReferenceForm.tsx

@@ -0,0 +1,150 @@
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { api, send } from "../../../lib/api";
+import { uploadStyleFile } from "../../../lib/upload";
+import { Plus, Sparkle, X } from "../../../components/icons";
+
+/* the form asks for two things only: a link to the piece, and/or photos of it. The name comes from the
+   server (the link or the photos), the guide is the agent's work. */
+const MAX_PHOTOS = 12;
+
+type Photo = { id: string; name: string; preview: string; pct: number; path?: string; error?: string };
+
+export function NewReferenceForm({ onClose }: { onClose: () => void }) {
+  const navigate = useNavigate();
+  const [link, setLink] = useState("");
+  const [photos, setPhotos] = useState<Photo[]>([]);
+  const [sending, setSending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [dragging, setDragging] = useState(false);
+  const picker = useRef<HTMLInputElement>(null);
+  /* the previews are object URLs: released when the form goes away */
+  const previews = useRef<string[]>([]);
+  useEffect(
+    () => () => {
+      for (const u of previews.current) URL.revokeObjectURL(u);
+    },
+    [],
+  );
+
+  const patch = (id: string, change: Partial<Photo>) =>
+    setPhotos(list => list.map(p => (p.id === id ? { ...p, ...change } : p)));
+
+  const add = (files: FileList | File[] | null | undefined) => {
+    const images = Array.from(files ?? []).filter(f => f.type.startsWith("image/"));
+    if (!images.length) return;
+    setError(null);
+    const room = MAX_PHOTOS - photos.length;
+    if (images.length > room) setError(`No máximo ${MAX_PHOTOS} fotos.`);
+    for (const file of images.slice(0, Math.max(room, 0))) {
+      const id = crypto.randomUUID();
+      const preview = URL.createObjectURL(file);
+      previews.current.push(preview);
+      setPhotos(list => [...list, { id, name: file.name, preview, pct: 0 }]);
+      void uploadStyleFile(file, pct => patch(id, { pct })).then(r =>
+        r.ok && r.path ? patch(id, { path: r.path, pct: 100 }) : patch(id, { error: r.error ?? "O envio falhou" }),
+      );
+    }
+  };
+
+  const uploading = photos.some(p => !p.path && !p.error);
+  const sent = photos.filter(p => p.path).map(p => p.path!);
+  const ready = !!link.trim() || sent.length > 0;
+
+  const create = async () => {
+    setSending(true);
+    setError(null);
+    const r = await send(
+      api.references.$post({ json: { source: link.trim() || undefined, images: sent.length ? sent : undefined } }),
+    );
+    setSending(false);
+    if (r.ok && r.name) navigate({ to: "/styles/$name", params: { name: r.name } });
+    else setError(r.error ?? "Não deu para criar");
+  };
+
+  return (
+    <div
+      className={`form new-reference${dragging ? " dragging" : ""}`}
+      onDragOver={e => {
+        if (e.dataTransfer.types.includes("Files")) {
+          e.preventDefault();
+          setDragging(true);
+        }
+      }}
+      onDragLeave={e => {
+        if (e.currentTarget === e.target) setDragging(false);
+      }}
+      onDrop={e => {
+        e.preventDefault();
+        setDragging(false);
+        add(e.dataTransfer.files);
+      }}
+    >
+      <label className="field">
+        <span>
+          Link <em>Instagram, YouTube…</em>
+        </span>
+        <input
+          value={link}
+          onChange={e => setLink(e.target.value)}
+          placeholder="https://www.instagram.com/reel/…"
+          inputMode="url"
+          autoFocus
+        />
+      </label>
+      <div className="field">
+        <span>
+          Fotos <em>Telas, quadros, capturas do estilo</em>
+        </span>
+        <ul className="style-photos">
+          {photos.map(p => (
+            <li key={p.id} className={p.error ? "failed" : ""} title={p.error ?? p.name}>
+              <img src={p.preview} alt={p.name} />
+              {!p.path && !p.error && <progress value={p.pct} max={100} aria-label={`Enviando ${p.name}`} />}
+              <button
+                type="button"
+                className="style-photo-remove"
+                aria-label={`Tirar ${p.name}`}
+                onClick={() => setPhotos(list => list.filter(x => x.id !== p.id))}
+              >
+                <X />
+              </button>
+            </li>
+          ))}
+          {photos.length < MAX_PHOTOS && (
+            <li>
+              <button type="button" className="style-photo-add" onClick={() => picker.current?.click()}>
+                <Plus className="ic" />
+                <span>Adicionar foto</span>
+              </button>
+            </li>
+          )}
+        </ul>
+        <input
+          ref={picker}
+          type="file"
+          accept="image/*"
+          multiple
+          hidden
+          onChange={e => {
+            add(e.target.files);
+            e.target.value = "";
+          }}
+        />
+      </div>
+      <div className="actions">
+        <button className="button primary" disabled={sending || uploading || !ready} onClick={create}>
+          <Sparkle className="ic" /> {sending ? "Criando…" : uploading ? "Enviando as fotos…" : "Criar estilo visual"}
+        </button>
+        <button className="button" onClick={onClose}>
+          <X className="ic" /> Cancelar
+        </button>
+        <span className="hint">
+          Um link, fotos ou os dois. Arraste as fotos para cá, se preferir. O agente mede, lê o material e escreve o
+          guia do estilo visual.
+        </span>
+      </div>
+      {error && <p className="response error">{error}</p>}
+    </div>
+  );
+}