@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/lib/stage-history.ts

@@ -0,0 +1,141 @@
+/* A stage's previous results (StageDrawer): which history/ versions are really previous, today's
+   file matching each kept one, and the queue run that made each version. */
+
+import { currentExport } from "./export";
+import { toMs } from "./format";
+import type { StageDef } from "./stages";
+import type { FileEntry, HistoryVersion, Queue, Ticket, VideoDetail } from "../types/api";
+
+/* which runs make the versions of each history/ dir */
+export const GENERATED_BY: Record<string, string[]> = {
+  composition: [],
+  voice: ["voice"],
+  render: ["render"],
+  sound: ["sound", "premiere-assemble", "assembly"],
+  captions: ["captions"],
+  assembly: ["assembly", "premiere-assemble", "premiere-export"],
+  check: ["premiere-check"],
+  export: ["premiere-export"],
+};
+
+export const HISTORY_LABEL: Record<string, string> = {
+  composition: "Composição",
+  voice: "Voz",
+  render: "Render",
+  sound: "Som",
+  captions: "Legenda",
+  assembly: "Montagem",
+  check: "Conferência",
+  export: "Outros exports",
+};
+
+export const kindOf = (f: FileEntry) =>
+  /\.(mp4|mov|webm)$/i.test(f.path)
+    ? "video"
+    : /\.(png|jpe?g|webp)$/i.test(f.path)
+      ? "image"
+      : /\.(wav|mp3|m4a)$/i.test(f.path)
+        ? "audio"
+        : /\.(srt|json)$/i.test(f.path)
+          ? "text"
+          : "other";
+
+export const fileName = (f: FileEntry) => f.path.split("/").pop()!;
+
+/* the run that made the version: of the right tool, of this video, and running when the file was
+   written. The file is written inside the run, so the slack is minimal: the next run usually
+   starts right after, and a wide slack would mistake it for the one that made it */
+export function runOf(version: HistoryVersion, runs: Ticket[]) {
+  const t = toMs(version.at)!;
+  return runs
+    .filter(
+      r =>
+        (GENERATED_BY[version.stage] ?? []).includes(r.tool) &&
+        r.started_at &&
+        r.ended_at &&
+        toMs(r.started_at)! - 100 <= t &&
+        t <= toMs(r.ended_at)! + 1000,
+    )
+    .sort((a, b) => toMs(b.started_at)! - toMs(a.started_at)!)[0];
+}
+
+/* today's file matching a file of a version */
+export function currentOf(video: VideoDetail, version: HistoryVersion, f: FileEntry): string | null {
+  const n = fileName(f);
+  switch (version.stage) {
+    case "composition":
+      return `motion/stills/${n}`;
+    case "voice":
+      return `voice/${n}`;
+    case "render":
+      return `motion/${n}`;
+    case "sound":
+      return `sound/${n}`;
+    case "captions":
+      return "captions.srt";
+    case "assembly":
+      return n === "assembly.json" ? "export/assembly.json" : `export/${n}`;
+    case "check":
+      return `check/${n}`;
+    case "export":
+      return currentExport(video)?.path ?? null;
+  }
+  return null;
+}
+
+/* a previous version with the same files (same mtime and size) as today's is not really previous:
+   a run fell over before checking */
+export function isRepeat(video: VideoDetail, version: HistoryVersion) {
+  const media = version.files.filter(f => kindOf(f) !== "text");
+  return (
+    media.length > 0 &&
+    media.every(f => {
+      const now = video.files.find(x => x.path === currentOf(video, version, f));
+      return now && now.size === f.size && Math.abs(now.mtime - f.mtime) < 2;
+    })
+  );
+}
+
+export function versionsOf(stage: StageDef, video: VideoDetail): HistoryVersion[] {
+  const kept = video.history.filter(h => stage.history.includes(h.stage) && !isRepeat(video, h));
+  if (stage.parts?.includes("export")) {
+    /* besides the kept assemblies, the other MP4s in export/ (an old Premiere export, for example) */
+    const current = currentExport(video);
+    const loose = video.files
+      .filter(f => f.path.startsWith("export/") && /\.(mp4|mov)$/i.test(f.path) && f.path !== current?.path)
+      .map(f => ({ stage: "export", key: null, at: new Date(f.mtime).toISOString(), files: [f], data: {} }));
+    return [...kept, ...loose].sort((a, b) => b.at.localeCompare(a.at));
+  }
+  return kept;
+}
+
+export function versionSrc(video: VideoDetail, path: string, mtime?: number) {
+  return `/media/${encodeURIComponent(video.slug)}/${path.split("/").map(encodeURIComponent).join("/")}${mtime ? `?v=${mtime}` : ""}`;
+}
+
+export function countPreviousResults(stage: StageDef, video: VideoDetail) {
+  return versionsOf(stage, video).length + video.runs.filter(t => stage.tools.includes(t.tool)).length;
+}
+
+/* the stage's runs, newest first: the queue has the state now; the video detail, the ones that
+   already left the recent list */
+export function stageRuns(stage: StageDef, video: VideoDetail, queue: Queue | null): Ticket[] {
+  const live = new Map(
+    [...video.runs, ...(queue ? [...queue.recent, ...queue.running, ...queue.waiting] : [])]
+      .filter(t => t.dir === video.dir)
+      .map(t => [t.id, t]),
+  );
+  return [...live.values()]
+    .filter(t => stage.tools.includes(t.tool))
+    .sort((a, b) => b.arrived_at.localeCompare(a.arrived_at));
+}
+
+/* the versions by history/ dir and key (one group per line, in voice), in order */
+export function groupVersions(versions: HistoryVersion[]): Map<string, HistoryVersion[]> {
+  const groups = new Map<string, HistoryVersion[]>();
+  for (const ver of versions) {
+    const k = ver.key ? `${ver.stage}/${ver.key}` : ver.stage;
+    groups.set(k, [...(groups.get(k) ?? []), ver]);
+  }
+  return groups;
+}

