@crievo/omni 0.1.3 → 0.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crievo/omni",
-  "version": "0.1.3",
+  "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/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 {

package/studio/api/services/sound.ts

@@ -5,6 +5,7 @@
    mixes. Saving writes to scenes.json; the export only changes on reassembly. */
 
 import { existsSync, mkdirSync, readdirSync, renameSync, rmSync, statSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
 import { join, resolve, sep, basename } from "node:path";
 import { ROOT, NODE, TOOLS_DIR, readJson } from "./root";
 import { loadVideo, beatTime } from "../../../tools/timing.mjs";
@@ -267,6 +268,50 @@ export async function downloadEffect(dir: string, body: any): Promise<Result> {
   return { ok: true, output: o.trim() };
 }
 
+/* A track the user sends from the editor (the upload): the raw body goes to a temp file and
+   `sound.mjs import` turns it into an MP3 in the video's sfx/, with the origin "upload". The answer's
+   output starts with the file name, like the Epidemic download's. */
+const AUDIO_FILE = /\.(mp3|wav|m4a|aac|flac|ogg|oga|opus|aif|aiff|wma|mp4)$/i;
+const MAX_UPLOAD = 200 * 1024 * 1024;
+export async function uploadTrack(
+  dir: string,
+  rawName: string,
+  body: ReadableStream | null,
+  size: number,
+): Promise<Result> {
+  let original = rawName;
+  try {
+    original = decodeURIComponent(rawName);
+  } catch {
+    /* keeps the raw name */
+  }
+  const file = basename(original);
+  if (!AUDIO_FILE.test(file))
+    return { ok: false, error: "o arquivo precisa ser um áudio (mp3, wav, m4a, aac, flac, ogg, aiff)" };
+  if (!body || size === 0) return { ok: false, error: "arquivo vazio" };
+  if (size > MAX_UPLOAD) return { ok: false, error: "o arquivo passa de 200 MB" };
+  const tmp = join(tmpdir(), `omni-upload-${Date.now()}${file.slice(file.lastIndexOf("."))}`);
+  try {
+    await Bun.write(tmp, new Response(body));
+    /* the file's own name (not the temp file's) is the track's name and title */
+    const title = file.replace(/\.[^.]+$/, "");
+    const p = Bun.spawn([NODE, join(TOOLS_DIR, "sound.mjs"), "import", dir, tmp, title, "--title", title], {
+      cwd: ROOT,
+      stdout: "pipe",
+      stderr: "pipe",
+      env: { ...process.env, OMNIVIDEO_ORIGIN: "studio" },
+    });
+    const [o, e, exit] = await Promise.all([new Response(p.stdout).text(), new Response(p.stderr).text(), p.exited]);
+    if (exit !== 0)
+      return { ok: false, error: (e || o).trim().replace(/^erro:\s*/, "") || `sound.mjs saiu com ${exit}` };
+    return { ok: true, output: o.trim() };
+  } catch (err: any) {
+    return { ok: false, error: `não deu para guardar o upload: ${err?.message ?? err}` };
+  } finally {
+    rmSync(tmp, { force: true });
+  }
+}
+
 /* adds a sound from an Epidemic page (playlist, theme, search): the editor's agent session opens it in
    Chrome, plays the tracks, takes the lqmp3 URL from the player and runs sound.mjs download. The
    timeline reloads when the agent stops. */

package/studio/studio.ts

@@ -81,6 +81,7 @@ try {
       "/settings/:category": index,
       "/new": index,
       "/getting-started": index,
+      "/bencho": index,
       "/styles": index,
       "/styles/:name": index,
       /* any other path opens the app, which shows the 404 page inside the menu; the API and

package/studio/web/components/AppShell.tsx

@@ -1,5 +1,5 @@
 /* The root route component: the top banners, the menu, the page (<Outlet/>) inside the scrolling
-   .content, the lightbox, the approval notice, Omni and, over everything, the screen for a studio that lost its connection, the voice agent (its panel opens from the sidebar button). */
+   .content, the lightbox, the approval notice, Omni, the toasts and, over everything, the screen for a studio that lost its connection, the voice agent (its panel opens from the sidebar button). */
 
 import { useEffect, useRef } from "react";
 import { Outlet, useLocation, useMatchRoute } from "@tanstack/react-router";
@@ -10,6 +10,7 @@ import { TopBanners } from "./TopBanners";
 import { Lightbox } from "./Lightbox";
 import { OmniWidget } from "./Omni/OmniWidget";
 import { StudioOffline } from "./StudioOffline";
+import { Toaster } from "./Toaster";
 import { Sidebar } from "./Sidebar";
 
 /* the page a location belongs to: switching the stage of a video (/videos/x/<stage>) or the
@@ -59,6 +60,7 @@ export function AppShell() {
       <ApprovalNotice />
       <OmniWidget menuCollapsed={collapsed} />
       <StudioOffline />
+      <Toaster />
     </>
   );
 }

package/studio/web/components/CloneVoiceDialog/RecordStep.tsx

@@ -41,8 +41,11 @@ export function RecordStep({ c }: { c: CloneVoiceState }) {
           total={c.total}
           level={c.level}
           creating={creating}
+          take={c.take}
           onStart={c.start}
           onStop={c.stop}
+          onCancel={c.cancel}
+          onDiscardTake={c.remove}
         />
       )}
     </>

package/studio/web/components/CloneVoiceDialog/RecorderBar.tsx

@@ -1,8 +1,12 @@
-import { clock, MAX_S } from "../../lib/clone-voice";
-import { Circle, Microphone, Stop } from "../icons";
+import { MAX_S } from "../../lib/clone-voice";
+import { VoiceNote } from "../bencho/VoiceNote";
+import { BenchoScope } from "../bencho/BenchoScope";
+import { Microphone } from "../icons";
 import { Picker } from "../ui/picker";
+import type { Sample } from "./types";
 
-/* recording step 2: the microphone choice, the permission or the timer, the record button and the level */
+/* recording step 2: the microphone choice, then the permission button or the voice note pill (tap to record, tap to
+   stop, the take played back right there) and, at rest, the level */
 export function RecorderBar({
   device,
   devices,
@@ -14,8 +18,11 @@ export function RecorderBar({
   total,
   level,
   creating,
+  take,
   onStart,
   onStop,
+  onCancel,
+  onDiscardTake,
 }: {
   device: string;
   devices: MediaDeviceInfo[];
@@ -27,9 +34,14 @@ export function RecorderBar({
   total: number;
   level: number;
   creating: boolean;
+  /* the take just recorded: the pill shows it as a clip */
+  take: Sample | null;
   onStart: () => void;
   onStop: () => void;
+  onCancel: () => void;
+  onDiscardTake: (id: string) => void;
 }) {
+  const full = total >= MAX_S;
   return (
     <footer className="clone-bar">
       <Picker
@@ -47,32 +59,37 @@ export function RecorderBar({
         <button type="button" className="button pill" onClick={onAllowMicrophone}>
           <Microphone className="ic" /> Permitir microfone
         </button>
-      ) : recording ? (
-        <span className="clone-time mono">
-          <Circle weight="fill" className="ic" /> {clock(elapsed)}
-        </span>
       ) : (
-        <span className="subtle">Pronto para gravar</span>
+        <div className="clone-voicenote">
+          <BenchoScope>
+            <VoiceNote
+              mode="tap"
+              state={recording ? "recording" : take ? "clip" : "idle"}
+              level={level}
+              elapsed={elapsed}
+              maxSeconds={MAX_S - total}
+              audioUrl={take?.url}
+              duration={take?.s}
+              disabled={creating || (full && !take)}
+              onStart={onStart}
+              onStop={onStop}
+              onCancel={onCancel}
+              onDiscard={() => take && onDiscardTake(take.id)}
+              onAgain={take && !full && !creating ? onStart : undefined}
+            />
+          </BenchoScope>
+        </div>
       )}
-      <button
-        type="button"
-        className={`clone-record${recording ? " active" : ""}`}
-        disabled={microphone !== "ok" || creating || (!recording && total >= MAX_S)}
-        aria-label={recording ? "Parar a gravação" : "Começar a gravar"}
-        onClick={recording ? onStop : onStart}
-      >
-        {recording ? <Stop weight="fill" /> : <Microphone weight="fill" />}
-      </button>
       <span className="clone-level" aria-live="polite">
-        {microphone === "ok" && level > 0.04 ? (
+        {microphone === "ok" && !recording && level > 0.04 ? (
           <span className="bars" aria-hidden="true">
             {[0.5, 0.8, 1, 0.8, 0.5].map((k, i) => (
               <i key={i} style={{ height: `${Math.max(12, Math.min(100, level * 100 * k))}%` }} />
             ))}
           </span>
-        ) : (
+        ) : microphone === "ok" && !recording ? (
           "Sem ruído detectado"
-        )}
+        ) : null}
       </span>
     </footer>
   );

package/studio/web/components/CloneVoiceDialog/useCloneVoice.ts

@@ -37,6 +37,8 @@ export function useCloneVoice({ settings, onCreate, onClose, redo, onRedone }: C
   const [device, setDevice] = useState("");
   const [recording, setRecording] = useState(false);
   const [elapsed, setElapsed] = useState(0);
+  /* the take just recorded, which the recorder shows as a clip to play back (it is also in `samples`) */
+  const [takeId, setTakeId] = useState<string | null>(null);
   const [playing, setPlaying] = useState<string | null>(null);
   const [warning, setWarning] = useState<string | null>(null);
   const [name, setName] = useState(redo?.name ?? "");
@@ -61,6 +63,8 @@ export function useCloneVoice({ settings, onCreate, onClose, redo, onRedone }: C
 
   const mic = useRef<{ stream: MediaStream; ctx: AudioContext; timer: number } | null>(null);
   const recorder = useRef<{ mr: MediaRecorder; start: number; timer: number } | null>(null);
+  /* set by cancel(): the stopped recording is dropped instead of becoming a sample */
+  const discarding = useRef(false);
   const fileInput = useRef<HTMLInputElement>(null);
   const player = useRef<HTMLAudioElement | null>(null);
   const counter = useRef(0);
@@ -198,6 +202,7 @@ export function useCloneVoice({ settings, onCreate, onClose, redo, onRedone }: C
 
   function openRecorder() {
     setView("record");
+    setTakeId(null);
     setLanguageOk(false);
     setWarning(null);
   }
@@ -241,6 +246,7 @@ export function useCloneVoice({ settings, onCreate, onClose, redo, onRedone }: C
       return;
     }
     closeMic();
+    setTakeId(null);
     if (languageOk) {
       setLanguageOk(false);
       return;
@@ -260,23 +266,26 @@ export function useCloneVoice({ settings, onCreate, onClose, redo, onRedone }: C
       const s = g ? (performance.now() - g.start) / 1000 : 0;
       recorder.current = null;
       setRecording(false);
+      if (discarding.current) {
+        discarding.current = false;
+        return;
+      }
       if (s < 1.5) {
         setWarning("A gravação ficou curta demais: leia um trecho maior do roteiro.");
         return;
       }
       const blob = new Blob(parts, { type: mr.mimeType || "audio/webm" });
       counter.current += 1;
-      setSamples(l => [
-        ...l,
-        {
-          id: `g${Date.now()}`,
-          name: `Gravação ${counter.current}`,
-          origin: "recording",
-          blob,
-          url: URL.createObjectURL(blob),
-          s,
-        },
-      ]);
+      const take: Sample = {
+        id: `g${Date.now()}`,
+        name: `Gravação ${counter.current}`,
+        origin: "recording",
+        blob,
+        url: URL.createObjectURL(blob),
+        s,
+      };
+      setSamples(l => [...l, take]);
+      setTakeId(take.id);
     };
     const startedAt = performance.now();
     /* stops by itself at the 3 min limit, adding what was already recorded */
@@ -288,11 +297,25 @@ export function useCloneVoice({ settings, onCreate, onClose, redo, onRedone }: C
     recorder.current = { mr, start: startedAt, timer };
     setElapsed(0);
     setWarning(null);
+    setTakeId(null);
+    discarding.current = false;
     setRecording(true);
     mr.start();
   }
 
-  const stop = () => recorder.current?.mr.stop();
+  /* a second tap, or the limit, can come before the recorder says it stopped: stopping twice throws */
+  const stop = () => {
+    const mr = recorder.current?.mr;
+    if (mr?.state === "recording") mr.stop();
+  };
+
+  /* stops and throws the recording away: it never becomes a sample */
+  const cancel = () => {
+    const mr = recorder.current?.mr;
+    if (mr?.state !== "recording") return;
+    discarding.current = true;
+    mr.stop();
+  };
 
   function openSave() {
     closeMic();
@@ -338,6 +361,7 @@ export function useCloneVoice({ settings, onCreate, onClose, redo, onRedone }: C
       player.current?.pause();
       setPlaying(null);
     }
+    setTakeId(t => (t === id ? null : t));
   }
 
   function listen(m: { id: string; url: string }) {
@@ -384,6 +408,7 @@ export function useCloneVoice({ settings, onCreate, onClose, redo, onRedone }: C
   const called = recording ? starts.filter(t => t <= elapsed).length : 0;
   const hasFish = !!(settings.voice.fish.key.masked || settings.voice.fish.key.in_env);
   const hasCartesia = !!(settings.voice.cartesia.key.masked || settings.voice.cartesia.key.in_env);
+  const take = takeId ? (samples.find(m => m.id === takeId) ?? null) : null;
   const total = samples.reduce((s, m) => s + m.s, 0);
   totalRef.current = total;
   const measured = total + (recording ? elapsed : 0);
@@ -502,6 +527,8 @@ export function useCloneVoice({ settings, onCreate, onClose, redo, onRedone }: C
     back,
     start,
     stop,
+    cancel,
+    take,
     openSave,
     onPickFiles,
     remove,

package/studio/web/components/MissingDmsPanel/BatchSend.tsx

@@ -3,6 +3,8 @@
 
 import type { MissingDms } from "../../hooks/useMissingDms";
 import { SEND_MODES } from "../../lib/missing-dms";
+import { BenchoScope } from "../bencho/BenchoScope";
+import { SlideToConfirm } from "../bencho/SlideToConfirm";
 import { Check, Power, X } from "../icons";
 
 export function BatchSend({
@@ -116,10 +118,17 @@ export function BatchSend({
             )}
           </p>
           <div className="actions">
-            <button className="button approve" disabled={!!busy} onClick={send}>
-              <Power className="ic" />{" "}
-              {busy === "send" ? "Mandando…" : `Confirmar: ${commentOnly ? "responder" : "mandar"} ${onBehalf}`}
-            </button>
+            <BenchoScope>
+              <SlideToConfirm
+                className="bn-sld-grow"
+                width="fill"
+                label={commentOnly ? "Deslize para responder" : "Deslize para mandar"}
+                busyLabel="Mandando…"
+                busy={busy === "send"}
+                disabled={!!busy}
+                onConfirm={send}
+              />
+            </BenchoScope>
             <button className="button" disabled={!!busy} onClick={() => setConfirm(false)}>
               <X className="ic" /> Cancelar
             </button>

package/studio/web/components/Omni/OmniWidget.tsx

@@ -244,9 +244,17 @@ export function OmniWidget({ menuCollapsed }: { menuCollapsed: boolean }) {
   const [autoCall, setAutoCall] = useState(false);
   const toggle = () => {
     if (open) return collapse();
-    setOpen(true);
-    if (live || !info) return;
-    if (!info.config.enabled || unavailable || claudeMode) return greeting.play(info.config.gender);
+    /* a call already on, minimized in the card: the second click brings the dock */
+    if (live) return setOpen(true);
+    if (!info) return setOpen(true);
+    /* with no call to start (Omni off, unavailable, voice quota over) the dock opens and the greeting plays */
+    if (!info.config.enabled || unavailable || claudeMode) {
+      setOpen(true);
+      return greeting.play(info.config.gender);
+    }
+    /* the first click only activates the voice: the call starts minimized, living in the card (with the
+       menu collapsed there is no card to show it, so the dock opens) */
+    if (menuCollapsed) setOpen(true);
     setAutoCall(true);
     void conv.start(mode, undefined, { greet: info.config.gender, holdIdle: true });
   };
@@ -331,7 +339,7 @@ export function OmniWidget({ menuCollapsed }: { menuCollapsed: boolean }) {
   }, [autoCall, conv.status, userSpoke, holdIdle, discard]);
   /* "Oi, Omni" (the switch in the settings): starts the conversation the way opening the panel does (a
      silent call ends by itself); in Claude mode it starts the recording. With the menu expanded the call
-     starts minimized, living in the sidebar card (its icon or a click opens the dock); with the menu
+     starts minimized, living in the sidebar card (a click opens the dock); with the menu
      collapsed there is no card to show it, so the dock opens. Claude mode always opens it: the
      recording's button is there. It sleeps while Omni talks. */
   const callByVoice = () => {
@@ -418,10 +426,11 @@ export function OmniWidget({ menuCollapsed }: { menuCollapsed: boolean }) {
       available,
       face: info ? face : null,
       open,
+      active: live,
       ring: bubble,
       glow,
     });
-  }, [available, info, face, open, bubble, glow]);
+  }, [available, info, face, open, live, bubble, glow]);
   /* while the agent works without speaking, the name gives way to a shimmering "pensando…" */
   const omniName = bubble === "thinking" ? <b className="omni-name-thinking">Pensando…</b> : <b>Omni</b>;
   /* agent.enabled false: Omni is off, no button and no panel (a live conversation still ends normally) */

package/studio/web/components/Omni/PendingActions.tsx

@@ -1,8 +1,11 @@
-/* An action Omni staged: nothing runs until the user presses Confirmar here, or says yes to Omni, who
-   then presses it (confirm_action; the server only takes a card the user has spoken after). */
+/* An action Omni staged: nothing runs until the user slides to confirm here, or says yes to Omni, who
+   then confirms it on the server (confirm_action; the server only takes a card the user has spoken after, and the
+   card leaves this list when it resolves, so the voice path never needs the slide). */
 
 import { useEffect, useRef, useState } from "react";
 import { CaretLeft, CaretRight } from "../icons";
+import { BenchoScope } from "../bencho/BenchoScope";
+import { SlideToConfirm } from "../bencho/SlideToConfirm";
 import type { AgentPendingAction } from "../../types/api";
 
 const KIND_TITLE: Record<AgentPendingAction["kind"], string> = {
@@ -34,6 +37,14 @@ const KIND_BUSY: Record<AgentPendingAction["kind"], string> = {
   omnichat_send: "Mandando…",
 };
 
+/* the slide's words: the verb says what leaves the studio, since there is no second button to read it from */
+const KIND_SLIDE: Partial<Record<AgentPendingAction["kind"], string>> = {
+  publish: "Deslize para publicar",
+  schedule: "Deslize para agendar",
+  omnichat: "Deslize para gravar",
+  omnichat_send: "Deslize para mandar",
+};
+
 /* a summary past three lines folds, with a "Mostrar tudo" that opens it */
 function Summary({ text }: { text: string }) {
   const ref = useRef<HTMLParagraphElement>(null);
@@ -83,6 +94,7 @@ export function PendingActions({
     const r = await onResolve(a, confirm);
     setBusy(null);
     setErrors(e => ({ ...e, [a.id]: r.ok ? "" : (r.error ?? "falhou") }));
+    return r.ok;
   };
   /* mouse drag scrolls the carousel (touch scrolls natively); a drag never presses a button */
   const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
@@ -150,12 +162,19 @@ export function PendingActions({
               {errors[a.id] && <p className="response error">{errors[a.id]}</p>}
             </div>
             <div className="omni-pending-actions">
-              <button type="button" className="button" disabled={busy === a.id} onClick={() => act(a, false)}>
+              <BenchoScope>
+                <SlideToConfirm
+                  width="fill"
+                  label={KIND_SLIDE[a.kind] ?? "Deslize para confirmar"}
+                  busyLabel={KIND_BUSY[a.kind]}
+                  busy={busy === a.id}
+                  disabled={busy === a.id}
+                  onConfirm={() => act(a, true)}
+                />
+              </BenchoScope>
+              <button type="button" className="button small" disabled={busy === a.id} onClick={() => act(a, false)}>
                 Cancelar
               </button>
-              <button type="button" className="button primary" disabled={busy === a.id} onClick={() => act(a, true)}>
-                {busy === a.id ? KIND_BUSY[a.kind] : "Confirmar"}
-              </button>
             </div>
           </div>
         ))}

package/studio/web/components/OmnichatRulePanel/RuleConfig.tsx

@@ -7,6 +7,8 @@ import { useState } from "react";
 import type { RuleEditor } from "../../hooks/useRuleEditor";
 import type { OmnichatRuleDetail } from "../../types/api";
 import { ArrowCounterClockwise, ArrowLeft, ArrowRight, Check, FloppyDisk, Play, SlidersHorizontal, X } from "../icons";
+import { BenchoScope } from "../bencho/BenchoScope";
+import { SlideToConfirm } from "../bencho/SlideToConfirm";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../ui/accordion";
 import { STEPS, stepInfo, type StepId } from "./rule-steps";
 import { MessageStep } from "./steps/MessageStep";
@@ -111,9 +113,17 @@ export function RuleConfig({
             )}
             {confirmSave && enabled ? (
               <>
-                <button className="button approve" disabled={!!busy} onClick={save}>
-                  <Check className="ic" /> {busy === "save" ? "Gravando…" : "Confirmar: gravar com a regra ligada"}
-                </button>
+                <BenchoScope>
+                  <SlideToConfirm
+                    className="bn-sld-grow"
+                    width="fill"
+                    label="Deslize para gravar com a regra ligada"
+                    busyLabel="Gravando…"
+                    busy={busy === "save"}
+                    disabled={!!busy}
+                    onConfirm={save}
+                  />
+                </BenchoScope>
                 <button className="button" disabled={!!busy} onClick={() => setConfirmSave(false)}>
                   <X className="ic" /> Cancelar
                 </button>

package/studio/web/components/OmnichatRulePanel/RuleEnableConfirm.tsx

@@ -3,7 +3,9 @@
 import { capitalize } from "../../lib/format";
 import type { RuleEditor } from "../../hooks/useRuleEditor";
 import type { OmnichatRuleDetail } from "../../types/api";
-import { Power, X } from "../icons";
+import { BenchoScope } from "../bencho/BenchoScope";
+import { SlideToConfirm } from "../bencho/SlideToConfirm";
+import { X } from "../icons";
 import { triggerLabel } from "../RuleForm";
 
 export function RuleEnableConfirm({
@@ -30,9 +32,17 @@ export function RuleEnableConfirm({
           : ` ${capitalize(thePost)} ainda não subiu: começa quando ele for publicado.`}
       </p>
       <div className="actions">
-        <button className="button approve" disabled={!!busy} onClick={() => enable(true)}>
-          <Power className="ic" /> {busy === "enable" ? "Ligando…" : `Confirmar: responder ${onBehalf}`}
-        </button>
+        <BenchoScope>
+          <SlideToConfirm
+            className="bn-sld-grow"
+            width="fill"
+            label="Deslize para ligar e responder"
+            busyLabel="Ligando…"
+            busy={busy === "enable"}
+            disabled={!!busy}
+            onConfirm={() => enable(true)}
+          />
+        </BenchoScope>
         <button className="button" disabled={!!busy} onClick={() => setConfirm(false)}>
           <X className="ic" /> Cancelar
         </button>

package/studio/web/components/ResultMessage.tsx

@@ -1,7 +1,16 @@
+import { useEffect } from "react";
 import type { ActionResult } from "../lib/api";
+import { isToastable, toastResult } from "../lib/toast";
 
-/* the output (ok) or the error of the last save */
-export const ResultMessage = ({ result }: { result: ActionResult }) =>
-  result ? (
+/* the output (ok) or the error of the last save: a toast, which goes away on its own. A long or multi-line text
+   (command output, a stack of failures) is still written here, since the reader may need to come back to it;
+   `inline` forces that for a result that must stay on the screen. */
+export function ResultMessage({ result, inline }: { result: ActionResult; inline?: boolean }) {
+  const toasted = !!result && !inline && isToastable(result);
+  useEffect(() => {
+    if (toasted) toastResult(result);
+  }, [toasted, result]);
+  return result && !toasted ? (
     <p className={`response ${result.ok ? "ok" : "error"}`}>{result.ok ? result.output : result.error}</p>
   ) : null;
+}