@crievo/omni 0.1.3 → 0.1.4

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

package/studio/web/components/Toaster.tsx

@@ -0,0 +1,25 @@
+/* The studio's toasts (lib/toast.ts), drawn once in the app shell: Bencho's stack in the bottom-right corner. */
+
+import { useEffect } from "react";
+import { toast, useToasts } from "../lib/toast";
+import { BenchoScope } from "./bencho/BenchoScope";
+import { ToastStack } from "./bencho/ToastStack";
+
+export function Toaster() {
+  const toasts = useToasts();
+  /* a stack open when the shell goes away must not leave every timer held */
+  useEffect(() => () => toast.resume(), []);
+  return (
+    <BenchoScope>
+      <div className="toaster">
+        <ToastStack
+          toasts={toasts}
+          onDismiss={toast.dismiss}
+          onOpenChange={open => (open ? toast.pause() : toast.resume())}
+          align="end"
+          floating
+        />
+      </div>
+    </BenchoScope>
+  );
+}

package/studio/web/components/VoiceCarousel.tsx

@@ -1,8 +1,9 @@
 /* The carousel (Configurações → Voz). The center voice is the selected one; the neighbors are
-   smaller and lighter. From there it becomes the active voice, or opens to edit. The carousel's
-   last item adds a voice. */
+   smaller and lighter. From there it becomes the active voice, or opens to edit. The add ball is
+   not a carousel step: it stays in the slot before the center (centered while there is no voice),
+   and the voices that go past the center slide under it. */
 
-import { useEffect, useRef, useState } from "react";
+import { type CSSProperties, useEffect, useRef, useState } from "react";
 import { useAvatarAudioReactive } from "../hooks/useAvatarAudioReactive";
 import { useVoiceProfilePreview } from "../hooks/useVoiceProfilePreview";
 import type { ActionResult } from "../lib/api";
@@ -26,7 +27,7 @@ export function VoiceCarousel({
   onEdit: (id: string) => void;
   onAdd: () => void;
 }) {
-  const total = profiles.length; /* after the last voice comes the "+": it opens the modal, it is not a carousel step */
+  const total = profiles.length;
   const last = Math.max(0, total - 1);
   const initial = Math.max(
     0,
@@ -97,7 +98,8 @@ export function VoiceCarousel({
               <button
                 key={p.id}
                 type="button"
-                className={`carousel-item d${Math.min(Math.abs(i - index), 3)}${p.id === defaultId ? " active" : ""}`}
+                className={`carousel-item d${Math.min(Math.abs(i - index), 3)}${p.id === defaultId ? " active" : ""}${i < index - 1 ? " under" : ""}`}
+                style={{ "--shift": `calc(${Math.max(0, index - 1 - i)} * var(--slot))` } as CSSProperties}
                 onClick={() => go(i)}
                 aria-label={p.name}
                 aria-current={i === index}
@@ -106,18 +108,19 @@ export function VoiceCarousel({
                 <VoiceAvatar seed={p.avatar || p.id} size={160} />
               </button>
             ))}
-            <button
-              type="button"
-              className={`carousel-item more d${Math.min(Math.abs(total - index), 3)}`}
-              onClick={onAdd}
-              aria-label="Adicionar voz"
-              title="Adicionar voz"
-            >
-              <span className="avatar-more large">
-                <Plus />
-              </span>
-            </button>
           </div>
+          <button
+            type="button"
+            className={`carousel-add ${total ? "d1" : "d0"}${index > 0 ? " covering" : ""}`}
+            style={{ "--add-x": total ? -1.5 : -0.5 } as CSSProperties}
+            onClick={onAdd}
+            aria-label="Adicionar voz"
+            title="Adicionar voz"
+          >
+            <span className="avatar-more large">
+              <Plus />
+            </span>
+          </button>
         </div>
         {profile && (
           <div className="carousel-actions">

package/studio/web/components/VoiceProfilesSettings.tsx

@@ -13,6 +13,7 @@
 
 import { useEffect, useState, type ReactNode } from "react";
 import { api, send } from "../lib/api";
+import { toastResult } from "../lib/toast";
 import type { Settings } from "../types/api";
 import { CloneVoiceDialog } from "./CloneVoiceDialog";
 import { EditVoiceDialog } from "./EditVoiceDialog";
@@ -36,8 +37,12 @@ export function VoiceProfilesSettings({
   /* the id of the voice being redone: opens the clone modal with its recording attached */
   const [redoing, setRedoing] = useState<string | null>(null);
   const [focus, setFocus] = useState<string | null>(null);
-  /* what the removal did on each provider; stays under the carousel until the next action */
+  /* what the removal did on each provider: a toast when it is one short line; a longer text stays under the carousel
+     until the next action */
   const [message, setMessage] = useState<string | null>(null);
+  const report = (output: string) => {
+    if (!toastResult({ ok: true, output })) setMessage(output);
+  };
   /* the clone creates the voice by itself: when the new profile shows up, it comes to the center.
      If some provider failed, the voice opens in edit with the warning, to create again only there */
   const [cloned, setCloned] = useState<{ before: string[]; warnings: string[] } | null>(null);
@@ -108,7 +113,7 @@ export function VoiceProfilesSettings({
                 onRedone={output => {
                   setRedoing(null);
                   setFocus(profile.id);
-                  setMessage(output);
+                  report(output);
                   reload();
                 }}
               />
@@ -140,7 +145,7 @@ export function VoiceProfilesSettings({
               }}
               onRemove={output => {
                 setEditing(null);
-                setMessage(output);
+                report(output);
               }}
             />
           );