package/studio/web/lib/stages.ts

@@ -0,0 +1,344 @@
+/* Each pipeline's stages as the UI shows them: who does it, how to run it, what it writes, which
+   queue tools belong to it and which history/ versions are its results. A content delivers one or
+   more pipelines (`deliverables`): the video's (the id is the one of `omnivideo.py status --json`)
+   and the carousel's (the id is `carousel-<stage of carousel.mjs status>`). New pipeline = a
+   StageDef list in PIPELINES and its state in getStageState. */
+
+import { formatElapsed, formatWhen, toMs } from "./format";
+import type {
+  Ticket,
+  Queue,
+  PipelineStatus,
+  Publication,
+  ScenesApproval,
+  ScriptApproval,
+  ReferenceSwap,
+  Deliverable,
+  CarouselSummary,
+} from "../types/api";
+
+export type Pipeline = Deliverable;
+
+export type StageDef = {
+  id: string;
+  pipeline?: Pipeline;
+  num: string;
+  name: string;
+  title: string;
+  owner: string;
+  command?: string;
+  writes: string;
+  tools: string[];
+  history: string[];
+  /* the status stages this UI step joins (narration, voice and timing become one step);
+     without it, the step is just the stage `id` */
+  parts?: string[];
+};
+
+export const STAGES: StageDef[] = [
+  {
+    id: "script",
+    num: "1",
+    name: "Roteiro",
+    title: "Roteiro do conteúdo",
+    owner: "O agente, com a skill av-script",
+    writes: "script.md",
+    tools: [],
+    history: [],
+  },
+  {
+    id: "motion_script",
+    num: "2",
+    name: "Roteiro de motion",
+    title: "Roteiro de motion",
+    owner: "O agente, com a skill av-motion",
+    writes: "motion.md e as cenas e beats do scenes.json",
+    tools: [],
+    history: [],
+  },
+  {
+    id: "motion",
+    num: "3",
+    name: "Composição",
+    title: "Composição: still e folhas",
+    owner: "O agente, com a skill av-motion",
+    command: "node tools/build-motion.mjs videos/<slug> --stills --sheets --transitions",
+    writes: "motion/*.html e motion/stills/",
+    tools: [],
+    history: ["composition"],
+  },
+  {
+    id: "narration",
+    num: "4",
+    name: "Narração e voz",
+    title: "Narração, voz e tempo",
+    owner:
+      "O agente escreve as falas (av-narration); omnivideo.py voice gera cada uma (Fish Audio, com Cartesia e VoiceStudio de fallback) e omnivideo.py timing posiciona",
+    command: "$PY tools/omnivideo.py voice videos/<slug> && $PY tools/omnivideo.py timing videos/<slug>",
+    writes:
+      "As falas e o enters_with dos beats, voice/*.wav, e a duração e o início de cada fala e cena no scenes.json",
+    tools: ["voice"],
+    history: ["voice"],
+    parts: ["narration", "voice", "timing"],
+  },
+  {
+    id: "render",
+    num: "5",
+    name: "Editor",
+    title: "Editor: timeline, som, legenda e exportação",
+    owner:
+      "build-motion.mjs --render e sound.mjs; a timeline edita som e cortes; omnivideo.py captions mede a legenda; assemble.mjs (ffmpeg) monta o MP4",
+    command:
+      "node tools/build-motion.mjs videos/<slug> --sheets --transitions --render && $PY tools/omnivideo.py captions videos/<slug> && node tools/assemble.mjs videos/<slug>",
+    writes:
+      "motion/*.mp4, sound/, captions.srt com o tempo de cada palavra, export/<slug>.mp4, a folha de conferência e export/assembly.json",
+    tools: ["render", "sound", "captions", "assembly"],
+    history: ["render", "sound", "captions", "assembly"],
+    parts: ["render", "captions", "export"],
+  },
+  {
+    id: "publish",
+    num: "6",
+    name: "Publicar",
+    title: "Publicar",
+    owner: "Você, pelo botão (ou o agente no fim do pipeline, com publish.auto.approved)",
+    command: "node tools/publish.mjs videos/<slug> --youtube --instagram --tiktok --confirm",
+    writes: "publication.json: o texto (escrito a partir do roteiro), o id e o link de cada plataforma",
+    tools: [],
+    history: [],
+  },
+];
+
+export const CAROUSEL_STAGES: StageDef[] = [
+  {
+    id: "carousel-script",
+    pipeline: "carousel",
+    num: "1",
+    name: "Roteiro",
+    title: "Roteiro do carrossel",
+    owner: "O agente, com a skill av-carousel",
+    writes: "carousel/script.md, e os slides, o objetivo e a legenda do post no carousel.json",
+    tools: [],
+    history: [],
+  },
+  {
+    id: "carousel-composition",
+    pipeline: "carousel",
+    num: "2",
+    name: "Composição",
+    title: "Composição: os slides em código",
+    owner: "O agente, com a skill av-carousel",
+    command: "node tools/carousel.mjs build videos/<slug> && node tools/carousel.mjs export videos/<slug>",
+    writes: "carousel/src/ (HTML de cada slide), png/, a folha e export/ (JPEG)",
+    tools: [],
+    history: [],
+  },
+  {
+    id: "carousel-publish",
+    pipeline: "carousel",
+    num: "3",
+    name: "Publicar",
+    title: "Publicar no Instagram",
+    owner: "Você, pelo botão",
+    command: "node tools/publish.mjs carousel videos/<slug> --confirm",
+    writes: "carousel/publication.json: a legenda, o id e o link do post",
+    tools: [],
+    history: [],
+  },
+];
+
+export const PIPELINES: Record<Pipeline, StageDef[]> = {
+  video: STAGES.map(s => ({ ...s, pipeline: "video" as const })),
+  carousel: CAROUSEL_STAGES,
+};
+/* "Sem narração e voz" (content.json narration: false): the spoken script and the narration/voice steps do not
+   exist for the video; the others stay and are numbered again */
+export const SILENT_SKIPPED_STAGES = new Set(["script", "narration"]);
+export const videoStagesFor = (narration: boolean): StageDef[] =>
+  narration
+    ? PIPELINES.video
+    : PIPELINES.video.filter(s => !SILENT_SKIPPED_STAGES.has(s.id)).map((s, i) => ({ ...s, num: String(i + 1) }));
+export const PIPELINE_NAME: Record<Pipeline, string> = { video: "Vídeo", carousel: "Carrossel" };
+export const pipelineOf = (stage: StageDef): Pipeline => stage.pipeline ?? "video";
+
+/* also accepts a part's id: /videos/<slug>/voice opens the step that joins it */
+export const findStage = (id: string) =>
+  [...PIPELINES.video, ...PIPELINES.carousel].find(s => s.id === id || s.parts?.includes(id));
+
+export type StageState =
+  | { kind: "done" }
+  | { kind: "running"; ticket: Ticket }
+  | { kind: "queued"; ticket: Ticket; position: number }
+  | { kind: "user" }
+  | { kind: "rejected" }
+  | { kind: "redoing"; reason: string }
+  | { kind: "warning"; reason: string }
+  | { kind: "scheduled"; when: string }
+  | { kind: "error"; ticket: Ticket }
+  | { kind: "next" }
+  | { kind: "missing" }
+  | { kind: "na" };
+
+/* what getStageState needs of a video (VideoSummary and VideoDetail both fit) */
+export type StageInput = {
+  dir: string;
+  status: PipelineStatus | null;
+  scenes_approval?: ScenesApproval | null;
+  script_approval?: ScriptApproval | null;
+  reference_swap?: ReferenceSwap | null;
+  publication?: Publication | null;
+  deliverables?: Deliverable[];
+  carousel?: CarouselSummary | null;
+};
+
+/* The carousel does not go through the queue: the state comes from carousel.mjs's diagnosis.
+   Composition done = slides up to date and without warnings (the JPEG comes out at publish time). */
+function carouselStageState(stage: StageDef, v: StageInput): StageState {
+  const c = v.carousel;
+  const part = stage.id.replace(/^carousel-/, "");
+  if (!c) return part === "script" && v.deliverables?.includes("carousel") ? { kind: "next" } : { kind: "missing" };
+  if (c.error) return { kind: "warning", reason: c.error };
+  const st = (id: string) => c.stages.find(s => s.id === id);
+  if (part === "publish") {
+    const ig = c.publication?.instagram;
+    if (ig?.last_error && (!ig.published_at || ig.last_error.at > ig.published_at))
+      return { kind: "warning", reason: `A última tentativa falhou: ${ig.last_error.message}` };
+    if (ig?.id) return { kind: "done" };
+    return st("composition")?.ok ? { kind: "next" } : { kind: "missing" };
+  }
+  const s = st(part);
+  if (s?.ok) return { kind: "done" };
+  /* `missing` is carousel.mjs's human text ("avisos em s02, s05") */
+  if (part === "composition" && s?.missing && /\b(avisos|warnings)\b/.test(s.missing))
+    return { kind: "warning", reason: `Slides com aviso: ${s.missing}` };
+  return c.next === part ? { kind: "next" } : { kind: "missing" };
+}
+
+/* publish is not a status stage: done when some platform has a link, next when the export is
+   up to date, scheduled while the scheduler waits for the time */
+function publishStageState(v: StageInput): StageState {
+  const s = v.publication?.schedule;
+  if (s?.state === "failed" || s?.state === "missed") {
+    return {
+      kind: "warning",
+      reason: `A publicação agendada ${s.state === "missed" ? "passou da hora" : "falhou"}: ${s.last_error?.message ?? ""}`,
+    };
+  }
+  if (s) return { kind: "scheduled", when: s.when };
+  const plats = [v.publication?.youtube, v.publication?.instagram, v.publication?.tiktok];
+  const failed = plats.find(p => p?.last_error && (!p.published_at || p.last_error.at > p.published_at));
+  if (failed) return { kind: "warning", reason: `A última tentativa falhou: ${failed.last_error!.message}` };
+  if (plats.some(p => p?.id)) return { kind: "done" };
+  const exp = v.status?.stages.find(s => s.id === "export");
+  return exp?.ok && !exp.outdated ? { kind: "next" } : { kind: "missing" };
+}
+
+const byRecent = (a: Ticket, b: Ticket) => (b.ended_at ?? b.arrived_at).localeCompare(a.ended_at ?? a.arrived_at);
+
+/* step with parts: done when all are; else the most urgent state among them */
+const URGENCY: StageState["kind"][] = [
+  "running",
+  "queued",
+  "error",
+  "warning",
+  "user",
+  "rejected",
+  "redoing",
+  "next",
+  "scheduled",
+  "missing",
+  "na",
+];
+
+export function getStageState(stage: StageDef, v: StageInput, queue: Queue | null, runs: Ticket[] = []): StageState {
+  if (pipelineOf(stage) === "carousel") return carouselStageState(stage, v);
+  if (stage.parts) {
+    const states = stage.parts.map(id => getStageState({ ...stage, id, parts: undefined }, v, queue, runs));
+    if (states.every(s => s.kind === "done")) return { kind: "done" };
+    for (const kind of URGENCY) {
+      const found = states.find(s => s.kind === kind);
+      if (found) return found;
+    }
+  }
+  const mine = (t: Ticket) => t.dir === v.dir && stage.tools.includes(t.tool);
+  const running = queue?.running.find(mine);
+  if (running) return { kind: "running", ticket: running };
+  const i = queue?.waiting.findIndex(mine) ?? -1;
+  if (i >= 0) return { kind: "queued", ticket: queue!.waiting[i], position: i + 1 };
+  if (stage.id === "publish") return publishStageState(v);
+  if (stage.id === "script") {
+    if (v.script_approval?.status === "pending") return { kind: "user" };
+    if (v.script_approval?.status === "change_requested") return { kind: "rejected" };
+  }
+  if (stage.id === "motion_script") {
+    if (v.reference_swap && !v.reference_swap.applied)
+      return {
+        kind: "redoing",
+        reason: `Trocando o estilo visual para ${v.reference_swap.to ?? "outra, escolhida pelo agente"}`,
+      };
+    if (v.scenes_approval?.status === "pending") return { kind: "user" };
+    if (v.scenes_approval?.status === "change_requested") return { kind: "rejected" };
+  }
+  const st = v.status?.stages.find(s => s.id === stage.id);
+  if (st?.ok) return { kind: "done" };
+  if (st?.outdated) return { kind: "warning", reason: "O scenes.json ou a legenda mudou depois: monte com --redo" };
+  if (st?.stale?.length)
+    return { kind: "warning", reason: `O início mudou em ${st.stale.join(", ")}: renderize de novo` };
+  /* the last run of this stage failed and it did not end up done */
+  const last = [...runs, ...(queue?.recent ?? [])].filter(mine).sort(byRecent)[0];
+  if (last?.effective === "error") return { kind: "error", ticket: last };
+  if (v.status?.next?.id === stage.id) return { kind: "next" };
+  return { kind: "missing" };
+}
+
+/* the stage the page opens on: what is happening, what waits for the user, what broke; with the
+   video exported (not yet published, scheduled or already live) it opens on Publish, where it
+   is; else what comes next */
+export function getInitialStage(
+  v: StageInput,
+  queue: Queue | null,
+  runs: Ticket[],
+  pipeline: Pipeline = "video",
+): string {
+  if (pipeline === "carousel") {
+    const states = PIPELINES.carousel.map(s => [s.id, getStageState(s, v, queue, runs).kind] as const);
+    return states.find(([, k]) => k !== "done")?.[0] ?? "carousel-publish";
+  }
+  const states = STAGES.map(s => [s.id, getStageState(s, v, queue, runs).kind] as const);
+  const first = (kinds: string[]) => {
+    for (const kind of kinds) {
+      const found = states.find(([, k]) => k === kind);
+      if (found) return found[0];
+    }
+    return null;
+  };
+  const urgent = first(["running", "user", "redoing", "error", "queued"]);
+  if (urgent) return urgent;
+  const exp = v.status?.stages.find(s => s.id === "export");
+  if (exp?.ok && !exp.outdated) return "publish";
+  return first(["next", "scheduled"]) ?? "render";
+}
+
+export const STAGE_STATE_LABEL: Record<StageState["kind"], string> = {
+  done: "Feita",
+  running: "Rodando",
+  queued: "Na fila",
+  user: "Esperando você",
+  rejected: "Reprovada",
+  redoing: "Refazendo",
+  warning: "Atenção",
+  scheduled: "Agendada",
+  error: "Erro",
+  next: "Próxima",
+  missing: "",
+  na: "Não se aplica",
+};
+
+/* the short state text under a step: "Rodando 1min05s", "Na fila · 2º", "Agendada · 14/10 18:00" */
+export function stageStateDetail(s: StageState, now: number) {
+  if (s.kind === "running")
+    return `${STAGE_STATE_LABEL.running} ${formatElapsed(now - (toMs(s.ticket.started_at) ?? now))}`;
+  if (s.kind === "queued") return `${STAGE_STATE_LABEL.queued} · ${s.position}º`;
+  if (s.kind === "scheduled") return `${STAGE_STATE_LABEL.scheduled} · ${formatWhen(s.when)}`;
+  return STAGE_STATE_LABEL[s.kind];
+}

