@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/components/Sidebar.tsx

@@ -0,0 +1,289 @@
+/* The menu in sections: the Dashboard alone on top (it is the home page, /), Criação and
+   Gerenciamento below, then Configurações in a section of its own, with no title. Each item: a duotone
+   icon, like the ElevenLabs sidebar. The queue has no item: it lives in the "Agente, fila e serviços"
+   panel and opens at /queue from its link.
+   At the bottom sits Omni's card (the avatar and "Falar com Omni"), with Primeiros passos above it only
+   while setup is missing: it opens the agent's panel (components/Omni).
+   Active state: useMatchRoute over each item's routes. */
+
+import type { ReactNode } from "react";
+import { Link, useMatchRoute, useNavigate } from "@tanstack/react-router";
+import { useAdmin } from "../hooks/useAdmin";
+import { useRunner } from "../hooks/useRunner";
+import { omniLevel, toggleOmniPanel, useOmniPanel } from "../lib/omni-panel";
+import { OmniGlow } from "./Omni/OmniGlow";
+import { OMNI_AVATAR } from "./Omni/OmniWidget";
+import { AvatarGroupIcon } from "./AvatarGroupIcon";
+import { BrandLogo } from "./BrandLogo";
+import { VoiceAvatar } from "./VoiceAvatar";
+import {
+  CalendarBlank,
+  ChatsCircle,
+  Dashboard,
+  Gear,
+  ArrowExpand,
+  Minus,
+  Plug,
+  Plus,
+  Power,
+  ShieldCheck,
+  SidebarLeft,
+  Sparkle,
+  Stack,
+  VideoCamera,
+} from "./icons";
+
+export { MENU_STORAGE_KEY } from "../hooks/useMenuCollapsed";
+
+const GLOW_LABEL: Partial<Record<string, string>> = {
+  listening: "Ouvindo…",
+  thinking: "Pensando…",
+  speaking: "Falando…",
+};
+
+type Match = { to: string; fuzzy?: boolean };
+export type NavItem = {
+  id: string;
+  to: "/" | "/videos" | "/styles" | "/voice" | "/schedule" | "/omnichat" | "/settings" | "/admin" | "/getting-started";
+  name: string;
+  Icon: (p: { "aria-hidden"?: boolean | "true" | "false" }) => ReactNode;
+  /* the routes where the item shows as active */
+  match: Match[];
+};
+
+export const NAV_GROUPS: { name: string; items: NavItem[] }[] = [
+  {
+    name: "Criação",
+    items: [
+      {
+        id: "videos",
+        to: "/videos",
+        name: "Conteúdos",
+        Icon: VideoCamera,
+        match: [{ to: "/videos", fuzzy: true }, { to: "/new" }],
+      },
+      {
+        id: "references",
+        to: "/styles",
+        name: "Estilos visuais",
+        Icon: Stack,
+        match: [{ to: "/styles", fuzzy: true }],
+      },
+      { id: "voice", to: "/voice", name: "Perfil de voz", Icon: AvatarGroupIcon, match: [{ to: "/voice" }] },
+    ],
+  },
+  {
+    name: "Gerenciamento",
+    items: [
+      {
+        id: "schedule",
+        to: "/schedule",
+        name: "Agenda",
+        Icon: CalendarBlank,
+        match: [{ to: "/schedule", fuzzy: true }],
+      },
+      {
+        id: "omnichat",
+        to: "/omnichat",
+        name: "Omnichat",
+        Icon: ChatsCircle,
+        match: [{ to: "/omnichat", fuzzy: true }],
+      },
+    ],
+  },
+];
+export const DASHBOARD_NAV: NavItem = {
+  id: "dashboard",
+  to: "/",
+  name: "Dashboard",
+  Icon: Dashboard,
+  match: [{ to: "/" }, { to: "/analytics", fuzzy: true }],
+};
+export const SETTINGS_NAV: NavItem = {
+  id: "settings",
+  to: "/settings",
+  name: "Configurações",
+  Icon: Gear,
+  match: [{ to: "/settings", fuzzy: true }, { to: "/usage" }],
+};
+/* only for the admin (hooks/useAdmin): settings for every user */
+const ADMIN_NAV: NavItem = {
+  id: "admin",
+  to: "/admin",
+  name: "Admin",
+  Icon: ShieldCheck,
+  match: [{ to: "/admin" }],
+};
+const GETTING_STARTED_NAV: NavItem = {
+  id: "getting-started",
+  to: "/getting-started",
+  name: "Primeiros passos",
+  Icon: Sparkle,
+  match: [{ to: "/getting-started" }],
+};
+
+function useIsActive() {
+  const matchRoute = useMatchRoute();
+  return (item: NavItem) => item.match.some(m => !!matchRoute({ to: m.to as any, fuzzy: m.fuzzy ?? false }));
+}
+
+function NavLink({
+  item,
+  collapsed,
+  active,
+  children,
+}: {
+  item: NavItem;
+  collapsed: boolean;
+  active: boolean;
+  children?: ReactNode;
+}) {
+  return (
+    <Link
+      to={item.to}
+      className={active ? "active" : ""}
+      aria-current={active ? "page" : undefined}
+      title={collapsed ? item.name : undefined}
+    >
+      <item.Icon aria-hidden="true" />
+      <span className="menu-label">{item.name}</span>
+      {children}
+    </Link>
+  );
+}
+
+/* `missing`: the required setup steps still missing (Primeiros passos shows while there are any) */
+export function Sidebar({
+  collapsed,
+  onToggle,
+  missing,
+  showGettingStarted,
+}: {
+  collapsed: boolean;
+  onToggle: () => void;
+  missing: string[] | null;
+  showGettingStarted: boolean;
+}) {
+  const isActive = useIsActive();
+  const navigate = useNavigate();
+  const { hosted } = useRunner();
+  const { isAdmin } = useAdmin();
+  const omni = useOmniPanel();
+  return (
+    <aside className="menu">
+      <div className="menu-top">
+        <Link to="/" className="brand" title="Omni">
+          <BrandLogo />
+        </Link>
+        <button
+          type="button"
+          className="menu-collapse"
+          onClick={onToggle}
+          aria-expanded={!collapsed}
+          title={`${collapsed ? "Expandir" : "Recolher"} o menu (Ctrl/Cmd + B)`}
+          aria-label={collapsed ? "Expandir o menu" : "Recolher o menu"}
+        >
+          <SidebarLeft aria-hidden="true" />
+        </button>
+      </div>
+      <nav className="menu-group" aria-label={DASHBOARD_NAV.name}>
+        <NavLink item={DASHBOARD_NAV} collapsed={collapsed} active={isActive(DASHBOARD_NAV)} />
+      </nav>
+      {NAV_GROUPS.map(g => (
+        <nav key={g.name} className="menu-group" aria-label={g.name}>
+          <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 */
+              <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>
+              </div>
+            ) : (
+              <NavLink key={item.id} item={item} collapsed={collapsed} active={isActive(item)} />
+            ),
+          )}
+        </nav>
+      ))}
+      {/* Configurações: a section of its own, with no title */}
+      <nav className="menu-group" aria-label={SETTINGS_NAV.name}>
+        <NavLink item={SETTINGS_NAV} collapsed={collapsed} active={isActive(SETTINGS_NAV)} />
+      </nav>
+      <div className="menu-footer">
+        {showGettingStarted && (
+          <nav aria-label={GETTING_STARTED_NAV.name}>
+            <NavLink item={GETTING_STARTED_NAV} collapsed={collapsed} active={isActive(GETTING_STARTED_NAV)}>
+              {!!missing?.length && (
+                <span className="tab-count" title={missing.join(", ")}>
+                  {missing.length}
+                </span>
+              )}
+            </NavLink>
+          </nav>
+        )}
+        {omni.available && (
+          <OmniGlow
+            state={collapsed ? "off" : omni.glow}
+            face={omni.face ?? OMNI_AVATAR}
+            level={omniLevel}
+            radius={16}
+            compact
+            className="menu-omni-glow"
+          >
+            <button
+              type="button"
+              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}
+            >
+              <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>
+            </button>
+          </OmniGlow>
+        )}
+        {isAdmin && (
+          <nav aria-label={ADMIN_NAV.name}>
+            <NavLink item={ADMIN_NAV} collapsed={collapsed} active={isActive(ADMIN_NAV)} />
+          </nav>
+        )}
+        {/* the hosted studio's own pages (the Worker renders them, not this app): the paired Macs and the log of
+            actions, and signing out */}
+        {hosted && (
+          <nav aria-label="Conta">
+            <a href="/runner" title={collapsed ? "Macs e ações" : undefined}>
+              <Plug aria-hidden="true" />
+              <span className="menu-label">Macs e ações</span>
+            </a>
+            <a href="/exit" title={collapsed ? "Sair" : undefined}>
+              <Power aria-hidden="true" />
+              <span className="menu-label">Sair</span>
+            </a>
+          </nav>
+        )}
+      </div>
+    </aside>
+  );
+}

