@crievo/omni 0.1.6 → 0.1.8

package/studio/web/pages/SettingsPage/components/AgentCategory.tsx

@@ -1,20 +1,29 @@
-/* Configurações → Agente de IA: the agent accounts (Claude and Codex), Codex's options and the model per stage */
+/* Configurações → Agente de IA: the agent accounts (Claude and Codex), Codex's options and the model per stage and,
+   in the hosted studio, the computers signed in and the actions that went through to them (ComputersPanel) */
 
 import type { Settings } from "../../../types/api";
 import { Panel } from "../../../components/ui/panel";
 import { AgentAccounts, CodexSettings } from "./AgentAccounts";
+import { useRunner } from "../../../hooks/useRunner";
+import { ComputersPanel } from "./ComputersPanel";
 import { ModelsSettings } from "./ModelsSettings";
 
-export function AgentCategory({ settings, reload }: { settings: Settings; reload: () => void }) {
+export function AgentCategory({ settings, reload }: { settings: Settings | null; reload: () => void }) {
+  const { hosted } = useRunner();
   return (
     <>
-      <Panel title="Contas de agente">
-        <AgentAccounts agents={settings.agents} onSave={reload} />
-        <CodexSettings codex={settings.agents.codex} onSave={reload} />
-      </Panel>
-      <Panel title="Modelos do Claude">
-        <ModelsSettings models={settings.models} onSave={reload} />
-      </Panel>
+      {settings && (
+        <>
+          <Panel title="Contas de agente">
+            <AgentAccounts agents={settings.agents} onSave={reload} />
+            <CodexSettings codex={settings.agents.codex} onSave={reload} />
+          </Panel>
+          <Panel title="Modelos do Claude">
+            <ModelsSettings models={settings.models} onSave={reload} />
+          </Panel>
+        </>
+      )}
+      {hosted && <ComputersPanel />}
     </>
   );
 }

package/studio/web/pages/SettingsPage/components/AgentCostPanel.tsx

@@ -0,0 +1,253 @@
+/* What the agents spent (Configurações → Uso e custo): the Claude sessions' cost by video, stage
+   and model. The accounting is tools/lib/cost.mjs (terminal: tools/cost.mjs). */
+
+import { useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { useCost } from "../../../hooks/useCost";
+import type { AgentCost } from "../../../types/api";
+import { Panel } from "../../../components/ui/panel";
+import { Skeleton } from "../../../components/ui/skeleton";
+
+const STAGE_LABEL: Record<string, string> = {
+  orchestrator: "Orquestrador",
+  "av-script": "Roteiro",
+  "av-motion": "Motion (roteiro e base)",
+  compose: "Composição (um fork por cena)",
+  wireframe: "Wireframes (um fork por cena)",
+  "av-narration": "Narração",
+  "av-voice": "Voz",
+  "av-render": "Render",
+  "av-captions": "Legendas",
+  "av-assemble": "Montagem",
+  "av-editor": "Editor",
+  "av-reference": "Estilo visual",
+  "av-thumbnail": "Thumbnail",
+  "av-preview": "Prévia (aposentada)",
+  other: "Outros",
+};
+const KIND_LABEL: Record<string, string> = {
+  video: "Vídeos",
+  edit: "Editor",
+  reference: "Estilos visuais",
+  analysis: "Análise",
+  omni: "Omni",
+};
+const PERIODS: { days: number | null; label: string }[] = [
+  { days: 7, label: "7 dias" },
+  { days: 30, label: "30 dias" },
+  { days: null, label: "Tudo" },
+];
+
+const usd = (v: number) => `US$ ${v.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+const pct = (v: number, total: number) => (total > 0 ? `${Math.round((v / total) * 100)}%` : "—");
+const sorted = (o: Record<string, number>) => Object.entries(o).sort((a, b) => b[1] - a[1]);
+const dayLabel = (d: string) =>
+  new Date(`${d}T12:00:00`).toLocaleDateString("pt-BR", { day: "2-digit", month: "2-digit" });
+
+/* one row per entry: the name, a bar relative to the largest, the value and its share */
+function Bars({ entries, total, label }: { entries: [string, number][]; total: number; label: (k: string) => string }) {
+  const max = Math.max(...entries.map(e => e[1]), 0);
+  return (
+    <ul className="cost-rows">
+      {entries.map(([k, v]) => (
+        <li key={k}>
+          <span className="cost-name">{label(k)}</span>
+          <div className="bar">
+            <div style={{ width: `${max ? Math.max((v / max) * 100, v ? 1 : 0) : 0}%` }} />
+          </div>
+          <span className="cost-value">{usd(v)}</span>
+          <span className="subtle cost-pct">{pct(v, total)}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Summary({ c }: { c: AgentCost }) {
+  const videos = c.by_video.filter(v => v.type === "video" || v.type === "edit");
+  const perVideo = videos.length ? videos.reduce((a, v) => a + v.total, 0) / videos.length : 0;
+  const today = c.by_day.at(-1);
+  return (
+    <>
+      <p className="usage-number">
+        {usd(c.total)}
+        <small>
+          em {c.turns} turnos de {c.sessions} sessões
+          {videos.length > 0 && ` · média de ${usd(perVideo)} por vídeo`}
+          {today && ` · último dia (${dayLabel(today.day)}): ${usd(today.cost)}`}
+        </small>
+      </p>
+      {(c.partial > 0 || c.unmeasured > 0) && (
+        <ul className="usage-notices">
+          {c.partial > 0 && (
+            <li>
+              <span className="point warning" />
+              {c.partial} turno{c.partial === 1 ? "" : "s"} em andamento ou interrompido{c.partial === 1 ? "" : "s"}: o
+              valor é estimado até a próxima resposta fechar a conta.
+            </li>
+          )}
+          {c.unmeasured > 0 && (
+            <li>
+              <span className="point warning" />
+              {c.unmeasured} turno{c.unmeasured === 1 ? "" : "s"} do Codex fora da conta: ele só informa tokens, não
+              dólares.
+            </li>
+          )}
+        </ul>
+      )}
+    </>
+  );
+}
+
+export function AgentCostPanel() {
+  const [days, setDays] = useState<number | null>(7);
+  const { cost, error } = useCost(days);
+  const videos = cost?.by_video.slice(0, 12) ?? [];
+  const topStage = (stages: Record<string, number>) => sorted(stages)[0];
+
+  return (
+    <>
+      <h2 className="usage-section">Agentes (Claude)</h2>
+      <Panel
+        title="O que a geração gastou"
+        extra={
+          <div className="segmented small" role="radiogroup" aria-label="Período">
+            {PERIODS.map(p => (
+              <button
+                key={p.label}
+                type="button"
+                role="radio"
+                aria-checked={days === p.days}
+                className={days === p.days ? "active" : ""}
+                onClick={() => setDays(p.days)}
+              >
+                {p.label}
+              </button>
+            ))}
+          </div>
+        }
+        className="usage-card"
+      >
+        {error && <p className="response error">{error}</p>}
+        {!cost && !error && (
+          <div aria-busy="true">
+            <Skeleton className="row" style={{ width: "40%", height: 30 }} />
+            <Skeleton className="row" style={{ width: "100%", marginTop: 14 }} />
+            <Skeleton className="row" style={{ width: "85%", marginTop: 8 }} />
+          </div>
+        )}
+        {cost && cost.turns === 0 && <p className="empty">Nenhum turno de agente neste período.</p>}
+        {cost && cost.turns > 0 && (
+          <>
+            <Summary c={cost} />
+            <p className="note">
+              Valor de tabela da API, o mesmo que o Claude Code reporta, também numa assinatura. Cada sessão retomada
+              acumula o total; aqui cada turno conta só o que gastou. A divisão por etapa e fork é proporcional às
+              mensagens, calibrada pelo total de cada modelo. No terminal: <code>node tools/cost.mjs</code>.
+            </p>
+          </>
+        )}
+      </Panel>
+
+      {cost && cost.turns > 0 && (
+        <>
+          <div className="usage-grid">
+            <Panel title="Por etapa" className="usage-card">
+              <Bars
+                entries={sorted(cost.by_stage).filter(e => e[1] >= 0.005)}
+                total={cost.total}
+                label={k => STAGE_LABEL[k] ?? k}
+              />
+            </Panel>
+            <Panel title="Por modelo" className="usage-card">
+              <Bars entries={sorted(cost.by_model).filter(e => e[1] >= 0.005)} total={cost.total} label={k => k} />
+              <h3 className="cost-sub">Por tipo de sessão</h3>
+              <Bars entries={sorted(cost.by_kind)} total={cost.total} label={k => KIND_LABEL[k] ?? k} />
+            </Panel>
+            <Panel title="Por dia" className="usage-card">
+              <Bars
+                entries={cost.by_day
+                  .slice(-14)
+                  .reverse()
+                  .map(d => [dayLabel(d.day), d.cost])}
+                total={cost.total}
+                label={k => k}
+              />
+            </Panel>
+          </div>
+
+          <Panel title="Por vídeo">
+            <table className="table">
+              <thead>
+                <tr>
+                  <th>Vídeo</th>
+                  <th>Total</th>
+                  <th>Turnos</th>
+                  <th>Mais caro</th>
+                </tr>
+              </thead>
+              <tbody>
+                {videos.map(v => {
+                  const top = topStage(v.stages);
+                  return (
+                    <tr key={v.video}>
+                      <td>
+                        {v.type === "video" || v.type === "edit" ? (
+                          <Link to="/videos/$slug" params={{ slug: v.video }}>
+                            {v.video}
+                          </Link>
+                        ) : (
+                          <>
+                            {v.video} <span className="subtle">({KIND_LABEL[v.type] ?? v.type})</span>
+                          </>
+                        )}
+                      </td>
+                      <td>
+                        <strong>{usd(v.total)}</strong>
+                      </td>
+                      <td>{v.turns}</td>
+                      <td>
+                        {top ? (
+                          <>
+                            {STAGE_LABEL[top[0]] ?? top[0]} <span className="subtle">{pct(top[1], v.total)}</span>
+                          </>
+                        ) : (
+                          <span className="subtle">—</span>
+                        )}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </Panel>
+
+          <Panel title="Maiores forks">
+            <table className="table">
+              <thead>
+                <tr>
+                  <th>Fork</th>
+                  <th>Vídeo</th>
+                  <th>Custo</th>
+                  <th>Mensagens</th>
+                </tr>
+              </thead>
+              <tbody>
+                {cost.top_forks.slice(0, 8).map(f => (
+                  <tr key={`${f.session}-${f.turn}-${f.label}`}>
+                    <td>{f.label}</td>
+                    <td className="subtle">{f.video}</td>
+                    <td>
+                      <strong>{usd(f.cost)}</strong>
+                    </td>
+                    <td>{f.messages}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </Panel>
+        </>
+      )}
+    </>
+  );
+}

package/studio/web/pages/SettingsPage/components/ComputersPanel.tsx

@@ -0,0 +1,145 @@
+/* Configurações → Agente de IA (hosted studio): the computers signed in to the account, with "Desconectar", and the
+   actions that went through to them. It replaces the Worker's old "Macs e ações" pages: the same information, inside
+   the app. Both come from the Worker itself, so they work while the studio isn't connected. */
+
+import { useState } from "react";
+import { useAudit, useComputers } from "../../../hooks/useComputers";
+import { formatDayTime } from "../../../lib/format";
+import { toast } from "../../../lib/toast";
+import type { Computer } from "../../../types/api";
+import { ArrowClockwise, Plug } from "../../../components/icons";
+import { Badge } from "../../../components/ui/badge";
+import { Panel } from "../../../components/ui/panel";
+import { Skeleton } from "../../../components/ui/skeleton";
+
+function ComputerRow({ c, onRevoke, busy }: { c: Computer; onRevoke: (id: string) => void; busy: boolean }) {
+  const [asking, setAsking] = useState(false);
+  return (
+    <li className="computer">
+      <span className="computer-icon" aria-hidden="true">
+        <Plug />
+      </span>
+      <span className="computer-text">
+        <b>{c.name}</b>
+        <span className="subtle">
+          {c.online
+            ? "conectado agora"
+            : c.last_seen
+              ? `visto por último ${formatDayTime(c.last_seen)}`
+              : "ainda não conectou"}{" "}
+          · entrou em {formatDayTime(c.created_at)}
+          {c.kind === "key" && " · acesso antigo"}
+        </span>
+      </span>
+      {c.online ? <Badge variant="ok">Conectado</Badge> : <Badge>Fora</Badge>}
+      {asking ? (
+        <span className="computer-ask">
+          <button type="button" className="button reject" disabled={busy} onClick={() => onRevoke(c.id)}>
+            Desconectar
+          </button>
+          <button type="button" className="button outlined" onClick={() => setAsking(false)}>
+            Cancelar
+          </button>
+        </span>
+      ) : (
+        <button type="button" className="button outlined" onClick={() => setAsking(true)}>
+          Desconectar
+        </button>
+      )}
+    </li>
+  );
+}
+
+function Computers() {
+  const { email, computers, error, revoke } = useComputers(true);
+  const act = (id: string) =>
+    revoke.mutate(id, {
+      onSuccess: () => toast.success("Computador desconectado", { body: "Ele só volta entrando de novo." }),
+      onError: e => toast.error("Não consegui desconectar", { body: e.message }),
+    });
+  return (
+    <Panel title="Computadores conectados" extra={email && <span className="subtle">{email}</span>}>
+      <p className="subtle computers-intro">
+        Os computadores que entraram na sua conta pelo plugin do Claude Code. Desconectar encerra o acesso na hora; para
+        voltar, o computador entra de novo ao abrir o Claude Code.
+      </p>
+      {error && <p className="response error">{error}</p>}
+      {!computers && !error && (
+        <div aria-busy="true" aria-label="Carregando os computadores">
+          <Skeleton style={{ height: 52, width: "100%" }} />
+        </div>
+      )}
+      {computers && computers.length === 0 && <p className="subtle">Nenhum computador entrou ainda.</p>}
+      {computers && computers.length > 0 && (
+        <ul className="computers">
+          {computers.map(c => (
+            <ComputerRow key={c.id} c={c} onRevoke={act} busy={revoke.isPending} />
+          ))}
+        </ul>
+      )}
+    </Panel>
+  );
+}
+
+const resultOf = (status: number) => (status === 503 ? "sem conexão" : status === 429 ? "limite" : String(status));
+
+function Audit() {
+  const { entries, error, reload, loading } = useAudit(true);
+  return (
+    <Panel
+      title="Ações recentes"
+      extra={
+        <button type="button" className="button outlined" onClick={reload} disabled={loading}>
+          <ArrowClockwise className={`ic${loading ? " spin" : ""}`} aria-hidden="true" /> Atualizar
+        </button>
+      }
+    >
+      <p className="subtle computers-intro">
+        Tudo o que mudou algo e passou por aqui até o seu computador: quem, o quê, quando e como terminou. Só o caminho
+        fica registrado, nunca o conteúdo. Guarda as últimas 2000.
+      </p>
+      {error && <p className="response error">{error}</p>}
+      {!entries && !error && <Skeleton style={{ height: 120, width: "100%" }} />}
+      {entries && entries.length === 0 && <p className="subtle">Nenhuma ação ainda.</p>}
+      {entries && entries.length > 0 && (
+        <div className="audit-scroll">
+          <table className="table audit-table">
+            <thead>
+              <tr>
+                <th>Quando</th>
+                <th>Quem</th>
+                <th>Ação</th>
+                <th>Resultado</th>
+              </tr>
+            </thead>
+            <tbody>
+              {entries.map(e => (
+                <tr key={`${e.at}-${e.method}-${e.path}`}>
+                  <td>{formatDayTime(e.at)}</td>
+                  <td>{e.who}</td>
+                  <td>
+                    <code>
+                      {e.method} {e.path}
+                    </code>
+                  </td>
+                  <td className={e.status < 400 ? "audit-ok" : "audit-bad"}>
+                    {resultOf(e.status)} · {e.ms} ms
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </Panel>
+  );
+}
+
+export function ComputersPanel() {
+  return (
+    <>
+      <Computers />
+      <Audit />
+    </>
+  );
+}

package/studio/web/pages/SettingsPage/components/PublishingCategory/OmnichatSettingsPanel.tsx

@@ -40,8 +40,8 @@ export function OmnichatSettingsPanel({ omnichat: o, onSave }: { omnichat: Setti
     >
       <SettingRow label="Agente" help="Confere os comentários a cada minuto, com o studio aberto ou não">
         <p className="hint">
-          Responde só nas regras ligadas. Não acorda o Mac: dormindo, os comentários esperam e são respondidos quando
-          ele voltar, dentro dos 7 dias que a Meta dá para a DM.
+          Responde só nas regras ligadas. Não acorda a máquina: dormindo, os comentários esperam e são respondidos
+          quando ela voltar, dentro dos 7 dias que a Meta dá para a DM.
         </p>
         {agent?.installed && !agent.node_ok && (
           <p className="hint warning">O node que o agente usa não existe mais: desligue e ligue de novo.</p>

package/studio/web/pages/SettingsPage/components/PublishingCategory/SchedulePanel.tsx

@@ -48,8 +48,8 @@ export function SchedulePanel({ publish: p, accounts, loading, onSave, reloadAcc
     >
       <SettingRow label="Agente" help="Confere a cada minuto, com o studio aberto ou não">
         <p className="hint">
-          Publica na hora o que você agendou na etapa Publicar. Não acorda o Mac: dormindo ou desligado, sobe quando ele
-          voltar, até o atraso máximo abaixo.
+          Publica na hora o que você agendou na etapa Publicar. Não acorda a máquina: dormindo ou desligada, sobe quando
+          ela voltar, até o atraso máximo abaixo.
         </p>
         {agent?.installed && !agent.node_ok && (
           <p className="hint warning">O node que o agente usa não existe mais: desligue e ligue de novo.</p>
@@ -66,7 +66,7 @@ export function SchedulePanel({ publish: p, accounts, loading, onSave, reloadAcc
         </div>
         <ResultMessage result={toggle.result} />
       </SettingRow>
-      <SettingRow label="Atraso máximo" help="Com o Mac fora do ar na hora, até quantas horas depois ainda publica">
+      <SettingRow label="Atraso máximo" help="Com a máquina fora do ar na hora, até quantas horas depois ainda publica">
         <input
           type="number"
           min={0.25}

package/studio/web/pages/SettingsPage/components/UsageCategory.tsx

@@ -1,5 +1,6 @@
-/* Usage of the paid voices: what is left on Fish and Cartesia and what each video spent.
-   Lives in Configurações → Uso das vozes; /usage opens there. */
+/* Usage and cost: what the agents spent (AgentCostPanel) and, below it, the paid voices: what is
+   left on Fish and Cartesia and what each video spent. Lives in Configurações → Uso e custo;
+   /usage opens there. */
 
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import { Link } from "@tanstack/react-router";
@@ -13,6 +14,7 @@ import { ArrowClockwise, ArrowRight } from "../../../components/icons";
 import { Badge } from "../../../components/ui/badge";
 import { Panel } from "../../../components/ui/panel";
 import { Skeleton } from "../../../components/ui/skeleton";
+import { AgentCostPanel } from "./AgentCostPanel";
 
 const num = (v: number | null | undefined, decimals = 0) =>
   v == null ? "—" : v.toLocaleString("pt-BR", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
@@ -257,6 +259,9 @@ export function UsageCategory() {
   const d = usage && !("error" in usage) ? usage : null;
   return (
     <div className="usage-page">
+      <AgentCostPanel />
+
+      <h2 className="usage-section">Vozes</h2>
       <header className="header">
         {d && (
           <span className="subtle">

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

@@ -12,6 +12,7 @@ import { VoiceCategory } from "../../components/VoiceCategory";
 import { SettingsCategorySkeleton } from "../../components/SettingsCategorySkeleton";
 import { VoiceProvidersCategory } from "./components/VoiceProvidersCategory";
 import { UsageCategory } from "./components/UsageCategory";
+import { useRunner } from "../../hooks/useRunner";
 import { AgentCategory } from "./components/AgentCategory";
 import { PlatformsCategory } from "./components/PlatformsCategory";
 import { PublishingCategory } from "./components/PublishingCategory";
@@ -27,12 +28,16 @@ const CATEGORY_ICON: Partial<Record<SettingsCategoryId, ReactNode>> = {
 
 export function SettingsPage({ category }: { category?: string }) {
   const { settings, error, reload } = useSettings();
+  const { hosted } = useRunner();
   const current = SETTINGS_CATEGORIES.find(c => c.id === category) ?? SETTINGS_CATEGORIES[0];
   const inMenu = current.id === "providers" ? "voice" : current.id;
   useEffect(() => {
     document.title = `${current.name} · Configurações · Omni`;
   }, [current.name]);
 
+  /* the computers of the hosted studio come from the Worker: the agent category shows them with no settings loaded */
+  const alone = current.id === "agent" && hosted && !settings;
+
   const content: Record<SettingsCategoryId, (s: Settings) => ReactNode> = {
     voice: s => <VoiceCategory settings={s} reload={reload} />,
     providers: s => <VoiceProvidersCategory settings={s} reload={reload} />,
@@ -68,8 +73,17 @@ export function SettingsPage({ category }: { category?: string }) {
         </nav>
       </aside>
       <div className="settings-content">
-        {error && <p className="response error">{error}</p>}
+        {error && !alone && <p className="response error">{error}</p>}
         {!settings && !error && <SettingsCategorySkeleton />}
+        {alone && (
+          <section className="category" aria-labelledby="category-title">
+            <header className="category-header">
+              <h2 id="category-title">{current.name}</h2>
+              <p>O studio não está conectado agora: as contas e os modelos voltam quando ele conectar.</p>
+            </header>
+            <AgentCategory settings={null} reload={reload} />
+          </section>
+        )}
         {settings && (
           <section className="category" aria-labelledby="category-title">
             <header className="category-header">

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

@@ -324,11 +324,14 @@ export function PublishForm({ video, current }: { video: VideoDetail; current: F
       <CoverPicker video={video} platforms={chosen} />
       {scheduling && (
         <p className="hint">
-          {whenOk ? `Sobe ${formatDayTime(whenMs)}, hora deste Mac.` : "Essa hora já passou: escolha outra na agenda."}{" "}
+          {whenOk
+            ? `Sobe ${formatDayTime(whenMs)}, hora desta máquina.`
+            : "Essa hora já passou: escolha outra na agenda."}{" "}
           <button className="subtle-link" disabled={busy} onClick={pickInSchedule}>
             Trocar dia e hora
           </button>{" "}
-          O agente da agenda confere a cada minuto, com o studio aberto ou não; o Mac precisa estar ligado e acordado.
+          O agente da agenda confere a cada minuto, com o studio aberto ou não; a máquina precisa estar ligada e
+          acordada.
           {scheduled && " Substitui o agendamento de cima."}
         </p>
       )}

package/studio/web/router.tsx

@@ -22,6 +22,7 @@ import { OmnichatPage, OmnichatRulePage } from "./pages/OmnichatPage";
 import { GettingStartedPage } from "./pages/GettingStartedPage";
 import { NotFoundPage } from "./pages/NotFoundPage";
 import { BenchoPage } from "./pages/BenchoPage";
+import { ConnectPreviewPage } from "./pages/ConnectPreviewPage";
 
 export const rootRoute = createRootRoute({
   component: AppShell,
@@ -175,6 +176,12 @@ export const benchoRoute = createRoute({
   path: "/bencho",
   component: () => <BenchoPage />,
 });
+/* the first-time and "sem conexão" screens with made-up data, to check them at 127.0.0.1; not in the menu */
+export const connectPreviewRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/preview/connect",
+  component: () => <ConnectPreviewPage />,
+});
 
 export const routeTree = rootRoute.addChildren([
   indexRoute,
@@ -196,6 +203,7 @@ export const routeTree = rootRoute.addChildren([
   omnichatRuleRoute,
   gettingStartedRoute,
   benchoRoute,
+  connectPreviewRoute,
 ]);
 
 export const router = createRouter({ routeTree, defaultPreload: false, scrollRestoration: false });