package/studio/web/lib/studio-offline.ts

@@ -0,0 +1,60 @@
+/* What the "studio sem conexão" screen (components/StudioOffline.tsx) says, from what the hub knows
+   (cloud/studio/src/presence.mjs): the reason the Mac is out and the step that brings it back. A refused
+   key repairs itself (the runner opens the approval page on the Mac); the rest needs one thing on the Mac. */
+
+import type { RunnerProblem } from "../types/api";
+import { formatDayTime } from "./format";
+
+export type OfflineStep = { text: string; code?: string };
+export type OfflineAdvice = { title: string; text: string; steps: OfflineStep[] };
+
+const theMac = (name: string | null | undefined) => (name ? `O Mac “${name}”` : "O Mac que roda o studio");
+
+export function offlineAdvice(o: {
+  name: string | null;
+  lastSeen: string | null;
+  problem: RunnerProblem | null;
+}): OfflineAdvice {
+  const p = o.problem;
+  if (p?.reason === "key")
+    return {
+      title: "O Mac precisa ser aprovado de novo",
+      text: `${theMac(p.host || o.name)} tentou conectar em ${formatDayTime(p.at)}, mas o servidor não aceitou a chave dele. Ele pede uma nova sozinho: a página de aprovação abre no navegador do Mac.`,
+      steps: [
+        { text: "No Mac, aprove a conexão na página que abriu (entre com o Google se ela pedir)." },
+        { text: "Se a página não abriu, no Mac:", code: "node tools/runner.mjs login" },
+      ],
+    };
+  if (p?.reason === "revoked")
+    return {
+      title: "Este Mac foi desconectado",
+      text: `${theMac(p.name || o.name)} foi desconectado do studio em ${formatDayTime(p.at)}. Ele só volta quando for pareado de novo.`,
+      steps: [{ text: "No Mac:", code: "node tools/runner.mjs login" }],
+    };
+  if (p?.reason === "protocol" && p.side === "mac")
+    return {
+      title: "O Mac precisa de atualização",
+      text: `${theMac(p.host || o.name)} está com uma versão do studio anterior à do servidor, e os dois não se entendem.`,
+      steps: [
+        { text: "No Mac, atualize e reinicie o studio:", code: "git pull && node tools/runner.mjs service restart" },
+        { text: "Sem o serviço, feche o studio e abra de novo:", code: "cd studio && bun start" },
+      ],
+    };
+  if (p?.reason === "protocol")
+    return {
+      title: "O servidor está desatualizado",
+      text: `${theMac(p.host || o.name)} já tem uma versão mais nova que a do servidor.`,
+      steps: [
+        { text: "Suba o servidor: o merge na main faz o deploy sozinho, ou GitHub → Actions → Deploy → Run workflow." },
+      ],
+    };
+  return {
+    title: "O studio perdeu a conexão",
+    text: `${theMac(o.name)} não está conectado ${o.lastSeen ? `desde ${formatDayTime(o.lastSeen)}` : "agora"}. Ele pode estar desligado, dormindo ou sem internet, ou o studio está fechado. O que você pediu espera e volta a andar quando ele reconectar.`,
+    steps: [
+      { text: "Confira se o Mac está ligado, acordado e com internet." },
+      { text: "Deixe o studio sempre aberto (uma vez só, no Mac):", code: "node tools/runner.mjs service install" },
+      { text: "Ou abra à mão:", code: "cd studio && bun start" },
+    ],
+  };
+}

package/studio/web/lib/upload.ts

@@ -0,0 +1,24 @@
+/* The visual style upload, a photo or a video (POST /api/references/upload): a raw body with the name in
+   x-file-name, not JSON, so it stays outside the typed client. XHR because fetch gives no upload
+   progress. The file is kept in .uploads/ and the answer carries its path. */
+
+export type UploadResult = { ok: boolean; path?: string; error?: string };
+
+export function uploadStyleFile(file: File, progress: (pct: number) => void): Promise<UploadResult> {
+  return new Promise(resolve => {
+    const x = new XMLHttpRequest();
+    x.open("POST", "/api/references/upload");
+    x.setRequestHeader("content-type", "application/octet-stream");
+    x.setRequestHeader("x-file-name", encodeURIComponent(file.name));
+    x.upload.onprogress = e => e.lengthComputable && progress(Math.round((e.loaded / e.total) * 100));
+    x.onerror = () => resolve({ ok: false, error: "O envio falhou" });
+    x.onload = () => {
+      try {
+        resolve(JSON.parse(x.responseText));
+      } catch {
+        resolve({ ok: false, error: `${x.status}: ${x.statusText}` });
+      }
+    };
+    x.send(file);
+  });
+}