package/studio/web/components/StageStepper.tsx

@@ -0,0 +1,87 @@
+/* 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. */
+
+import { Link } from "@tanstack/react-router";
+import { useNow } from "../hooks/useNow";
+import {
+  STAGES,
+  getStageState,
+  stageStateDetail,
+  type StageDef,
+  type StageInput,
+  type StageState,
+} from "../lib/stages";
+import type { Queue, Ticket } from "../types/api";
+import { ArrowClockwise, Check, X } from "./icons";
+
+function stepMark(s: StageState, stage: StageDef) {
+  switch (s.kind) {
+    case "done":
+      return <Check weight="bold" />;
+    case "error":
+      return <X weight="bold" />;
+    case "user":
+      return "!";
+    case "redoing":
+      return <ArrowClockwise weight="bold" />;
+    case "na":
+      return "–";
+    case "running":
+      return <span className="spinning" />;
+    default:
+      return stage.num;
+  }
+}
+
+/* `stages`: the pipeline shown (the video's by default; the carousel's in PIPELINES) */
+export function StageStepper({
+  video,
+  queue,
+  runs,
+  selected,
+  onSelect,
+  compact = false,
+  stages = STAGES,
+}: {
+  video: StageInput & { slug: string };
+  stages?: StageDef[];
+  queue: Queue | null;
+  runs?: Ticket[];
+  selected?: string;
+  onSelect?: (id: string) => void;
+  compact?: boolean;
+}) {
+  const now = useNow();
+  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>
+  );
+}

