@crievo/omni 0.1.7 → 0.1.9

package/studio/web/styles/pages/settings/usage.css

@@ -61,3 +61,50 @@
   position: relative;
   top: -1px;
 }
+
+/* --- agent cost (AgentCostPanel) ---------------------------------------------------------- */
+.usage-section {
+  margin: 8px 0 0;
+  font: 600 15px var(--sans);
+  color: var(--text-2);
+}
+.cost-rows {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.cost-rows li {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  column-gap: 10px;
+  align-items: baseline;
+  font-size: 13px;
+}
+.cost-rows .cost-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cost-rows .bar {
+  grid-column: 1 / -1;
+  grid-row: 2;
+  margin-top: 3px;
+}
+.cost-rows .cost-value {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+.cost-rows .cost-pct {
+  min-width: 34px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.cost-sub {
+  margin: 14px 0 8px;
+  font: 600 12.5px var(--sans);
+  color: var(--text-3);
+}

package/studio/web/styles/pages/studio-offline.css

@@ -1,15 +1,13 @@
-/* StudioOffline.tsx: the screen over the whole app while the hosted studio isn't connected. The same
-   look as the 404 (not-found.css): centered column, light heading, 40 px buttons. */
+/* StudioOffline.tsx and FirstConnection.tsx: the screen inside the app (the menu stays) while the studio isn't
+   connected. A computer that was there and is away: the 404's look, a centered column (not-found.css). The first
+   time: the welcome, how it works, the plugin to install and the setup's steps. */
+
+/* --- a computer that was there and is away ---------------------------------------------------- */
 .studio-offline {
-  position: fixed;
-  inset: 0;
-  z-index: 100;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 24px 16px;
-  overflow-y: auto;
-  background: var(--bg);
+  min-height: calc(var(--content-height) - var(--top-offset) - 88px);
 }
 .studio-offline-body {
   display: flex;
@@ -44,28 +42,11 @@
   line-height: 20px;
   color: var(--text-2);
 }
-.studio-offline-steps {
-  margin: 4px 0 0;
-  padding: 14px 16px 14px 36px;
-  max-width: 100%;
-  border-radius: var(--el-radius-control);
-  background: var(--muted);
+/* the stepper under the line: a card, left aligned inside the centered column */
+.studio-offline-card {
+  width: 100%;
+  margin-top: 8px;
   text-align: left;
-  font-size: var(--el-text-ui);
-  line-height: 22px;
-  color: var(--text-2);
-}
-.studio-offline-steps li + li {
-  margin-top: 6px;
-}
-.studio-offline-steps code {
-  padding: 1px 6px;
-  border: 1px solid var(--border-strong);
-  border-radius: 6px;
-  background: var(--bg);
-  font: 400 var(--el-text-small) / 20px var(--mono);
-  color: var(--text);
-  overflow-wrap: anywhere;
 }
 .studio-offline-actions {
   justify-content: center;
@@ -80,26 +61,231 @@
   padding: 0 16px;
   border-radius: var(--el-radius-control);
   font: 500 var(--el-text-ui) / 20px var(--sans);
+  text-decoration: none;
 }
 .studio-offline-actions .button .ic {
   width: 16px;
   height: 16px;
 }
 .studio-offline-actions .ic.spin {
-  animation: studio-offline-spin 0.9s linear infinite;
+  animation: spin 0.9s linear infinite;
 }
-.studio-offline-hint {
+
+/* --- the first time ---------------------------------------------------------------------------- */
+.connect {
+  max-width: 760px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.connect .header {
+  margin-bottom: 0;
+}
+/* the welcome: three short lines with an icon each */
+.connect-welcome {
+  list-style: none;
   margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+}
+.connect-welcome li {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
   font-size: var(--el-text-small);
+  line-height: 18px;
   color: var(--text-3);
 }
-@keyframes studio-offline-spin {
-  to {
-    transform: rotate(360deg);
-  }
+.connect-welcome li b {
+  font-size: var(--el-text-ui);
+  font-weight: 500;
+  line-height: 20px;
+  color: var(--text);
+}
+.connect-welcome-icon {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  margin-bottom: 8px;
+  border-radius: var(--el-radius-nav);
+  background: var(--muted);
+  color: var(--text);
+  font-size: 18px;
+}
+/* the steps before the computer reports: numbered circles on the same line as the setup's */
+.install-steps .setup-step.todo .setup-mark {
+  border-color: var(--text-2);
+  color: var(--text);
+  font-size: 13px;
+  font-weight: 600;
+}
+.install-steps .setup-text {
+  gap: 6px;
+}
+.install-steps .setup-step {
+  padding-bottom: 24px;
+}
+.install-steps .setup-step:last-child {
+  padding-bottom: 0;
+}
+.install-steps .setup-step:not(:last-child)::before {
+  background: var(--border-strong);
+}
+.connect-command {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-top: 10px;
+  padding: 8px 8px 8px 14px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--el-radius-control);
+  background: var(--muted);
+}
+.connect-command code {
+  flex: 1 1 auto;
+  min-width: 0;
+  font: 400 var(--el-text-small) / 20px var(--mono);
+  color: var(--text);
+  overflow-wrap: anywhere;
+}
+.connect-command .button {
+  flex: none;
+  height: 32px;
+  padding: 0 12px;
+}
+.connect-does-title {
+  margin-top: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  color: var(--text-3);
+}
+.connect-does {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.connect-does li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--el-text-small);
+  line-height: 18px;
+  color: var(--text-2);
+}
+.connect-does li svg {
+  flex: none;
+  color: var(--emerald);
+}
+/* the approval page, in miniature */
+.connect-mock {
+  width: 100%;
+  max-width: 300px;
+  margin-top: 4px;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--el-radius-control);
+  background: var(--bg);
+  overflow: hidden;
+}
+.connect-mock-bar {
+  display: flex;
+  gap: 5px;
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--border);
+  background: var(--muted);
+}
+.connect-mock-bar i {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--border-strong);
+}
+.connect-mock-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 14px 16px 16px;
+  text-align: center;
+}
+.connect-mock-body b {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+}
+.connect-mock-lines {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 80%;
+}
+.connect-mock-lines i {
+  height: 5px;
+  border-radius: 3px;
+  background: var(--muted-hover);
+}
+.connect-mock-lines i:last-child {
+  width: 60%;
+  align-self: center;
+}
+.connect-mock-buttons {
+  display: flex;
+  gap: 6px;
+  width: 100%;
+}
+.connect-mock-buttons em {
+  flex: 1;
+  padding: 5px 0;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: var(--action);
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 500;
+  color: var(--action-text);
+}
+.connect-mock-buttons em.outline {
+  background: none;
+  border-color: var(--border-strong);
+  color: var(--text);
+}
+/* one line of status under a stepper */
+.connect-status {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 20px 0 0;
+  padding: 10px 12px;
+  border-radius: var(--el-radius-control);
+  background: var(--muted);
+  font-size: var(--el-text-small);
+  line-height: 18px;
+  color: var(--text-2);
+}
+.connect-status.warning {
+  background: var(--warning-bg);
+  color: var(--warning);
+}
+.connect-status svg {
+  flex: none;
+  font-size: 16px;
+}
+.connect .panel-top {
+  margin-bottom: 16px;
 }
-@media (prefers-reduced-motion: reduce) {
-  .studio-offline-actions .ic.spin {
-    animation: none;
+@media (max-width: 720px) {
+  .connect-welcome {
+    grid-template-columns: 1fr;
   }
 }

package/tools/cost.mjs

@@ -0,0 +1,114 @@
+#!/usr/bin/env node
+/* What the agents spent on the videos: per video, stage, fork and model.
+
+     cost.mjs                     summary of every session (--days N for the last N days)
+     cost.mjs video <slug>        one video: stages, forks, turns
+     cost.mjs turns [--n 20]      the latest turns, one line each
+     cost.mjs ... --json          the same as data (what the studio reads)
+
+   Read-only: it reads .sessions/ (the studio's claude stream-json) and keeps a cache in .cost/.
+   The values are the API list price Claude Code itself reports (`total_cost_usd`), which is what
+   the usage costs even on a subscription. The logic is tools/lib/cost.mjs. */
+
+import { readTurns, summarize } from "./lib/cost.mjs";
+
+const args = process.argv.slice(2);
+const flag = name => {
+  const i = args.indexOf(name);
+  if (i < 0) return null;
+  const [v] = args.splice(i, args[i + 1]?.startsWith("--") || args[i + 1] == null ? 1 : 2).slice(1);
+  return v ?? true;
+};
+const json = !!flag("--json");
+const days = Number(flag("--days")) || null;
+const nTurns = Number(flag("--n")) || 20;
+const cmd = args[0] && !args[0].startsWith("--") ? args.shift() : "summary";
+
+const STAGE = {
+  orchestrator: "orquestrador",
+  "av-script": "roteiro",
+  "av-motion": "motion (roteiro + base)",
+  compose: "composição (1 fork por cena)",
+  wireframe: "wireframes (1 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 = { video: "vídeos", edit: "editor", reference: "estilos visuais", analysis: "análise", omni: "Omni" };
+const usd = n => `US$ ${n.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+const pad = (s, n) => String(s).padEnd(n);
+const lpad = (s, n) => String(s).padStart(n);
+const pct = (n, t) => (t ? `${Math.round((n / t) * 100)}%` : "—");
+const sorted = o => Object.entries(o).sort((a, b) => b[1] - a[1]);
+
+function table(title, entries, total, label = k => k) {
+  console.log(`\n${title}`);
+  for (const [k, v] of entries) console.log(`  ${pad(label(k), 34)} ${lpad(usd(v), 13)}  ${lpad(pct(v, total), 4)}`);
+}
+
+const rows = await readTurns({ since: days ? Date.now() - days * 86_400_000 : null });
+
+if (cmd === "turns") {
+  const last = rows.slice(-nTurns);
+  if (json) console.log(JSON.stringify(last, null, 2));
+  else
+    for (const r of last)
+      console.log(
+        `${r.at.slice(0, 16).replace("T", " ")}  ${pad(r.type, 9)} ${pad(r.target.slice(0, 38), 38)} t${r.n} ${lpad(r.total == null ? "sem custo (Codex)" : usd(r.total) + (r.partial ? " (parcial)" : ""), 22)}  ${r.subagents} forks`,
+      );
+} else if (cmd === "video") {
+  const slug = args[0];
+  if (!slug) {
+    console.error("erro: diga o vídeo — cost.mjs video <slug>");
+    process.exit(2);
+  }
+  const mine = rows.filter(r => r.target === slug || r.target === slug.replace(/^videos\//, "").replace(/\/$/, ""));
+  if (!mine.length) {
+    console.error(`erro: nenhuma sessão registrada para ${slug}`);
+    process.exit(1);
+  }
+  const s = summarize(mine);
+  if (json) console.log(JSON.stringify({ ...s, turns_list: mine.map(({ groups, ...r }) => r) }, null, 2));
+  else {
+    console.log(
+      `${slug}: ${usd(s.total)} em ${s.turns} turnos${s.partial ? ` (${s.partial} em andamento ou interrompido, estimado)` : ""}`,
+    );
+    table("por etapa", sorted(s.by_stage), s.total, k => STAGE[k] ?? k);
+    table("por modelo", sorted(s.by_model), s.total);
+    console.log("\nmaiores forks");
+    for (const f of s.top_forks.slice(0, 8))
+      console.log(`  ${pad(f.label.slice(0, 34), 34)} ${lpad(usd(f.cost), 13)}  ${f.messages} mensagens`);
+    console.log("\nturnos");
+    for (const r of mine)
+      console.log(
+        `  t${r.n} ${r.at.slice(0, 16).replace("T", " ")}  ${pad(r.origin ?? "", 8)} ${lpad(r.total == null ? "—" : usd(r.total), 13)}  ${r.subagents} forks`,
+      );
+  }
+} else {
+  const s = summarize(rows);
+  if (json) console.log(JSON.stringify(s, null, 2));
+  else {
+    console.log(
+      `${usd(s.total)} em ${s.turns} turnos de ${s.sessions} sessões${days ? ` (últimos ${days} dias)` : ""}`,
+    );
+    if (s.partial) console.log(`aviso: ${s.partial} turno(s) sem fechamento, valor estimado`);
+    if (s.unmeasured) console.log(`aviso: ${s.unmeasured} turno(s) do Codex sem custo em dólar`);
+    table("por tipo de sessão", sorted(s.by_kind), s.total, k => KIND[k] ?? k);
+    table("por etapa", sorted(s.by_stage), s.total, k => STAGE[k] ?? k);
+    table("por modelo", sorted(s.by_model), s.total);
+    console.log("\npor vídeo");
+    for (const v of s.by_video.slice(0, 15))
+      console.log(
+        `  ${pad(v.video.slice(0, 44), 44)} ${lpad(usd(v.total), 13)}  ${lpad(v.turns, 3)} turnos  ${pad(v.type, 9)}`,
+      );
+    console.log("\npor dia");
+    for (const d of s.by_day.slice(-10)) console.log(`  ${d.day}  ${lpad(usd(d.cost), 13)}`);
+  }
+}

package/tools/lib/agents.mjs

@@ -160,7 +160,8 @@ const jwtPayload = token => {
 
 /**
  * Who is logged in to an account, read from its own files (no process, no network).
- * @returns {{ email: string|null, detail: string|null } | null}
+ * @returns {{ email: string|null, detail: string|null, name?: string|null } | null} `name` is the account's own
+ *   display name, when its files carry one (Claude's)
  */
 export function loginOf(a) {
   if (a.provider === "claude") {
@@ -169,7 +170,7 @@ export function loginOf(a) {
     if (!o) return null;
     const org =
       o.organizationName && o.organizationName !== `${o.emailAddress}'s Organization` ? o.organizationName : null;
-    return { email: o.emailAddress ?? null, detail: org };
+    return { email: o.emailAddress ?? null, detail: org, name: o.displayName ?? null };
   }
   const auth = readJson(join(a.dir, "auth.json"));
   if (!auth) return null;

package/tools/lib/channel.mjs

@@ -122,7 +122,7 @@ export class Peer {
         this.waiting.delete(id);
         this.outbound.get(`q${id}`)?.cancel();
         this.frame({ t: "abort", id });
-        reject(new ChannelError("o Mac não respondeu a tempo", "timeout"));
+        reject(new ChannelError("a máquina não respondeu a tempo", "timeout"));
       }, timeoutMs);
       this.waiting.set(id, { resolve, reject, timer });
       this.frame({

package/tools/lib/cloud-user.mjs

@@ -0,0 +1,58 @@
+/* ============================================================================
+   The machine's side of the user's own cloud (docs/specs/phase-3-per-user-cloud.md, step 3).
+
+   The CLIs (omnichat.mjs, metrics.mjs) talk to "the cloud" through cloudApi (tools/platforms.mjs) with the paths
+   and bodies of the omnichat Worker they were written against. With `cloud.user` on, the calls of the omnichat,
+   the Instagram account and the metrics go to the user's own cloud instead (the studio's UserCloud, signed in with
+   the Omni login): this file is the one place that knows both vocabularies, so the callers don't change.
+
+   What still goes to the omnichat Worker (`userRoute` answers null): the schedule, the media published now and
+   the YouTube/TikTok credentials. Publishing is the last step of the migration (the Worker keeps doing it).
+
+   Pure: no network, no disk. The tests are in cloud-user.test.mjs.
+   ============================================================================ */
+
+/**
+ * @typedef {{ method: string, path: string, body?: unknown }} Call
+ */
+
+/** a config key that holds a flag (the jobs' on/off switches are config keys of the user's cloud) */
+const flag = (/** @type {string} */ key, /** @type {unknown} */ on) => ({
+  method: "PUT",
+  path: "/api/cloud/config",
+  body: { [key]: on === true },
+});
+
+/**
+ * The call in the user's cloud that does what an old Worker call did, or null when the old call is not one the
+ * user's cloud takes yet.
+ * @param {string} method @param {string} path with its query, as the old Worker had it @param {unknown} [body]
+ * @returns {Call | null}
+ */
+export function userRoute(method, path, body) {
+  const [pathname, query] = path.split("?");
+  const q = query ? `?${query}` : "";
+  const is = (/** @type {string} */ m, /** @type {string} */ p) => method === m && pathname === p;
+
+  /* what only the user's own cloud has (its status with the webhook address, the secrets): as they are */
+  if (pathname.startsWith("/api/cloud/")) return { method, path, body };
+
+  /* the switches and the omnichat config: config keys */
+  if (is("PUT", "/api/active")) return flag("omnichat.active", /** @type {any} */ (body)?.active);
+  if (is("PUT", "/api/metrics/active")) return flag("metrics.active", /** @type {any} */ (body)?.active);
+  if (is("PUT", "/api/config")) return { method, path: "/api/cloud/config", body: { "omnichat.config": body } };
+
+  if (is("GET", "/api/status")) return { method, path: "/api/cloud/omnichat/status" };
+  if (is("PUT", "/api/account")) return { method, path: "/api/cloud/instagram/account", body };
+
+  /* a post's rule and record, and the passes on it */
+  const post = /^\/api\/posts\/(\d+)(\/(?:record|retry|run|send))?$/.exec(pathname);
+  if (post) return { method, path: `/api/cloud/omnichat/posts/${post[1]}${post[2] ?? ""}${q}`, body };
+
+  /* the metrics */
+  if (is("GET", "/api/metrics")) return { method, path: "/api/cloud/metrics" };
+  const metrics = /^\/api\/metrics\/(videos\/\d+|account|run)$/.exec(pathname);
+  if (metrics) return { method, path: `/api/cloud/metrics/${metrics[1]}`, body };
+
+  return null;
+}