@crievo/omni 0.1.2 → 0.1.4

package/studio/web/pages/VideoPage/components/ChangedVoices.tsx

@@ -5,6 +5,7 @@ import { useState } from "react";
 import { useVoiceRunning } from "../../../hooks/useVoiceRunning";
 import { api, enc, send, type ActionResult } from "../../../lib/api";
 import { ChatCircleText } from "../../../components/icons";
+import { toast, toastResult } from "../../../lib/toast";
 import type { VideoDetail } from "../../../types/api";
 import { scenesOf } from "./StageResult";
 
@@ -18,19 +19,20 @@ export function ChangedVoices({ video }: { video: VideoDetail }) {
   if (video.status?.stages.find(e => e.id === "voice")?.pause) return null;
   if (!changed.length || running || !video.status?.stages.find(e => e.id === "timing")?.ok) return null;
   const ask = async () => {
-    setResponse(
-      await send(
-        api.videos[":slug"].claude.$post({
-          param: { slug: enc(video.slug) },
-          json: {
-            message:
-              `Troquei o texto ou a leitura das falas ${changed.join(", ")} pelo studio (texto no scenes.json, omnivideo.py voice --regenerate/--use). ` +
-              "O texto e as leituras escolhidas ficam: não reescreva essas falas nem gere voz de novo para elas. Refaça o vídeo a partir do tempo, como na linha " +
-              "“texto de uma fala” da tabela Retomar ou refazer da skill omnivideo: tempo, render das cenas afetadas, legenda e montagem.",
-          },
-        }),
-      ),
+    const r = await send(
+      api.videos[":slug"].claude.$post({
+        param: { slug: enc(video.slug) },
+        json: {
+          message:
+            `Troquei o texto ou a leitura das falas ${changed.join(", ")} pelo studio (texto no scenes.json, omnivideo.py voice --regenerate/--use). ` +
+            "O texto e as leituras escolhidas ficam: não reescreva essas falas nem gere voz de novo para elas. Refaça o vídeo a partir do tempo, como na linha " +
+            "“texto de uma fala” da tabela Retomar ou refazer da skill omnivideo: tempo, render das cenas afetadas, legenda e montagem.",
+        },
+      }),
     );
+    setResponse(r);
+    if (r.ok) toast.success("Pedido enviado", { body: "Acompanhe na sessão acima." });
+    else toastResult(r);
   };
   return (
     <div className="voices-notice">
@@ -42,11 +44,6 @@ export function ChangedVoices({ video }: { video: VideoDetail }) {
         <button className="button primary small" onClick={ask} disabled={!!response?.ok}>
           <ChatCircleText className="ic" /> Pedir ao agente para refazer
         </button>
-        {response && (
-          <span className={`response ${response.ok ? "ok" : "error"}`}>
-            {response.ok ? "Pedido enviado: acompanhe na sessão acima" : response.error}
-          </span>
-        )}
       </div>
     </div>
   );

package/studio/web/pages/VideoPage/components/LineTextEditor.tsx

@@ -118,7 +118,7 @@ export function LineTextEditor({ video, line, only }: { video: VideoDetail; line
         Se o texto tirar a palavra em que um beat entra, o agente grava a fala e muda o beat junto. Escreva como se
         fala: número por extenso quando a voz pode errar.
       </p>
-      {response && !response.ok && <p className="response error">{response.error}</p>}
+      <ResultMessage result={response} />
     </div>
   );
 }

package/studio/web/pages/VideoPage/components/PublishForm.tsx

@@ -7,9 +7,12 @@ import { api, enc, send as sendRequest, type ActionResult } from "../../../lib/a
 import { formatDayTime, timeAgo } from "../../../lib/format";
 import { PLATFORMS, formatPlatformList, type PlatformId } from "../../../lib/platforms";
 import { deletePublishDraft, readPublishDraft, savePublishDraft } from "../../../lib/publish-draft";
+import { toastResult } from "../../../lib/toast";
 import { PlatformCard } from "../../../components/PlatformCard";
 import { ResultMessage } from "../../../components/ResultMessage";
-import { CalendarBlank, ChatsCircle, Check, UploadSimple, X } from "../../../components/icons";
+import { BenchoScope } from "../../../components/bencho/BenchoScope";
+import { SlideToConfirm } from "../../../components/bencho/SlideToConfirm";
+import { CalendarBlank, ChatsCircle, UploadSimple, X } from "../../../components/icons";
 import type { FileEntry, VideoDetail } from "../../../types/api";
 import { ScheduledInfo } from "./ScheduledInfo";
 import { CoverPicker } from "./CoverPicker";
@@ -32,7 +35,6 @@ export function PublishForm({ video, current }: { video: VideoDetail; current: F
     },
   );
   const [writing, setWriting] = useState(false);
-  const [textNotice, setTextNotice] = useState<ActionResult>(null);
   const [privacy, setPrivacy] = useState<string | null>(draft?.privacy ?? null);
   const [tiktokPrivacy, setTiktokPrivacy] = useState<string | null>(draft?.privacyTiktok ?? null);
   const [checked, setChecked] = useState<Record<string, boolean>>(draft?.checked ?? {});
@@ -95,12 +97,14 @@ export function PublishForm({ video, current }: { video: VideoDetail; current: F
   /* `publish.mjs text`: Claude writes from the script; redo replaces what is in the fields */
   const write = async (redo: boolean) => {
     setWriting(true);
-    setTextNotice(null);
     const r = await sendRequest(
       api.videos[":slug"].publish.text.$post({ param: { slug: enc(video.slug) }, json: { redo } }),
     );
     setWriting(false);
-    setTextNotice(r);
+    /* a failure, or Claude answering without writing: a toast (the fields keep what they had) */
+    if (!r.ok || /não escreveu/.test(r.output ?? "")) {
+      toastResult({ ok: false, error: r.ok ? r.output : r.error }, undefined, { always: true });
+    }
     /* the text publish.mjs wrote: a field it didn't write keeps what is there */
     const t = r.ok && r.text && typeof r.text === "object" && !Array.isArray(r.text) ? r.text : null;
     if (t) {
@@ -255,9 +259,6 @@ export function PublishForm({ video, current }: { video: VideoDetail; current: F
         })}
       </div>
 
-      {textNotice && (!textNotice.ok || /não escreveu/.test(textNotice.output ?? "")) && (
-        <p className="response error">{textNotice.ok ? textNotice.output : textNotice.error}</p>
-      )}
       <PublishText
         text={text}
         onField={field}
@@ -350,16 +351,22 @@ export function PublishForm({ video, current }: { video: VideoDetail; current: F
           </button>
         ) : (
           <>
-            <button className="button approve" disabled={sending} onClick={send}>
-              <Check className="ic" />
-              {sending
-                ? scheduling
-                  ? "Agendando…"
-                  : "Publicando…"
-                : scheduling
-                  ? `Confirmar: publicar ${formatPlatformList(chosen)} ${formatDayTime(whenMs)}`
-                  : `Confirmar: publicar ${formatPlatformList(chosen)}`}
-            </button>
+            <p className="hint" style={{ flexBasis: "100%", margin: 0 }}>
+              <strong>
+                {scheduling ? "Agendar" : "Publicar"} {formatPlatformList(chosen)}
+                {scheduling ? ` ${formatDayTime(whenMs)}` : ""}.
+              </strong>
+            </p>
+            <BenchoScope>
+              <SlideToConfirm
+                className="bn-sld-grow"
+                width="fill"
+                label={scheduling ? "Deslize para agendar" : "Deslize para publicar"}
+                busyLabel={scheduling ? "Agendando…" : "Publicando…"}
+                busy={sending}
+                onConfirm={send}
+              />
+            </BenchoScope>
             {!sending && (
               <button className="button" onClick={() => setConfirm(false)}>
                 <X className="ic" /> Cancelar

package/studio/web/pages/VideoPage/components/ScheduledInfo.tsx

@@ -6,6 +6,7 @@ import { api, enc, send, type ActionResult } from "../../../lib/api";
 import { formatDayTime } from "../../../lib/format";
 import { formatPlatformList } from "../../../lib/platforms";
 import { Clock } from "../../../components/icons";
+import { ResultMessage } from "../../../components/ResultMessage";
 import type { PlatformAccounts, ScheduledPost, VideoDetail } from "../../../types/api";
 
 const TITLE: Record<ScheduledPost["state"], string> = {
@@ -66,7 +67,7 @@ export function ScheduledInfo({
           {cancelling ? "Cancelando…" : "Cancelar agendamento"}
         </button>
       )}
-      {response && !response.ok && <p className="response error">{response.error}</p>}
+      <ResultMessage result={response} />
     </div>
   );
 }

package/studio/web/pages/VideoPage/components/SoundTimeline/AddSound.tsx

@@ -4,6 +4,8 @@ import { useState } from "react";
 import { api, enc, send as sendRequest } from "../../../../lib/api";
 import { Plus } from "../../../../components/icons";
 import { useOmniHandle } from "../../../../lib/omni-ui";
+import { toast } from "../../../../lib/toast";
+import { UploadTrack } from "./UploadTrack";
 
 /* adds an Epidemic effect: the URL captured in the player becomes an MP3 in the video's sfx/ */
 export function AddSound({ slug, onAdd }: { slug: string; onAdd: (name: string | null) => void }) {
@@ -11,7 +13,6 @@ export function AddSound({ slug, onAdd }: { slug: string; onAdd: (name: string |
   const [epidemicUrl, setEpidemicUrl] = useState("");
   const [name, setName] = useState("");
   const [downloading, setDownloading] = useState(false);
-  const [msg, setMsg] = useState<{ ok: boolean; text: string } | null>(null);
   /* a direct MP3 (audiocdn…/lqmp3/<id>.mp3) downloads at once; any other Epidemic page (playlist,
      theme, search) goes to the agent, which opens it in Chrome, plays and captures the MP3 */
   const pageUrl = (u: string) => !/audiocdn\.epidemicsound\.com\/lqmp3\//.test(u);
@@ -21,7 +22,6 @@ export function AddSound({ slug, onAdd }: { slug: string; onAdd: (name: string |
     if (!url.trim() || downloading) return { ok: false, error: downloading ? "já está baixando" : "falta o link" };
     const isPage = pageUrl(url);
     setDownloading(true);
-    setMsg(null);
     const param = { slug: enc(slug) };
     const json = { url: url.trim(), name: file.trim() };
     const r = await sendRequest(
@@ -31,20 +31,17 @@ export function AddSound({ slug, onAdd }: { slug: string; onAdd: (name: string |
     );
     setDownloading(false);
     if (!r.ok) {
-      setMsg({ ok: false, text: r.error ?? "Não consegui baixar" });
+      toast.error("Não consegui baixar o som", { body: r.error });
       return { ok: false, error: r.error ?? "não consegui baixar" };
     }
     if (isPage) {
       /* the agent works in the background; the timeline reloads when it stops */
-      setMsg({
-        ok: true,
-        text: "O agente abriu a página no Chrome e vai baixar a faixa. A lista atualiza quando ele terminar.",
-      });
+      toast.info("O agente abriu a página no Chrome", { body: "Ele baixa a faixa; a lista atualiza quando terminar." });
       setEpidemicUrl("");
       setName("");
       return { ok: true, output: "o agente do editor abriu a página no Chrome e vai baixar a faixa" };
     }
-    setMsg({ ok: true, text: r.output ?? "Adicionado" });
+    toast.success("Som adicionado", { body: r.output?.split(" ←")[0] });
     setEpidemicUrl("");
     setName("");
     onAdd(r.output?.split(" ←")[0] ?? null);
@@ -55,15 +52,18 @@ export function AddSound({ slug, onAdd }: { slug: string; onAdd: (name: string |
       setOpen(true);
       setEpidemicUrl(url);
       setName(file);
-      setMsg(null);
     },
     submit: (url: string, file: string) => send(url, file),
   });
   if (!open)
     return (
-      <button className="button small" onClick={() => setOpen(true)}>
-        <Plus className="ic" /> Adicionar som
-      </button>
+      <div className="sound-add-buttons">
+        <button className="button small" onClick={() => setOpen(true)}>
+          <Plus className="ic" /> Adicionar som
+        </button>
+        {/* the user's own file: it joins this video's sounds, armed to place on the timeline */}
+        <UploadTrack slug={slug} label="Enviar áudio" onUploaded={onAdd} />
+      </div>
     );
   return (
     <div className="sound-add">
@@ -100,7 +100,6 @@ export function AddSound({ slug, onAdd }: { slug: string; onAdd: (name: string |
           className="button small"
           onClick={() => {
             setOpen(false);
-            setMsg(null);
           }}
         >
           Fechar
@@ -111,7 +110,6 @@ export function AddSound({ slug, onAdd }: { slug: string; onAdd: (name: string |
         dá play e pega a primeira faixa que o vídeo ainda não tem. Ou cole direto o MP3 do player
         (audiocdn…/lqmp3/….mp3). O arquivo vai para o sfx/ deste vídeo, com a origem registrada.
       </p>
-      {msg && <p className={`response ${msg.ok ? "ok" : "error"}`}>{msg.text}</p>}
     </div>
   );
 }

package/studio/web/pages/VideoPage/components/SoundTimeline/BedRow.tsx

@@ -3,11 +3,12 @@
 
 import { defaultBedName } from "../../../../lib/sound-timeline";
 import type { TimelineGeometry } from "./timelineGeometry";
+import { UploadTrack } from "./UploadTrack";
 import type { SoundTimelineState } from "./useSoundTimeline";
 import type { SoundData } from "./types";
 
 export function BedRow({ st, geo, data }: { st: SoundTimelineState; geo: TimelineGeometry; data: SoundData }) {
-  const { plan, sel, setSel, dropTarget, changeDraft } = st;
+  const { plan, sel, setSel, dropTarget, changeDraft, reloadCatalog } = st;
   const { x } = geo;
   return (
     <div
@@ -25,20 +26,35 @@ export function BedRow({ st, geo, data }: { st: SoundTimelineState; geo: Timelin
           </span>
         </div>
       ) : (
-        <button
-          className="mini-button sound-no-bed"
-          onClick={() => {
-            const name = defaultBedName(data.catalog);
-            if (name) {
+        <div className="sound-no-bed">
+          <button
+            className="mini-button"
+            onClick={() => {
+              const name = defaultBedName(data.catalog);
+              if (name) {
+                changeDraft(r => {
+                  r.bed = { name };
+                });
+                setSel("bed");
+              }
+            }}
+          >
+            + música de fundo
+          </button>
+          {/* the user's own file: it joins this video's sounds and becomes the background music */}
+          <UploadTrack
+            slug={st.slug}
+            className="mini-button"
+            label="Enviar música"
+            onUploaded={name => {
+              reloadCatalog(null);
               changeDraft(r => {
                 r.bed = { name };
               });
               setSel("bed");
-            }
-          }}
-        >
-          + música de fundo
-        </button>
+            }}
+          />
+        </div>
       )}
     </div>
   );

package/studio/web/pages/VideoPage/components/SoundTimeline/CaptionSaveBar.tsx

@@ -1,32 +1,36 @@
 /* Floats at the bottom right of the Legenda box (it sticks as the box scrolls) once the caption has an unsaved change: Salvar legenda saves the
    position and renders the export again; Descartar goes back to what is saved. */
 
+import { useEffect } from "react";
 import { ArrowCounterClockwise, FloppyDisk } from "../../../../components/icons";
 import { clone } from "../../../../lib/caption-position";
+import { toastResult } from "../../../../lib/toast";
 import type { CaptionEditor } from "../CaptionPositionEditor/captionEditor";
 
 export function CaptionSaveBar({ editor, busy }: { editor: CaptionEditor | null; busy: boolean }) {
+  const message = editor?.message;
+  /* a failed save is a toast: the bar itself only exists while there is an edit to save or discard */
+  useEffect(() => {
+    if (message && !message.ok) toastResult({ ok: false, error: message.text }, undefined, { always: true });
+  }, [message]);
   if (!editor) return null;
-  const { changed, saving, save, setDraft, data, message } = editor;
-  if (!changed && !(message && !message.ok)) return null;
+  const { changed, saving, save, setDraft, data } = editor;
+  if (!changed) return null;
   return (
     <div className="caption-save-bar" role="region" aria-label="Salvar legenda">
-      {message && !message.ok && <p className="response error">{message.text}</p>}
-      {changed && (
-        <div className="actions">
-          <button className="button" disabled={saving} onClick={() => setDraft(clone(data.position))}>
-            <ArrowCounterClockwise className="ic" /> Descartar
-          </button>
-          <button
-            className="button primary"
-            disabled={saving || busy}
-            onClick={save}
-            title="Salva a posição e o estilo e renderiza o export de novo"
-          >
-            <FloppyDisk className="ic" /> {saving ? "Salvando…" : "Salvar legenda"}
-          </button>
-        </div>
-      )}
+      <div className="actions">
+        <button className="button" disabled={saving} onClick={() => setDraft(clone(data.position))}>
+          <ArrowCounterClockwise className="ic" /> Descartar
+        </button>
+        <button
+          className="button primary"
+          disabled={saving || busy}
+          onClick={save}
+          title="Salva a posição e o estilo e renderiza o export de novo"
+        >
+          <FloppyDisk className="ic" /> {saving ? "Salvando…" : "Salvar legenda"}
+        </button>
+      </div>
     </div>
   );
 }

package/studio/web/pages/VideoPage/components/SoundTimeline/TimelineFooter.tsx

@@ -1,5 +1,6 @@
-/* Under the timeline: the save status (autosave 5 s after the last edit) and the last action's response. */
+/* Under the timeline: the save status (autosave 5 s after the last edit) and the last action's response, which is a toast. */
 
+import { ResultMessage } from "../../../../components/ResultMessage";
 import type { SoundTimelineState } from "./useSoundTimeline";
 
 export function TimelineFooter({ st }: { st: SoundTimelineState }) {
@@ -18,9 +19,7 @@ export function TimelineFooter({ st }: { st: SoundTimelineState }) {
                 : "Tudo salvo"}
         {!dirty && !saving && pending && !rendering && " · o export ainda não tem esse som"}
       </span>
-      {response && (
-        <p className={`response ${response.ok ? "ok" : "error"}`}>{response.ok ? response.output : response.error}</p>
-      )}
+      <ResultMessage result={response} />
     </div>
   );
 }

package/studio/web/pages/VideoPage/components/SoundTimeline/UploadTrack.tsx

@@ -0,0 +1,59 @@
+/* "Enviar música": the user's own audio file becomes an MP3 in the video's sfx/ (sound.mjs import). The
+   button opens the file picker and reports the name the track got in a toast; what to do with it (arm it in the
+   library, make it the background music) is up to the caller. */
+
+import { useRef, useState } from "react";
+import { Plus } from "../../../../components/icons";
+import { toast } from "../../../../lib/toast";
+import { uploadTrackFile } from "../../../../lib/upload";
+
+export function UploadTrack({
+  slug,
+  onUploaded,
+  label = "Enviar música",
+  className = "button small",
+}: {
+  slug: string;
+  onUploaded: (name: string) => void;
+  label?: string;
+  className?: string;
+}) {
+  const input = useRef<HTMLInputElement>(null);
+  const [pct, setPct] = useState<number | null>(null);
+  const pick = async (file: File | undefined) => {
+    if (!file) return;
+    setPct(0);
+    const r = await uploadTrackFile(slug, file, setPct);
+    setPct(null);
+    const name = r.output?.split(" ←")[0];
+    if (!r.ok || !name) {
+      toast.error("Não consegui enviar o arquivo", { body: r.error });
+      return;
+    }
+    toast.success("Áudio enviado", { body: name });
+    onUploaded(name);
+  };
+  return (
+    <>
+      <button
+        type="button"
+        className={className}
+        disabled={pct != null}
+        onClick={() => input.current?.click()}
+        title="Enviar um arquivo de áudio seu (mp3, wav, m4a…) para este vídeo"
+      >
+        <Plus className="ic" /> {pct == null ? label : pct < 100 ? `Enviando… ${pct}%` : "Convertendo…"}
+      </button>
+      <input
+        ref={input}
+        type="file"
+        accept="audio/*,.mp3,.wav,.m4a,.aac,.flac,.ogg,.opus,.aif,.aiff"
+        hidden
+        onChange={e => {
+          void pick(e.target.files?.[0]);
+          e.target.value = "";
+        }}
+      />
+    </>
+  );
+}

package/studio/web/pages/VideoPage/components/SoundTimeline/useSoundTimeline.ts

@@ -478,6 +478,7 @@ export function useSoundTimeline(video: VideoDetail) {
     sceneVideos,
     seekPictureRef,
     reloadCatalog,
+    slug,
     stop,
     play,
     seek,

package/studio/web/pages/VideoPage/components/VoicePauseBanner.tsx

@@ -6,6 +6,7 @@ import { useVoiceRunning } from "../../../hooks/useVoiceRunning";
 import { api, enc, send, type ActionResult } from "../../../lib/api";
 import { TOOL_LABEL } from "../../../lib/format";
 import { ArrowRight } from "../../../components/icons";
+import { toastResult } from "../../../lib/toast";
 import type { VideoDetail } from "../../../types/api";
 
 export function VoicePauseBanner({ video }: { video: VideoDetail }) {
@@ -32,8 +33,10 @@ export function VoicePauseBanner({ video }: { video: VideoDetail }) {
   ];
   const proceed = async () => {
     setSending(true);
-    setResponse(await send(api.videos[":slug"].voice.proceed.$post({ param: { slug: enc(video.slug) }, json: {} })));
+    const r = await send(api.videos[":slug"].voice.proceed.$post({ param: { slug: enc(video.slug) }, json: {} }));
+    setResponse(r);
     setSending(false);
+    toastResult(r, undefined, { always: true });
   };
   return (
     <div className="voices-notice">
@@ -45,11 +48,6 @@ export function VoicePauseBanner({ video }: { video: VideoDetail }) {
         <button className="button primary small" onClick={proceed} disabled={sending || !!running || !!response?.ok}>
           <ArrowRight className="ic" /> {running ? "Esperando a voz terminar…" : "Seguir com estas vozes"}
         </button>
-        {response && (
-          <span className={`response ${response.ok ? "ok" : "error"}`}>
-            {response.ok ? response.output : response.error}
-          </span>
-        )}
       </div>
     </div>
   );

package/studio/web/pages/VideoPage/index.tsx

@@ -236,6 +236,10 @@ export function VideoPage({ slug, stageParam }: { slug: string; stageParam: stri
           runs={video.runs}
           selected={stage.id}
           onSelect={choose}
+          onProcess={id => {
+            choose(id);
+            setPanel(true);
+          }}
           stages={pipeline === "video" ? videoStages : PIPELINES[pipeline]}
         />
       </nav>

package/studio/web/pages/VideosPage/components/VideoRow.tsx

@@ -4,6 +4,7 @@ import { api, enc, send } from "../../../lib/api";
 import { formatSeconds, timeAgo } from "../../../lib/format";
 import { aspectRatio, mediaUrl } from "../../../lib/media";
 import { SESSION_STATE } from "../../../lib/sessions";
+import { toast } from "../../../lib/toast";
 import { activeSchedule, livePlatforms, carouselLive, contentReady } from "../../../lib/video-tabs";
 import { PIPELINES, PIPELINE_NAME, videoStagesFor } from "../../../lib/stages";
 import { useSessionFor } from "../../../hooks/useSessions";
@@ -26,7 +27,6 @@ export function VideoRow({ video, queue }: { video: VideoSummary; queue: Queue |
   const hasCarousel = video.deliverables.includes("carousel");
   const warnings = [...(hasVideo ? (st?.warnings ?? []) : []), ...(video.carousel?.warnings ?? [])];
   const [busy, setBusy] = useState(false);
-  const [archiveError, setArchiveError] = useState<string | null>(null);
   /* the scheduler publishes with the studio closed, and a running task doesn't vanish midway: the server refuses too */
   const blocked = video.archived
     ? null
@@ -37,11 +37,10 @@ export function VideoRow({ video, queue }: { video: VideoSummary; queue: Queue |
         : null;
   const toggleArchive = async () => {
     setBusy(true);
-    setArchiveError(null);
     const r = await send(
       api.videos[":slug"].archive.$post({ param: { slug: enc(video.slug) }, json: { archive: !video.archived } }),
     );
-    if (!r.ok) setArchiveError(r.error ?? "Não deu para arquivar");
+    if (!r.ok) toast.error("Não deu para arquivar", { body: r.error });
     setBusy(false);
   };
   const needsAttention = video.scenes_approval?.status === "pending" || video.script_approval?.status === "pending";
@@ -88,7 +87,6 @@ export function VideoRow({ video, queue }: { video: VideoSummary; queue: Queue |
             {video.archived ? "Desarquivar" : "Arquivar"}
           </button>
         </div>
-        {archiveError && <p className="response error">{archiveError}</p>}
         <PublishedOn video={video} />
         {hasVideo && st && !live && (
           <div className="vr-pipeline">

package/studio/web/router.tsx

@@ -21,6 +21,7 @@ import { SchedulePage } from "./pages/SchedulePage";
 import { OmnichatPage, OmnichatRulePage } from "./pages/OmnichatPage";
 import { GettingStartedPage } from "./pages/GettingStartedPage";
 import { NotFoundPage } from "./pages/NotFoundPage";
+import { BenchoPage } from "./pages/BenchoPage";
 
 export const rootRoute = createRootRoute({
   component: AppShell,
@@ -168,6 +169,12 @@ export const gettingStartedRoute = createRoute({
   path: "/getting-started",
   component: () => <GettingStartedPage />,
 });
+/* the Bencho ports, side by side; not in the menu */
+export const benchoRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/bencho",
+  component: () => <BenchoPage />,
+});
 
 export const routeTree = rootRoute.addChildren([
   indexRoute,
@@ -188,6 +195,7 @@ export const routeTree = rootRoute.addChildren([
   omnichatRoute,
   omnichatRuleRoute,
   gettingStartedRoute,
+  benchoRoute,
 ]);
 
 export const router = createRouter({ routeTree, defaultPreload: false, scrollRestoration: false });