package/studio/web/components/StudioOffline.tsx

@@ -0,0 +1,80 @@
+/* The hosted studio while the studio isn't connected to it (the Mac that runs it is off, asleep or
+   offline). A screen of its own, like the 404, over the whole app: nothing behind it can act, so the page
+   says what happened, what to do on the Mac to resume (lib/studio-offline.ts, from what the hub knows: a
+   refused key, an old version, a disconnect on purpose), and checks again by itself every few seconds.
+   When the studio answers, the screen goes away and the app underneath (kept mounted, with its state)
+   rereads everything. Not shown at 127.0.0.1 (the page's own server is the studio). */
+
+import { useEffect } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useRunner } from "../hooks/useRunner";
+import { queryKeys } from "../lib/query-client";
+import { offlineAdvice } from "../lib/studio-offline";
+import { ArrowClockwise, Plug, Power } from "./icons";
+
+const CHECK_MS = 5000;
+
+export function StudioOffline() {
+  const { online, name, lastSeen, problem, checking, check } = useRunner();
+  const qc = useQueryClient();
+  const offline = online === false;
+
+  /* not connected: ask again until it answers; back: everything on screen is stale */
+  useEffect(() => {
+    if (!offline) return;
+    const id = setInterval(() => void qc.invalidateQueries({ queryKey: queryKeys.runner }), CHECK_MS);
+    return () => {
+      clearInterval(id);
+      void qc.invalidateQueries();
+    };
+  }, [offline, qc]);
+
+  useEffect(() => {
+    if (!offline) return;
+    const before = document.title;
+    document.title = "Studio sem conexão · Omni";
+    return () => {
+      document.title = before;
+    };
+  }, [offline]);
+
+  if (!offline) return null;
+  const advice = offlineAdvice({ name, lastSeen, problem });
+  return (
+    <div className="studio-offline" role="alert">
+      <div className="studio-offline-body">
+        <span className="studio-offline-icon" aria-hidden="true">
+          <Plug />
+        </span>
+        <h1>{advice.title}</h1>
+        <p className="studio-offline-text">{advice.text}</p>
+        <ol className="studio-offline-steps">
+          {advice.steps.map(st => (
+            <li key={st.text}>
+              {st.text}
+              {st.code && (
+                <>
+                  {" "}
+                  <code>{st.code}</code>
+                </>
+              )}
+            </li>
+          ))}
+        </ol>
+        <div className="actions studio-offline-actions">
+          <button type="button" className="button primary" onClick={check} disabled={checking}>
+            <ArrowClockwise className={`ic${checking ? " spin" : ""}`} aria-hidden="true" />{" "}
+            {checking ? "Verificando…" : "Tentar de novo"}
+          </button>
+          <a href="/runner" className="button">
+            <Plug className="ic" aria-hidden="true" /> Macs e ações
+          </a>
+          <a href="/exit" className="button">
+            <Power className="ic" aria-hidden="true" /> Sair
+          </a>
+        </div>
+        <p className="studio-offline-hint">Verifico sozinho a cada 5 segundos e volto para onde você estava.</p>
+      </div>
+    </div>
+  );
+}

package/studio/web/components/TaskName.tsx

@@ -0,0 +1,17 @@
+import { Link } from "@tanstack/react-router";
+import { TOOL_LABEL } from "../lib/format";
+import type { Ticket } from "../types/api";
+
+/* the tool name and, when the ticket has one, the video link */
+export function TaskName({ ticket }: { ticket: Ticket }) {
+  return (
+    <>
+      <strong>{TOOL_LABEL[ticket.tool] ?? ticket.tool}</strong>
+      {ticket.video && (
+        <Link to="/videos/$slug" params={{ slug: ticket.video }} className="task-video">
+          {ticket.video}
+        </Link>
+      )}
+    </>
+  );
+}

package/studio/web/components/TopBanners.tsx

@@ -0,0 +1,30 @@
+/* The banners fixed on top of the whole app, on any screen: what broke
+   and what waits for a decision. Their joint height goes to --banner, which shrinks the app (styles/). */
+
+import { useEffect, useRef } from "react";
+import { ErrorBanner } from "./ErrorBanner";
+import { HumanBanner } from "./HumanBanner";
+
+export function TopBanners() {
+  const root = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = root.current!,
+      doc = document.documentElement;
+    const measure = () => doc.style.setProperty("--banner", `${el.getBoundingClientRect().height}px`);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => {
+      ro.disconnect();
+      doc.style.setProperty("--banner", "0px");
+    };
+  }, []);
+
+  return (
+    <div ref={root} className="top-banners">
+      <ErrorBanner />
+      <HumanBanner />
+    </div>
+  );
+}