@crievo/omni 0.1.2 → 0.1.4

package/docs/onboarding.md

@@ -1,123 +1,51 @@
 # Primeiros passos no OmniVideo
 
-Do zero ao primeiro vídeo: instalar as ferramentas, baixar o projeto, conectar o
-Claude Code, a voz, um estilo visual e o som, e pedir o vídeo. Publicar nas
-redes fica para o fim e é opcional.
-
-Cada passo diz o que fazer e como conferir. Com o studio aberto, a tela
-**Primeiros passos** (`http://127.0.0.1:5432/getting-started`) mostra este mesmo guia e marca
-sozinha o que já está pronto; no terminal, `node tools/setup.mjs check` faz a mesma
-conferência.
-
-![A tela Primeiros passos do studio](onboarding/getting-started.png)
+Do plugin instalado ao primeiro vídeo, sem terminal. Enquanto o OmniVideo prepara
+este computador (alguns minutos), você deixa a voz, as redes e o estilo visual
+prontos aqui no studio.
 
 O que você vai precisar ter ou criar:
 
-- um Mac (macOS) com acesso de administrador;
-- uma conta do Claude com Claude Code (plano Pro ou Max);
-- uma conta num provider de voz: Fish Audio ou Cartesia (ElevenLabs também serve);
-- uma assinatura da Epidemic Sound, de onde vêm os efeitos sonoros;
-- um vídeo ou fotos do estilo visual que você quer (um link ou imagens).
-
-<!-- step: machine -->
-## 1. Ferramentas da máquina
-
-O OmniVideo roda inteiro na sua máquina. Ele precisa de Node.js, Bun, ffmpeg, Python
-e um Chrome. O jeito mais rápido no Mac é o [Homebrew](https://brew.sh):
-
-```bash
-/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
-brew install node oven-sh/bun/bun ffmpeg python@3.12 yt-dlp
-brew install --cask google-chrome
-```
-
-- **Node.js 20+** roda as ferramentas de `tools/` (render, montagem, publicação).
-- **Bun** roda o studio.
-- **ffmpeg** (com o `ffprobe`) mede, corta, mistura e exporta tudo.
-- **Python 3.10+** roda a voz e a legenda (o passo 2 cria um ambiente só do projeto).
-- **Google Chrome** é onde o motion é desenhado quadro a quadro. Chromium e Brave
-  também servem; outro caminho vai em `CHROME_PATH`.
-- **yt-dlp** é opcional: baixa o estilo visual quando você manda um link.
-
-Confira com `node --version`, `bun --version`, `ffmpeg -version` e `python3 --version`.
-
-<!-- step: project -->
-## 2. Baixar e preparar o projeto
-
-Clone o repositório e rode o setup. Ele não sobrescreve nada que já exista:
-
-```bash
-git clone https://github.com/pedroflp/omni.git omnivideo
-cd omnivideo
-node tools/setup.mjs
-```
-
-O setup:
-
-- cria o `.env` (as chaves, fora do git) e o `omnivideo.config.json` a partir dos exemplos;
-- cria a biblioteca de estilos visuais vazia, ao lado do projeto (`../referencias`);
-- cria o kit de efeitos vazio (`kit/sfx/kit.json`);
-- cria o Python do projeto (`.venv`, com `requests`, `soundfile` e `numpy`);
-- instala as dependências do studio (`bun install`).
-
-No fim, ele mostra a conferência de todos os passos deste guia. Daí em diante, abra o
-studio e siga pela tela:
-
-```bash
-cd studio && bun start
-```
-
-O studio abre em `http://127.0.0.1:5432`. Deixe esse terminal aberto enquanto usa.
-
-<!-- step: claude -->
-## 3. Claude Code
-
-Quem escreve o roteiro, compõe o motion e conduz cada etapa é o Claude Code, aberto
-pelo studio. Instale e entre na sua conta:
-
-```bash
-curl -fsSL https://claude.ai/install.sh | bash
-CLAUDE_CONFIG_DIR=~/.claude-personal claude
-```
+- o Claude Code com o plugin do OmniVideo instalado;
+- uma conta num provider de voz: Fish Audio ou Cartesia;
+- um vídeo ou fotos do estilo visual que você quer.
 
-Na primeira vez, o Claude pede para entrar: escolha a conta do Claude (Pro ou Max) e
-siga o login no navegador. Depois, digite `/exit`.
+O kit de efeitos sonoros entra neste guia em breve.
 
-O studio sempre abre o Claude com `CLAUDE_CONFIG_DIR=~/.claude-personal`, para nunca
-misturar com outra conta da máquina (uma de trabalho, por exemplo). Por isso o login
-precisa ser feito nessa pasta. Para não digitar a variável toda vez, ponha no
-`~/.zshrc`:
+<!-- step: computer -->
+## Este computador
 
-```bash
-claude() { CLAUDE_CONFIG_DIR="$HOME/.claude-personal" command claude "$@"; }
-```
+Ao abrir o Claude Code com o plugin, o OmniVideo cria a pasta `~/OmniVideo`, abre o
+navegador para você entrar e liga o studio deste computador. Depois, baixa sozinho o
+que o vídeo precisa: o ffmpeg e o ffprobe (cortam, misturam e exportam), um Chrome
+sem janela (desenha o motion quadro a quadro; se você já tem Chrome, Chromium ou
+Brave, ele usa o seu) e o Python das ferramentas (voz e legenda).
 
-Em **Configurações → Agente de IA** você escolhe o modelo e o esforço de cada etapa e
-pode pôr mais contas no rodízio: outras pastas do Claude (`~/.claude-personal-2`…) e contas
-do Codex (o CLI que vem no app do ChatGPT, ou o `codex` no PATH). Cada sessão nova vai para a
-próxima conta, e a que bate o limite de uso sai do rodízio até liberar. O botão **Entrar**
-de cada conta abre o login no navegador.
+Os itens com "preparando…" ainda estão baixando. Esta tela atualiza sozinha e
+mostra **Computador pronto** quando tudo responder.
 
-<!-- step: voice -->
-## 4. Voz
+As skills do OmniVideo rodam no seu Claude Code e precisam de permissão uma vez. Se
+a permissão aparecer como pendente, diga ao Claude "libere as skills do OmniVideo":
+ele mostra as regras, pede o seu ok e grava.
 
-A narração é a sua voz clonada. O studio cria o clone na Fish Audio e na Cartesia
-pela API; você só precisa da chave de pelo menos uma delas.
+<!-- step: voice-key -->
+## Chave de um provider de voz
 
-**A chave do provider.** Crie a conta e copie a chave da API:
+A narração é a sua voz clonada, criada na Fish Audio ou na Cartesia pela API. Você
+só precisa da chave de uma delas:
 
 - **Fish Audio**: [fish.audio](https://fish.audio), menu da conta → **API Keys**.
 - **Cartesia**: [play.cartesia.ai](https://play.cartesia.ai), **API Keys**.
-- **ElevenLabs** (opcional): [elevenlabs.io](https://elevenlabs.io), **Developers →
-  API Keys**. Nela a voz entra pelo Voice ID de uma voz que você já criou lá.
 
-No studio, abra **Configurações → Voz → Provedores de voz** e cole a chave no
-provider. Ela vai para o `.env`, que nunca sobe para o git.
+Abra **Provedores de voz** e cole a chave no provider. Ela fica só neste
+computador.
 
 ![Provedores de voz: a chave de cada provider](onboarding/providers.png)
 
-**O clone.** Ainda em **Configurações → Voz**, vá até o último item da roleta,
-**Adicionar voz** (o "+"). Abre o quadro **Clonar a minha voz**:
+<!-- step: voice-clone -->
+## Clonar a voz
+
+Em **Clonar a minha voz**:
 
 1. escolha o idioma da fala;
 2. grave lendo o roteiro que aparece na tela, ou envie áudios seus (de 30 s a 3 min
@@ -126,87 +54,67 @@ provider. Ela vai para o `.env`, que nunca sobe para o git.
 
 ![Clonar a minha voz](onboarding/clone-voice.png)
 
-O studio cria a voz em cada provider marcado e grava o perfil. A primeira voz criada
-vira a voz ativa, que já vem marcada em cada vídeo novo. Se o plano do provider não
-deixar clonar pela API, o cartão dele avisa; nesse caso crie a voz no site do
-provider e use **Já tenho voz criada nos provedores**, com o Voice ID.
+Se o plano do provider não deixar clonar pela API, o cartão dele avisa. Nesse caso,
+crie a voz no site do provider e use **Já tenho voz criada nos provedores**, com o
+Voice ID.
 
-<!-- step: reference -->
-## 5. Estilo visual
+<!-- step: voice-default -->
+## Voz padrão
 
-Todo vídeo segue um estilo visual: um vídeo (ou fotos) de que você gosta, medido
-(cores, ritmo, tipografia, movimento) e transformado num guia. O estilo visual é princípio,
-nunca asset copiado.
+A voz padrão já vem marcada em cada vídeo novo. A primeira voz que você cria vira a
+padrão sozinha; para trocar, abra **Perfil de voz** e escolha outra na roleta.
 
-Em **Estilos visuais → Novo estilo visual**:
+<!-- step: platforms -->
+## Conectar YouTube, Instagram e TikTok
 
-1. cole um **link** (Instagram, YouTube…; link precisa do `yt-dlp`, do passo 1), ou
-2. envie **fotos** do estilo (telas, quadros, capturas), ou os dois;
-3. clique em **Criar estilo visual**.
+Opcional: só para publicar direto do studio. Dá para fazer agora ou depois do
+primeiro vídeo.
 
-![Novo estilo visual](onboarding/references.png)
+Em **Configurações → Plataformas**, cada rede tem o seu cartão. O YouTube e o TikTok
+pedem as chaves de um app de desenvolvedor seu (Google Cloud e TikTok for Developers,
+criados uma vez) e abrem o login no navegador. O Instagram pede o token gerado no app
+da Meta. O passo a passo de cada uma está em [`reference/publish.md`](../reference/publish.md).
 
-O Claude mede o vídeo (com fotos, lê as imagens) e escreve o guia em alguns minutos; a tela
-do estilo visual mostra o andamento. A biblioteca fica em `../referencias` (o caminho está em
-`references.dir`, na config) e serve para todos os vídeos.
+![Publicar](onboarding/publish.png)
 
-<!-- step: sound -->
-## 6. Efeitos sonoros
+Publicar é sempre um pedido seu: nada sobe sozinho, a menos que você ligue a
+publicação automática em **Configurações → Publicação**.
+
+<!-- step: style -->
+## Escolher um estilo visual
 
-Os efeitos vêm só da Epidemic Sound. O projeto começa com o kit vazio: na primeira
-composição, o Claude busca na Epidemic pelo seu Chrome, ouve, escolhe e baixa cada
-efeito. Os bons entram no kit (`kit/sfx/`) e passam a valer para todos os vídeos, sem
-buscar de novo.
+Todo vídeo segue um estilo visual: um vídeo ou fotos de que você gosta, medidos
+(cores, ritmo, tipografia, movimento) e transformados num guia. O estilo é princípio,
+nunca asset copiado.
 
-Para isso:
+Em **Estilos visuais → Novo estilo visual**, envie **fotos** do estilo (telas,
+quadros, capturas) ou cole um **link** (Instagram, YouTube…) e clique em **Criar
+estilo visual**. Fotos e links funcionam igual: o link é baixado pelo `yt-dlp`, que o
+OmniVideo traz junto com o ffmpeg e o Chrome sem janela.
 
-1. assine a [Epidemic Sound](https://www.epidemicsound.com) e entre na conta no
-   Google Chrome;
-2. instale a extensão **Claude in Chrome** (na Chrome Web Store) nesse Chrome e
-   entre com a mesma conta do Claude do passo 3;
-3. deixe o Chrome aberto quando pedir o primeiro vídeo.
+![Novo estilo visual](onboarding/references.png)
 
-Sem a extensão e com o kit vazio, a composição para e pede para abrir o Chrome: o
-OmniVideo nunca usa um áudio de outra fonte.
+O Claude mede e escreve o guia em alguns minutos; a tela do estilo mostra o
+andamento. O estilo vale para todos os vídeos.
 
 <!-- step: first-video -->
-## 7. O primeiro vídeo
+## Primeiro vídeo
 
-Clique em **Criar vídeo**:
+Em **Criar vídeo**:
 
 1. cole o pedido: um roteiro pronto, um tema, um material ou um link;
-2. escolha o formato (vertical 9:16 ou horizontal 16:9), a voz e o estilo visual de
-   estilo (ou deixe o agente escolher);
+2. escolha o formato (vertical 9:16 ou horizontal 16:9), a voz e o estilo visual
+   (ou deixe o agente escolher);
 3. clique em **Criar e começar**.
 
 ![Criar vídeo](onboarding/new-video.png)
 
-Daí o Claude trabalha sozinho e a tela do vídeo mostra cada etapa no stepper. Ele para
-duas vezes para você:
+O Claude trabalha sozinho e a tela do vídeo mostra cada etapa. Ele para duas vezes
+para você:
 
 - **O roteiro.** Aprove, peça alteração ou edite o texto. Se ninguém mexer, ele se
   aprova sozinho em 10 min.
-- **As cenas.** Depois do roteiro de motion, cada cena aparece como um still para
-  aprovar ou pedir alteração. Se ninguém mexer, elas se aprovam sozinhas em 10 min.
+- **As cenas.** Cada cena aparece como um still para aprovar ou pedir alteração. Se
+  ninguém mexer, elas se aprovam sozinhas em 10 min.
 
-Aprovadas as cenas, composição, narração, voz, render, legenda e montagem rodam até
-o MP4, que aparece na
-etapa **Exportação** e fica em `videos/<data-slug>/export/`. O tempo depende do
-tamanho do vídeo; a tela mostra o que está rodando e a fila da máquina.
-
-<!-- step: publish -->
-## 8. Publicar nas redes (opcional)
-
-Com o vídeo pronto, a etapa **Publicar** sobe o MP4 no YouTube, no Instagram e no
-TikTok, agora ou num dia e hora marcados na **Agenda**. O título, a descrição e a
-legenda o Claude escreve a partir do roteiro, e você edita antes.
-
-![Publicar](onboarding/publish.png)
-
-Cada rede precisa de um app de desenvolvedor seu, criado uma vez. Conecte em
-**Configurações → Plataformas**; o passo a passo de cada uma (Google Cloud, Meta e
-TikTok) está em [`reference/publish.md`](../reference/publish.md). O Instagram
-busca o vídeo por um túnel temporário do `cloudflared` (`brew install cloudflared`).
-
-Publicar é sempre um pedido seu: nada sobe sozinho, a menos que você ligue a
-publicação automática em **Configurações → Publicação**.
+Aprovadas as cenas, o resto roda até o MP4, que aparece na etapa **Exportação**.

package/omnivideo.config.example.json

@@ -397,7 +397,7 @@
     }
   },
   "agents": {
-    "accounts": [{ "id": "claude-personal", "provider": "claude", "dir": "~/.claude-personal" }],
+    "accounts": [],
     "codex": { "model": "gpt-6-luna", "effort": "medium", "sandbox": "auto" }
   },
   "studio": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crievo/omni",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "OmniVideo no seu computador: o CLI omni, o studio local e as ferramentas do pipeline.",
   "type": "module",
   "bin": {
@@ -30,6 +30,7 @@
     "border-beam": "1.4.1",
     "hono": "4.13.9",
     "marked": "^18.1.0",
+    "motion": "^14.3.0",
     "react": "19",
     "react-day-picker": "^10.0.2",
     "react-dom": "19",

package/reference/learnings.md

@@ -790,3 +790,15 @@ these voices).
 - **Symptom:** the cloud answered `429 error code: 1027` (the Workers Free plan's 100k requests a day), and the studio said "A cloud do omnichat não responde". The Worker had 140k requests that day, ~5k an hour since the evening before and 43k in one hour, with only a few real comments.
 - **Cause:** a read that wrote. `pullRecord` (`tools/omnichat.mjs`) rewrote `omnichat-record.json` on every read, with a fresh `pulled_at`. The write is a studio notice (`events.ts`), the notice makes every open omnichat page reread every rule (`log --json`, one cloud request each), and that read wrote again: an endless loop, ~400–600 requests a minute per open Omnichat tab. The hosted studio's offline copy reread the same routes on every notice even with no tab open (~80 a minute). `publish.mjs` (the scheduler, every minute while a cloud job runs) and `metrics.mjs` (the account file) also rewrote unchanged files.
 - **Fixed:** a pull, `writePub` and the metrics account file write only when the content changed; the studio caches the cloud health check for 60 s and each rule's log for 30 s while its record file is unchanged; the offline copy is gone. Rule for the future: anything a read path writes into a watched file must skip an unchanged write, or it loops against whatever it calls.
+
+## Magenta tint on semi-transparent UI under the motion-blur SVG filter (18/10/2026)
+
+- **Symptom:** in `2026-10-18-guia-de-motion-design-spotify` (c02, mid-pan), list rows fading in (opacity < 1, with their own CSS `blur()` from the depth of field) came out purple/magenta while the camera moved; rows at opacity 1 were fine.
+- **Cause:** the world layer carries `filter: url(#mb)` (an SVG `feGaussianBlur` for vertical motion blur). SVG filters default to `color-interpolation-filters: linearRGB`, and Chrome's conversion of the semi-transparent, already-blurred children through that path shifts dark colours toward magenta.
+- **Fixed:** `color-interpolation-filters="sRGB"` on the `<filter>`. Any SVG blur used as motion blur over UI should carry it.
+
+## Frame 0 of a scene missed an element gated on its own beat (18/10/2026)
+
+- **Symptom:** in `2026-10-18-roteiro-pronto-guia-de-motion`, c06's first frame was empty cream: the symbol that should be born at scale 0.35 on frame 0 only showed from the second frame, and the c05 → c06 cut sheet read as "ring gone, blank, symbol pops".
+- **Cause:** floating point. The build sums scene durations, so `OMNIVIDEO.start` for c06 was `16.799999999999997`, while the beat `simbolo` (from `video.scenes[].beats`) was `16.8`. A helper gated with `if (T >= t0)` (`OV.signAt`) was false at `t = 0`. Progress helpers (`seg`, clamped) don't care; only hard `>=` gates do.
+- **Fixed:** the gate takes a tolerance, `T >= t0 - 1e-4`. Rule: any on/off gate on a beat time in a continuous composition compares with an epsilon, never with a bare `>=`.

package/reference/omnichat.md

@@ -200,9 +200,8 @@ commented (the trigger), follows the account, tapped the button.
 ```bash
 node tools/omnichat.mjs webhook setup       # creates INSTAGRAM_WEBHOOK_VERIFY_TOKEN and prints the steps
 # put the app secret in .env: INSTAGRAM_APP_SECRET (Instagram → API setup with Instagram login → App secret)
-node tools/omnichat.mjs webhook serve       # listens on 127.0.0.1:5434/webhook
-cloudflared tunnel --url http://127.0.0.1:5434   # the public HTTPS URL Meta needs
-# Meta panel → Instagram → API setup → Configure webhooks: Callback URL = <tunnel>/webhook, Verify token = the one setup printed,
+# Meta panel → Instagram → API setup → Configure webhooks: Callback URL = https://omnichat.<you>.workers.dev/webhook
+# (the cloud Worker, below), Verify token = the one setup printed,
 # fields messages and messaging_postbacks
 node tools/omnichat.mjs webhook subscribe   # signs the account up to those fields
 node tools/omnichat.mjs webhook status
@@ -215,7 +214,9 @@ node tools/omnichat.mjs webhook status
 - The tap is answered by the cloud Worker: the same `handleWebhook` (`tools/lib/omnichat/webhook.mjs`)
   runs in a function with its own storage; `tools/lib/omnichat/gate.mjs` has the decision and the sends.
 - The record is written under the pass lock, so the agent and the tap don't overwrite each other.
-- Start `webhook serve` and the tunnel only when the user asks; enabling the rule is what authorizes the replies.
+- `node tools/omnichat.mjs webhook serve` (127.0.0.1:5434/webhook) is the same handler on this machine, for a
+  test behind any public HTTPS address; start it only when the user asks. Enabling the rule is what authorizes
+  the replies.
 
 ## In the cloud (Cloudflare Worker + Postgres)
 

package/reference/publish.md

@@ -96,12 +96,13 @@ publishing, generate another one (step 4).
 
 **How the video gets there.** With Instagram login, Meta doesn't accept the
 file: it downloads the video from a public URL (direct upload is only for apps
-with Facebook login). `publish.mjs` opens that URL on the spot: a server on
-`127.0.0.1` that serves only that MP4, at a random path, behind a `cloudflared`
-quick tunnel (`https://<random>.trycloudflare.com/<token>.mp4`). The tunnel
-takes about 15 s to respond, stays up until Instagram finishes processing and
-closes right after. It needs `cloudflared` installed (`brew install
-cloudflared`).
+with Facebook login). `publish.mjs` uploads the MP4 (and the cover) to the
+cloud's R2 bucket through the Worker (`PUT /api/media/<slug>/<file>`), and
+Instagram downloads it from `<cloud.url>/media/schedule/now-<slug>/<random>-<file>`. The
+file is deleted as soon as Instagram finishes processing; the bucket's 7-day
+rule deletes anything left. It needs the cloud (`cloud.url` in the config and
+`OMNICHAT_CLOUD_SECRET` in `.env`, reference/omnichat.md), the same one the
+schedule uses (ADR 0004). Nothing to install here.
 
 The video goes as Reels, also to the feed (`share_to_feed`). The cover is the
 selected thumbnail (below, **Cover**); without one, the frame at `cover_at_s`
@@ -116,7 +117,7 @@ accept 3 s to 15 min.
 carousel's Publicar stage in the studio does the same). It uploads
 `carousel/export/NN.jpg` (exported on the spot if the build changed after the last
 export) as a carousel post. Images don't go up as files either: each JPEG goes
-through the same `cloudflared` tunnel as the Reel, becomes a child container
+through the cloud's R2, like the Reel, becomes a child container
 (`is_carousel_item`), and the `CAROUSEL` container joins the children with the
 caption. The caption is `carousel/publication.json`'s (the one edited in the
 studio) or `carousel.json`'s `caption`, with the Instagram footer and the
@@ -217,8 +218,7 @@ if you switch node versions, turn it on again. The log is in
   becomes **failed**, with the reason, waiting for you to schedule again or
   publish now. The ones already up don't go up again.
 - **Publishing by hand** a scheduled platform removes it from the schedule.
-- **Instagram:** the `cloudflared` tunnel opens at publishing time, so the
-  internet has to be up at that time, as with the button.
+- **Instagram:** it downloads the video from the cloud's R2, like the button.
 
 ```bash
 node tools/publish.mjs schedule videos/<slug> --when "2026-10-14 18:00" --youtube --tiktok --confirm

package/reference/studio.md

@@ -476,7 +476,7 @@ omnichat classifier), the screen in Configurações → Agente de IA → Contas
 
 | `agents` | |
 |---|---|
-| `accounts` | `[{ id, provider: "claude" \| "codex", dir, label?, enabled? }]`, in rotation order. `dir` is the account's `CLAUDE_CONFIG_DIR` or `CODEX_HOME`, each with its own login (`claude auth login` / `codex login` with the variable set; the screen's "Entrar" runs it). Empty: `~/.claude-personal`. `~/.claude` is refused in code |
+| `accounts` | `[{ id, provider: "claude" \| "codex", dir, label?, enabled? }]`, in rotation order. `dir` is the account's `CLAUDE_CONFIG_DIR` or `CODEX_HOME`, each with its own login (`claude auth login` / `codex login` with the variable set; the screen's "Entrar" runs it). Empty: the Claude Code this machine uses, the folder the plugin's hook recorded in `~/.omni/claude.json`, else `~/.claude` (run without `CLAUDE_CONFIG_DIR`, login in `~/.claude.json`); without a login there, the banner and Configurações → Agente de IA ask for the folder |
 | `codex.model`, `codex.effort` | the model of every Codex session (`-m`, `model_reasoning_effort`); the options come from the account's `models_cache.json` |
 | `codex.sandbox` | `auto` (default): workspace-write with network and the library writable, `approval_policy=on-request` with Codex's `auto_review` reviewer, so what must leave the sandbox (Chrome in the renders) asks and is decided like Claude's auto mode. `full`: no sandbox |
 | `codex.bin` | the CLI; default `codex` on the PATH or the one the ChatGPT app ships |

package/studio/api/app.ts

@@ -33,7 +33,7 @@ import { schedule } from "./routes/schedule";
 import { services } from "./routes/services";
 import { sessions } from "./routes/sessions";
 import { settings } from "./routes/settings";
-import { sound } from "./routes/sound";
+import { sound, SOUND_UPLOAD_PATH } from "./routes/sound";
 import { thumbnail } from "./routes/thumbnail";
 import { usage } from "./routes/usage";
 import { videos } from "./routes/videos";
@@ -75,7 +75,7 @@ export function createApp({ port }: AppOptions) {
     .route("/", agentHistory)
     .route("/", events);
   const app = router()
-    .use(localOnly({ port, uploadPaths: [UPLOAD_PATH] }))
+    .use(localOnly({ port, uploadPaths: [UPLOAD_PATH, SOUND_UPLOAD_PATH] }))
     .use(jsonCharset)
     .route("/api", api)
     .route("/", media);

package/studio/api/routes/sound.ts

@@ -1,17 +1,36 @@
-/* Sound timeline (SoundTimeline): data, the draft plan (sound.mjs), save to scenes.json, reassemble
-   and adding an Epidemic effect. */
+/* Sound timeline (SoundTimeline): data, the draft plan (sound.mjs), save to scenes.json, reassemble,
+   adding an Epidemic effect and the user's own track (upload). */
 
 import { json } from "../lib/validate";
 import { router } from "../lib/hono";
 import { result, shaped } from "../lib/result";
 import { videoDir } from "../lib/video";
-import { captureFromPage, downloadEffect, getSoundData, planDraft, reassemble, saveSound } from "../services/sound";
+import { noTimeout } from "../middleware/no-timeout";
+import {
+  captureFromPage,
+  downloadEffect,
+  getSoundData,
+  planDraft,
+  reassemble,
+  saveSound,
+  uploadTrack,
+} from "../services/sound";
 import { refreshStatus } from "../services/videos";
 import { emptyBody } from "../../shared/schemas/common";
 import { soundCaptureBody, soundDownloadBody, soundDraftBody } from "../../shared/schemas/sound";
 import type { SoundData } from "../../shared/types/api";
 
+/* the track upload takes the raw body with the file name in x-file-name and the video in x-video (the
+   local-only guard checks the name, like the style upload) */
+export const SOUND_UPLOAD_PATH = "/api/sound/upload";
+
 export const sound = router()
+  .post("/sound/upload", noTimeout, async c => {
+    const dir = videoDir(decodeURIComponent(c.req.header("x-video") ?? ""));
+    /* NaN when the header is missing: the tool finds an empty file by itself */
+    const size = Number(c.req.header("content-length") ?? Number.NaN);
+    return result(c, await uploadTrack(dir, c.req.header("x-file-name") ?? "", c.req.raw.body, size));
+  })
   .get("/videos/:slug/sound", c => {
     const dir = videoDir(c.req.param("slug"));
     try {