@crievo/omni 0.1.2 → 0.1.4

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;
+}

package/studio/web/components/Sidebar.tsx

@@ -9,6 +9,8 @@
 import type { ReactNode } from "react";
 import { Link, useMatchRoute, useNavigate } from "@tanstack/react-router";
 import { useAdmin } from "../hooks/useAdmin";
+import { BenchoScope } from "./bencho/BenchoScope";
+import { CreateMenu, type CreateMenuItem } from "./bencho/CreateMenu";
 import { useRunner } from "../hooks/useRunner";
 import { omniLevel, toggleOmniPanel, useOmniPanel } from "../lib/omni-panel";
 import { OmniGlow } from "./Omni/OmniGlow";
@@ -22,9 +24,10 @@ import {
   Dashboard,
   Gear,
   ArrowExpand,
+  GridFour,
   Minus,
   Plug,
-  Plus,
+  Play,
   Power,
   ShieldCheck,
   SidebarLeft,
@@ -152,6 +155,42 @@ function NavLink({
   );
 }
 
+declare module "@tanstack/history" {
+  interface HistoryState {
+    /* /new: which deliverables come checked */
+    deliverables?: ("video" | "carousel")[];
+    /* /styles: the new-style form comes open */
+    creating?: boolean;
+  }
+}
+
+/* The Criar menu: what the studio can start. The video and the carousel are the same form (/new, the carousel with its
+   deliverable already checked); a new visual style opens the form at the top of Estilos visuais. The destination reads
+   the router's history state, so no route needs a search schema. */
+function useCreateItems(): CreateMenuItem[] {
+  const navigate = useNavigate();
+  return [
+    {
+      id: "video",
+      label: "Vídeo",
+      icon: Play,
+      onSelect: () => navigate({ to: "/new", state: { deliverables: ["video"] } }),
+    },
+    {
+      id: "carousel",
+      label: "Carrossel",
+      icon: GridFour,
+      onSelect: () => navigate({ to: "/new", state: { deliverables: ["carousel"] } }),
+    },
+    {
+      id: "style",
+      label: "Estilo visual",
+      icon: Sparkle,
+      onSelect: () => navigate({ to: "/styles", state: { creating: true } }),
+    },
+  ];
+}
+
 /* `missing`: the required setup steps still missing (Primeiros passos shows while there are any) */
 export function Sidebar({
   collapsed,
@@ -165,7 +204,7 @@ export function Sidebar({
   showGettingStarted: boolean;
 }) {
   const isActive = useIsActive();
-  const navigate = useNavigate();
+  const createItems = useCreateItems();
   const { hosted } = useRunner();
   const { isAdmin } = useAdmin();
   const omni = useOmniPanel();
@@ -194,24 +233,19 @@ export function Sidebar({
           <span className="menu-group-name">{g.name}</span>
           {g.items.map(item =>
             item.id === "videos" ? (
-              /* "Criar vídeo" lives inside the Conteúdos row: the + sits over the link, as a sibling
-               (a button inside <a> is not valid HTML), and its click never reaches the link */
+              /* "Criar" lives inside the Conteúdos row: the pill sits over the link, as a sibling
+               (a button inside <a> is not valid HTML), and its menu hangs from its corner */
               <div key={item.id} className="menu-item-with-action">
                 <NavLink item={item} collapsed={collapsed} active={isActive(item)} />
-                <button
-                  type="button"
-                  className="menu-action"
-                  title="Criar vídeo"
-                  aria-label="Criar vídeo"
-                  onClick={e => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    navigate({ to: "/new" });
-                  }}
-                >
-                  <Plus weight="bold" aria-hidden="true" />
-                  <span>Criar</span>
-                </button>
+                <BenchoScope>
+                  <CreateMenu
+                    className="menu-create"
+                    label="Criar"
+                    items={createItems}
+                    anchor="top-end"
+                    pillHeight={28}
+                  />
+                </BenchoScope>
               </div>
             ) : (
               <NavLink key={item.id} item={item} collapsed={collapsed} active={isActive(item)} />
@@ -249,18 +283,23 @@ export function Sidebar({
               className={`menu-omni ${omni.ring}${omni.open ? " open" : ""}`}
               onClick={toggleOmniPanel}
               aria-expanded={omni.open}
-              aria-label={omni.open ? "Minimizar o Omni" : "Falar com Omni"}
-              title={collapsed ? "Falar com Omni" : omni.open ? "Minimizar o Omni" : undefined}
+              aria-label={omni.open ? "Minimizar o Omni" : omni.active ? "Abrir o Omni" : "Falar com Omni"}
+              title={
+                omni.open ? "Minimizar o Omni" : omni.active ? "Abrir o Omni" : collapsed ? "Falar com Omni" : undefined
+              }
             >
               <VoiceAvatar seed={omni.face ?? OMNI_AVATAR} size={40} />
               {/* minimized in a call, the button says what Omni is doing */}
               <span className="menu-label">
                 {omni.open ? "Falar com Omni" : (GLOW_LABEL[omni.glow] ?? "Falar com Omni")}
               </span>
-              {/* the whole card opens the dock; the icon says so (and, with the dock open, that it minimizes) */}
-              <span className="menu-omni-expand" aria-hidden="true">
-                {omni.open ? <Minus /> : <ArrowExpand />}
-              </span>
+              {/* the first click activates the voice (minimized in the card); only then the icon shows, and the
+                  next click opens the dock (with it open, the icon says it minimizes) */}
+              {(omni.active || omni.open) && (
+                <span className="menu-omni-expand" aria-hidden="true">
+                  {omni.open ? <Minus /> : <ArrowExpand />}
+                </span>
+              )}
             </button>
           </OmniGlow>
         )}

package/studio/web/components/StageStepper.tsx

@@ -1,8 +1,12 @@
-/* The pipeline stepper: each stage with its state now. On the overview each step links to the
-   stage on the video page; on the page, it picks the stage. */
+/* The pipeline stepper: each stage as a Bencho action node card with its state now. On the overview each card links
+   to the stage on the video page; on the page, it picks the stage. The corner buttons are the actions the studio
+   already has for the stage (approve, build the export again, open its process); a stage with none shows none. */
 
+import { type CSSProperties, useState } from "react";
 import { Link } from "@tanstack/react-router";
 import { useNow } from "../hooks/useNow";
+import { soundRoutes } from "../hooks/useSound";
+import { api, enc, send, type ActionResult } from "../lib/api";
 import {
   STAGES,
   getStageState,
@@ -12,7 +16,10 @@ import {
   type StageState,
 } from "../lib/stages";
 import type { Queue, Ticket } from "../types/api";
-import { ArrowClockwise, Check, X } from "./icons";
+import { ActionNode, type NodeAction } from "./bencho/ActionNode";
+import { BenchoScope } from "./bencho/BenchoScope";
+import { ResultMessage } from "./ResultMessage";
+import { ArrowClockwise, Check, SidebarRight, X } from "./icons";
 
 function stepMark(s: StageState, stage: StageDef) {
   switch (s.kind) {
@@ -33,13 +40,15 @@ function stepMark(s: StageState, stage: StageDef) {
   }
 }
 
-/* `stages`: the pipeline shown (the video's by default; the carousel's in PIPELINES) */
+/* `stages`: the pipeline shown (the video's by default; the carousel's in PIPELINES).
+   `onProcess`: opens the stage's process (the page's side panel); without it that action is not offered. */
 export function StageStepper({
   video,
   queue,
   runs,
   selected,
   onSelect,
+  onProcess,
   compact = false,
   stages = STAGES,
 }: {
@@ -49,39 +58,101 @@ export function StageStepper({
   runs?: Ticket[];
   selected?: string;
   onSelect?: (id: string) => void;
+  onProcess?: (id: string) => void;
   compact?: boolean;
 }) {
   const now = useNow();
+  const [busy, setBusy] = useState<string | null>(null);
+  const [note, setNote] = useState<ActionResult>(null);
+  const param = { slug: enc(video.slug) };
+  const run = async (key: string, request: () => Promise<NonNullable<ActionResult>>) => {
+    setBusy(key);
+    setNote(null);
+    const r = await request();
+    setBusy(null);
+    setNote(r);
+  };
+
+  /* the buttons a stage's card carries: only what the studio already does, in the order of how often it is wanted */
+  const actionsOf = (stage: StageDef, s: StageState): NodeAction[] => {
+    const list: NodeAction[] = [];
+    if (s.kind === "user" && stage.id === "script")
+      list.push({
+        id: "approve",
+        label: "Aprovar o roteiro",
+        icon: Check,
+        disabled: !!busy,
+        onClick: () =>
+          run("approve", () => send(api.videos[":slug"].script.decide.$post({ param, json: { decision: "approve" } }))),
+      });
+    if (s.kind === "user" && stage.id === "motion_script")
+      list.push({
+        id: "approve",
+        label: "Aprovar todas as cenas",
+        icon: Check,
+        disabled: !!busy,
+        onClick: () => run("approve", () => send(api.videos[":slug"].scenes["approve-all"].$post({ param, json: {} }))),
+      });
+    /* the editor's "Renderizar" is the same call; it is offered here only when the export is out of date */
+    if (s.kind === "warning" && stage.id === "render" && video.status?.stages.find(x => x.id === "export")?.outdated)
+      list.push({
+        id: "reassemble",
+        label: "Montar o export de novo",
+        icon: ArrowClockwise,
+        disabled: !!busy,
+        onClick: () => run("reassemble", () => soundRoutes(video.slug).reassemble()),
+      });
+    if (onProcess && ["running", "queued", "redoing", "error", "warning"].includes(s.kind))
+      list.push({
+        id: "process",
+        label: "Abrir o processamento",
+        icon: SidebarRight,
+        onClick: () => onProcess(stage.id),
+      });
+    return list;
+  };
+
   return (
-    <ol className={`stepper${compact ? " compact" : ""}`}>
-      {stages.map(stage => {
-        const s = getStageState(stage, video, queue, runs);
-        const hint = `${stage.num} · ${stage.title}${s.kind === "warning" ? `: ${s.reason}` : ""}`;
-        const content = (
-          <>
-            <span className="step-mark">{stepMark(s, stage)}</span>
-            <span className="step-name">{stage.name}</span>
-            {s.kind !== "done" && <span className="step-status">{stageStateDetail(s, now)}</span>}
-          </>
-        );
-        return (
-          <li key={stage.id} className={`step ${s.kind}${selected === stage.id ? " chosen" : ""}`}>
-            {onSelect ? (
-              <button
-                onClick={() => onSelect(stage.id)}
-                title={hint}
-                aria-current={selected === stage.id ? "step" : undefined}
-              >
-                {content}
-              </button>
-            ) : (
-              <Link to="/videos/$slug/$stage" params={{ slug: video.slug, stage: stage.id }} title={hint}>
-                {content}
-              </Link>
-            )}
-          </li>
-        );
-      })}
-    </ol>
+    <>
+      <ol className={`stepper cards${compact ? " compact" : ""}`} style={{ "--steps": stages.length } as CSSProperties}>
+        {stages.map(stage => {
+          const s = getStageState(stage, video, queue, runs);
+          const hint = `${stage.num} · ${stage.title}${s.kind === "warning" ? `: ${s.reason}` : ""}`;
+          return (
+            <li key={stage.id} className={`step ${s.kind}${selected === stage.id ? " chosen" : ""}`}>
+              <BenchoScope>
+                <ActionNode
+                  title={stage.name}
+                  description={stageStateDetail(s, now) || "Ainda não feita"}
+                  hint={hint}
+                  mark={<span className="step-mark">{stepMark(s, stage)}</span>}
+                  actions={actionsOf(stage, s)}
+                  people={[]}
+                  selected={selected === stage.id}
+                  width="100%"
+                  dense
+                  corner={compact ? 12 : 14}
+                  air={0}
+                  fan="down"
+                  render={props =>
+                    onSelect ? (
+                      <button
+                        type="button"
+                        {...props}
+                        onClick={() => onSelect(stage.id)}
+                        aria-current={selected === stage.id ? "step" : undefined}
+                      />
+                    ) : (
+                      <Link to="/videos/$slug/$stage" params={{ slug: video.slug, stage: stage.id }} {...props} />
+                    )
+                  }
+                />
+              </BenchoScope>
+            </li>
+          );
+        })}
+      </ol>
+      <ResultMessage result={note} />
+    </>
   );
 }