@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/lib/references.ts

@@ -0,0 +1,13 @@
+import type { ReferenceSummary } from "../types/api";
+import { formatSeconds } from "./format";
+
+/* the short facts of a reference's measurements: duration, size, fps, shots, hold, BPM */
+export function referenceFacts(m: ReferenceSummary["measurements"]) {
+  if (!m) return [];
+  return [
+    `${formatSeconds(m.duration)} · ${m.w}×${m.h} · ${m.fps} fps`,
+    m.shots != null && (m.shots === 1 ? "Um plano só" : `${m.shots} planos`),
+    m.hold_pct != null && `Segura ${m.hold_pct}%`,
+    m.bpm ? `${m.bpm} BPM` : null,
+  ].filter(Boolean) as string[];
+}

package/studio/web/lib/services.ts

@@ -0,0 +1,40 @@
+/* Service health as the UI shows it (ServicesPanel on the Videos page, ConnectionSignals). */
+
+import type { Services } from "../types/api";
+import { formatElapsed } from "./format";
+
+export type Health = { variant: "ok" | "warning" | "error"; text: string; hint?: string };
+
+export function premiereStatus(p: Services["premiere"], exporting: boolean): Health {
+  if (p.ok) return { variant: "ok", text: "Ponte conectada" };
+  if (exporting) return { variant: "warning", text: "Exportando: o Premiere fica travado até terminar" };
+  if (p.age_ms == null) {
+    return {
+      variant: "error",
+      text: "Ponte não encontrada",
+      hint: "Abra o Premiere com um projeto e o painel Window → Extensions (Legacy) → MCP Bridge (CEP).",
+    };
+  }
+  if (!p.started)
+    return {
+      variant: "warning",
+      text: "Painel aberto, ponte parada",
+      hint: "Clique em Start Bridge no painel MCP Bridge.",
+    };
+  /* the panel delays the heartbeat while Premiere is busy; it only counts as gone after a while */
+  if (p.age_ms < 15_000)
+    return { variant: "warning", text: `Ponte lenta: sem batimento há ${formatElapsed(p.age_ms)}` };
+  return {
+    variant: "error",
+    text: `Sem batimento há ${formatElapsed(p.age_ms)}`,
+    hint: "Premiere fechado ou travado. Aberto e parado? Feche e reabra o painel MCP Bridge.",
+  };
+}
+
+export function swapStatus(m: Services["memory"]) {
+  const fraction = m.swap_total_mb ? m.swap_used_mb / m.swap_total_mb : 0;
+  return { fraction, variant: (fraction >= 0.9 ? "error" : fraction >= 0.75 ? "warning" : "ok") as Health["variant"] };
+}
+
+/* MB as GB with a decimal comma */
+export const gb = (mb: number) => (mb / 1024).toLocaleString("pt-BR", { maximumFractionDigits: 1 });

package/studio/web/lib/sessions.ts

@@ -0,0 +1,103 @@
+/* Studio agent sessions as the UI shows them: state label, type name, where each lives on
+   screen, the chat route that resumes it and what an empty panel says. */
+
+import type { Session, SessionState, SessionType } from "../types/api";
+import { api, enc } from "./api";
+
+export const SESSION_STATE: Record<SessionState, { text: string; variant: string }> = {
+  running: { text: "Agente trabalhando", variant: "running" },
+  stopped: { text: "Agente parou", variant: "warning" },
+  error: { text: "Agente parou com erro", variant: "error" },
+  interrupted: { text: "Sessão interrompida", variant: "error" },
+};
+
+export const costLabel = (s: Session) => (s.total_cost ? ` · US$ ${s.total_cost.toFixed(2)}` : "");
+
+/* the chat request: resumes the last studio session or opens a new one */
+export const chatRequest = (type: SessionType, target: string, message: string) => {
+  const json = { message };
+  if (type === "analysis") return api.analytics.claude.$post({ json });
+  if (type === "edit") return api.videos[":slug"].edit.claude.$post({ param: { slug: enc(target) }, json });
+  if (type === "video") return api.videos[":slug"].claude.$post({ param: { slug: enc(target) }, json });
+  return api.references[":name"].claude.$post({ param: { name: enc(target) }, json });
+};
+
+/* where the session lives on screen (href) */
+export const sessionPagePath = (s: Session) =>
+  s.type === "video"
+    ? `/videos/${encodeURIComponent(s.target)}`
+    : s.type === "edit"
+      ? `/videos/${encodeURIComponent(s.target)}/render`
+      : s.type === "analysis"
+        ? "/"
+        : `/styles/${encodeURIComponent(s.target)}`;
+
+/* the same, as TanStack <Link> props: <Link {...sessionPageLink(s)}> */
+export type SessionPageLink =
+  | { to: "/videos/$slug"; params: { slug: string } }
+  | { to: "/videos/$slug/$stage"; params: { slug: string; stage: string } }
+  | { to: "/"; params?: undefined }
+  | { to: "/styles/$name"; params: { name: string } };
+export const sessionPageLink = (s: Session): SessionPageLink =>
+  s.type === "video"
+    ? { to: "/videos/$slug", params: { slug: s.target } }
+    : s.type === "edit"
+      ? { to: "/videos/$slug/$stage", params: { slug: s.target, stage: "render" } }
+      : s.type === "analysis"
+        ? { to: "/" }
+        : { to: "/styles/$name", params: { name: s.target } };
+
+/* how the session type reads in a list */
+export const SESSION_TYPE_NAME: Record<SessionType, string> = {
+  video: "vídeo",
+  reference: "estilo visual",
+  analysis: "análise",
+  edit: "edição",
+  omni: "Omni",
+};
+
+/* what the empty box says for each session type: none (no session yet), label (send button), hint (placeholder) */
+export const EMPTY_COPY: Record<SessionType, { none: string; label: string; hint: string }> = {
+  video: {
+    none: "Nenhuma sessão do studio neste vídeo: se ele está num chat, siga por lá",
+    label: "Continuar com o agente",
+    hint: "Opcional: o que fazer. Vazio, ele retoma da próxima etapa do status.",
+  },
+  reference: {
+    none: "Nenhuma sessão do studio neste estilo visual",
+    label: "Pedir ao agente",
+    hint: "O que fazer neste estilo visual: medir de novo, completar o guia, extrair tokens…",
+  },
+  analysis: {
+    none: "Nenhuma análise pedida pela tela ainda",
+    label: "Perguntar ao agente",
+    hint: "O que você quer saber das métricas: por que um Reel foi bem, o que testar no próximo…",
+  },
+  omni: {
+    none: "O Omni ainda não conversou por texto hoje",
+    label: "Perguntar ao Omni",
+    hint: "Pergunte sobre seus vídeos, métricas ou peça uma alteração",
+  },
+  edit: {
+    none: "Peça a edição em palavras: o agente mexe na timeline por você",
+    label: "Editar",
+    hint: "Ex.: corte as pausas maiores que meio segundo · atrase a animação da c03 meio segundo · tire o card da c02 · ponha o logo no canto no fim…",
+  },
+};
+
+/* what the user asked in a turn: the prompt the UI built carries the request after
+   "Pedido feito pel… :" (PT prompt prose); a first turn without a request is the session start */
+export function turnRequest(prompt: string) {
+  const m = /Pedido feito pel[oa] [^:\n]*:\s*([\s\S]*)$/.exec(prompt);
+  if (m) return m[1].trim();
+  return prompt.trim().startsWith("/") ? null : prompt.trim();
+}
+
+/* one turn of GET /api/sessions/:id `history` */
+export type TurnHistory = {
+  n: number;
+  origin: string;
+  prompt: string;
+  started_at: string;
+  result: { text: string; error: boolean; denied: string[] } | null;
+};

package/studio/web/lib/settings-categories.ts

@@ -0,0 +1,58 @@
+/* The settings categories: one id in the URL (/settings/$category), a name and a sidebar group. */
+
+export type SettingsCategoryId = "voice" | "providers" | "usage" | "agent" | "platforms" | "publishing";
+export type SettingsCategory = { id: SettingsCategoryId; name: string; description: string };
+
+export const CATEGORY_GROUPS: { name: string; categories: SettingsCategory[] }[] = [
+  {
+    name: "Produção",
+    categories: [
+      {
+        id: "voice",
+        name: "Voz",
+        description:
+          "O módulo de voz fala o texto de cada cena com a voz clonada do canal. Cada perfil guarda essa voz em um ou mais provedores (ElevenLabs, Fish Audio, Cartesia, VoiceStudio), na ordem de prioridade: se o primeiro falhar, a fala sai pelo próximo. O perfil ativo é o que vem marcado no vídeo novo.",
+      },
+      {
+        id: "usage",
+        name: "Uso das vozes",
+        description:
+          "O que sobra na Fish e na Cartesia e o que cada vídeo gastou. O plano e a cota ficam em Voz → Provedores de voz",
+      },
+      {
+        id: "agent",
+        name: "Agente de IA",
+        description: "Qual agente roda as sessões do studio, a conta dele e o modelo por etapa",
+      },
+    ],
+  },
+  {
+    name: "Distribuição",
+    categories: [
+      {
+        id: "platforms",
+        name: "Plataformas",
+        description: "YouTube, Instagram e TikTok: a conta e as chaves de cada uma",
+      },
+      {
+        id: "publishing",
+        name: "Publicação",
+        description: "O texto fixo, a publicação automática, a agenda e o omnichat",
+      },
+    ],
+  },
+];
+
+/* outside the sidebar: opened by the "Configurar provedores" button of the Voice page, which stays marked in the menu */
+export const PROVIDERS_CATEGORY: SettingsCategory = {
+  id: "providers",
+  name: "Provedores de voz",
+  description:
+    "As chaves e os modelos de cada provedor. Valem para todas as vozes dele; o Voice ID é de cada voz e fica no editor dela, em Voz.",
+};
+
+/* every category; the first (voice) is the default */
+export const SETTINGS_CATEGORIES: SettingsCategory[] = [
+  ...CATEGORY_GROUPS.flatMap(g => g.categories),
+  PROVIDERS_CATEGORY,
+];

package/studio/web/lib/sound-audio.ts

@@ -0,0 +1,33 @@
+/* Web Audio of the sound timeline: one context for the page, decoded buffers kept by URL, and the
+   library's file preview (one at a time). */
+
+let globalCtx: AudioContext | null = null;
+export const audioCtx = () => (globalCtx ??= new AudioContext({ sampleRate: 48000 }));
+const buffers = new Map<string, Promise<AudioBuffer>>();
+export function loadBuffer(url: string): Promise<AudioBuffer> {
+  if (!buffers.has(url))
+    buffers.set(
+      url,
+      fetch(url)
+        .then(r => {
+          if (!r.ok) throw new Error(`${r.status} ${url}`);
+          return r.arrayBuffer();
+        })
+        .then(b => audioCtx().decodeAudioData(b)),
+    );
+  return buffers.get(url)!;
+}
+
+/* the library's ▶: plays the file; the same one again pauses it */
+let listener: HTMLAudioElement | null = null;
+export function previewFile(url: string | null) {
+  if (!url) return;
+  if (listener && listener.dataset.url === url && !listener.paused) {
+    listener.pause();
+    return;
+  }
+  listener?.pause();
+  listener = new Audio(url);
+  listener.dataset.url = url;
+  listener.play().catch(() => {});
+}

package/studio/web/lib/sound-timeline.ts

@@ -0,0 +1,291 @@
+/* Pure helpers of the sound timeline (VideoPage's SoundTimeline): formatting, media URLs, time ↔ px,
+   snapping, clip and cut edits and the playback windows. Two timelines, like tools/cuts.mjs:
+   "original" (scenes.json time) and "edited" (the timeline's, with the area cuts closed). */
+
+import { normalizeCuts, removedDuration, keptSegments, toEdited, toOriginal } from "../../../tools/cuts.mjs";
+import { animationStart, animationInstant, clipLength, clipSpeed } from "../../../tools/soundtrack.mjs";
+import type {
+  SoundCatalog,
+  SoundClip,
+  SoundCut,
+  SoundData,
+  SoundEffectInfo,
+  SoundPlace,
+  SoundPlanItem,
+} from "../types/api";
+
+export const NO_CUTS: SoundCut[] = [];
+export const NO_LINES: Record<string, SoundClip[]> = {};
+export const PLAYER_WIDTH_KEY = "omnivideo.editor.player-width";
+export const MERGE_MS = 500;
+export const HISTORY_LIMIT = 200;
+/* height of one effects lane, in px */
+export const LANE_HEIGHT = 26;
+export const SMALL_ROLES = new Set(["click", "tick", "pop", "typing"]);
+
+export const clone = <T>(o: T): T => JSON.parse(JSON.stringify(o));
+export const round2 = (n: number) => `${n.toFixed(2)}s`;
+/* the timer and the timeline ruler: minute:second */
+export const minSeconds = (n: number) => `${Math.floor(n / 60)}:${String(Math.floor(n % 60)).padStart(2, "0")}`;
+export const placeKey = (l: { type: string; scene: string; element: string }) => `${l.type}:${l.scene}:${l.element}`;
+export const mediaSrc = (slug: string, rel: string, v?: number) =>
+  `/media/${encodeURIComponent(slug)}/${rel.split("/").map(encodeURIComponent).join("/")}${v ? `?v=${v}` : ""}`;
+export const effectSrc = (slug: string, e: SoundEffectInfo | undefined) =>
+  !e ? null : e.origin === "kit" ? `/kit/${encodeURIComponent(e.name)}` : mediaSrc(slug, `sfx/${e.name}`);
+/* the kit's "bed" role shows as background music */
+export const roleLabel = (p: string) => (p === "bed" ? "música de fundo" : p);
+/* the voice volume control → gain: quadratic curve, so the middle of the control sounds like half */
+export const gainOf = (pct: number) => (pct / 100) ** 2;
+
+/* lanes: each effect on the first lane where it doesn't touch the previous one */
+export function lanesOf(items: { id: string; start: number; duration: number }[]): Map<string, number> {
+  const end: number[] = [];
+  const m = new Map<string, number>();
+  for (const it of [...items].sort((a, b) => a.start - b.start)) {
+    let f = end.findIndex(x => x <= it.start + 0.01);
+    if (f < 0) {
+      f = end.length;
+      end.push(0);
+    }
+    end[f] = it.start + it.duration;
+    m.set(it.id, f);
+  }
+  return m;
+}
+/* how many lanes the effects row needs (at least one) */
+export const laneCountOf = (lanes: Map<string, number>) => Math.max(1, ...[...lanes.values()].map(f => f + 1));
+
+/* --- time ↔ px ------------------------------------------------------------------------- */
+
+/* x: seconds → px at this zoom; E: original time → edited; boxOf: the box of an original span
+   (empty if it fell in a cut) */
+export function timelineScale(zoom: number, cuts: SoundCut[]) {
+  const x = (s: number) => s * zoom;
+  const E = (o: number) => toEdited(o, cuts);
+  const boxOf = (a: number, b: number) => ({ left: x(E(a)), width: x(E(b) - E(a)) });
+  return { x, E, boxOf };
+}
+/* edited time → time of the export on screen (which may have other cuts, or none) */
+export const toExportTime = (t: number, cuts: SoundCut[], exportCuts: SoundCut[]) =>
+  toEdited(toOriginal(t, cuts), exportCuts);
+/* a point in original time shifted by dt seconds of the timeline (edited time) */
+export const shiftOriginal = (base: number, dt: number, cuts: SoundCut[]) =>
+  toOriginal(toEdited(base, cuts) + dt, cuts);
+
+/* --- snapping -------------------------------------------------------------------------- */
+
+/* the pointer on the timeline (edited time): snaps to the nearest target within 7 px (unless Alt),
+   aligned to the frame and kept inside the video */
+export function snapPointer(
+  raw: number,
+  o: { alt: boolean; zoom: number; fps: number; total: number; targets: number[] },
+) {
+  let best = raw;
+  if (!o.alt) {
+    let dmin = 7 / o.zoom;
+    for (const a of o.targets)
+      if (Math.abs(a - raw) < dmin) {
+        dmin = Math.abs(a - raw);
+        best = a;
+      }
+  }
+  return Math.max(0, Math.min(o.total, Math.round(best * o.fps) / o.fps));
+}
+/* the razor: snaps only to the playhead (unless Alt), on the frame */
+export function snapRazor(raw: number, o: { alt: boolean; zoom: number; fps: number; total: number; t: number }) {
+  const s0 = !o.alt && Math.abs(raw - o.t) * o.zoom < 7 ? o.t : raw;
+  return Math.max(0, Math.min(o.total, Math.round(s0 * o.fps) / o.fps));
+}
+/* a dragged clip's start (edited time) snapped by either edge to the nearest anchor within 7 px;
+   anchors null (Alt) leaves it free */
+export function snapClipStart(ed: number, length: number, anchors: number[] | null, zoom: number) {
+  if (!anchors) return ed;
+  let dmin = 7 / zoom,
+    shift = 0;
+  for (const al of anchors)
+    for (const edge of [0, length]) {
+      const d = al - (ed + edge);
+      if (Math.abs(d) < dmin) {
+        dmin = Math.abs(d);
+        shift = d;
+      }
+    }
+  return ed + shift;
+}
+/* the offset that puts a clip's start at edited time `ed`, on the clip's grid, within ±30 s */
+export function dragOffsetAt(ed: number, o: { cuts: SoundCut[]; base: number; from: number; step: number }) {
+  const offset = Math.round((toOriginal(ed, o.cuts) - o.base - o.from) / o.step) * o.step;
+  return Math.max(-30, Math.min(30, offset));
+}
+
+/* --- clips ----------------------------------------------------------------------------- */
+
+export const sameClips = (a: SoundClip[], b: SoundClip[]) =>
+  a.length === b.length &&
+  a.every(
+    (x, i) =>
+      Math.abs(x.from - b[i].from) < 1e-3 &&
+      Math.abs(x.to - b[i].to) < 1e-3 &&
+      Math.abs(x.offset - b[i].offset) < 1e-3 &&
+      Math.abs(clipSpeed(x) - clipSpeed(b[i])) < 1e-3,
+  );
+/* the clips the export has (the old assembly.json kept only a number, the `video_em`) */
+export function exportClipsOf(exp: SoundData["export"] | undefined, c: { id: string; duration: number }): SoundClip[] {
+  const v = exp?.scene_clips?.[c.id];
+  return Array.isArray(v) ? v : [{ from: 0, to: c.duration, offset: Number(v) || 0 }];
+}
+/* an offset on the clip's grid (seconds), within ±30 s */
+export const quantizeOffset = (offset: number, step: number) =>
+  +(Math.round(Math.max(-30, Math.min(30, offset)) / step) * step).toFixed(4);
+/* the razor: the clip's two halves at instant t (original time), each with the same `offset`;
+   null if a half would be shorter than one step */
+export function splitClip(c: SoundClip, t: number, base: number, step: number): [SoundClip, SoundClip] | null {
+  /* a sped clip covers `speed` seconds of the file per second of video */
+  const local = Math.round((c.from + (t - (base + c.from + c.offset)) * clipSpeed(c)) / step) * step;
+  if (local - c.from < step || c.to - local < step) return null;
+  return [
+    { ...c, to: +local.toFixed(4) },
+    { ...c, from: +local.toFixed(4) },
+  ];
+}
+/* the edges of all clips (edited time), for the drag snap; without the clip itself */
+export function clipEdgesOf(
+  kind: "video" | "voice",
+  id: string,
+  k: number,
+  o: {
+    scenes: { id: string; start: number; clips: SoundClip[] }[];
+    lines: { id: string; start: number; clips: SoundClip[] }[];
+    lineClips: Record<string, SoundClip[]>;
+    E: (o: number) => number;
+  },
+) {
+  const { E } = o;
+  return [
+    ...o.scenes.flatMap(c =>
+      c.clips.flatMap((cl, j) =>
+        kind === "video" && c.id === id && j === k
+          ? []
+          : [E(c.start + cl.from + cl.offset), E(c.start + cl.from + cl.offset + clipLength(cl))],
+      ),
+    ),
+    ...o.lines.flatMap(f =>
+      (o.lineClips[f.id] ?? f.clips).flatMap((cl, j) =>
+        kind === "voice" && f.id === id && j === k
+          ? []
+          : [E(f.start + cl.from + cl.offset), E(f.start + cl.from + cl.offset + clipLength(cl))],
+      ),
+    ),
+  ];
+}
+
+/* --- places and plan items ------------------------------------------------------------- */
+
+/* where a beat or transition lands in the video: on the animation piece it falls in (null: in a
+   deleted piece) */
+export function placeInstant(
+  l: SoundPlace,
+  scenes: { id: string; start: number; duration: number; clips: SoundClip[] }[],
+) {
+  if (l.instant == null) return null;
+  const c = scenes.find(x => x.id === l.scene);
+  if (!c) return l.instant;
+  return l.type === "transition" ? animationStart(c) : animationInstant(c, l.instant - c.start);
+}
+/* the place whose instant is nearest to `point` (original time); null if none has an instant */
+export function nearestPlace(places: SoundPlace[], point: number, instantOf: (l: SoundPlace) => number | null) {
+  const nearest = places
+    .map((l, i) => ({ i, d: instantOf(l) == null ? Infinity : Math.abs(instantOf(l)! - point) }))
+    .sort((a, b) => a.d - b.d)[0];
+  return !nearest || !Number.isFinite(nearest.d) ? null : nearest.i;
+}
+/* the plan item of a place's layer */
+export const findPlanItem = (items: SoundPlanItem[], place: SoundPlace, layer: number) =>
+  items.find(
+    it => it.type === place.type && it.scene === place.scene && it.element === place.element && it.layer === layer,
+  );
+/* the place a plan item belongs to (-1: none) */
+export const placeIndexOf = (places: SoundPlace[], it: SoundPlanItem) =>
+  places.findIndex(l => l.type === it.type && l.scene === it.scene && l.element === it.element);
+export const findEffect = (catalog: SoundCatalog, name: string) =>
+  catalog.kit.find(e => e.name === name) ?? catalog.video.find(e => e.name === name);
+/* the sound a new layer gets: the kit's transition or whoosh for a transition, pop or click for a beat */
+export function defaultSoundName(catalog: SoundCatalog | undefined, type: SoundPlace["type"]): string {
+  const kit = catalog?.kit.filter(e => !e.music) ?? [];
+  const pref = type === "transition" ? ["transition", "whoosh"] : ["pop", "click"];
+  return (
+    (
+      kit.find(e => e.role === pref[0]) ??
+      kit.find(e => e.role === pref[1]) ??
+      kit[0] ??
+      catalog?.video.find(e => !e.music)
+    )?.name ?? ""
+  );
+}
+/* the background music "+ música de fundo" adds: the kit's texture or bed, or a music captured for the video */
+export const defaultBedName = (catalog: SoundCatalog) =>
+  catalog.kit.find(e => e.role === "texture" || e.role === "bed")?.name ?? catalog.video.find(e => e.music)?.name;
+/* "place:layer" keys → [place, layer] pairs, last first (so splicing one keeps the others' indices) */
+export const layersInDeleteOrder = (keys: string[]) =>
+  keys.map(k => k.split(":").map(Number)).sort((a, b) => b[0] - a[0] || b[1] - a[1]);
+/* the effects as the timeline shows them: in edited time, without what fell entirely in a cut */
+export const editedItemsOf = (items: SoundPlanItem[], cuts: SoundCut[]) =>
+  items
+    .map(it => {
+      const ini = toEdited(it.start, cuts);
+      return {
+        ...it,
+        start: ini,
+        duration: toEdited(it.start + it.duration, cuts) - ini,
+        peak: toEdited(it.peak, cuts),
+      };
+    })
+    .filter(it => it.duration > 0.001);
+
+/* --- area cuts ------------------------------------------------------------------------- */
+
+/* the cuts with the marked area [a, b] (edited time) removed too, in original time; null if the
+   video would be left with less than half a second */
+export function cutsWithArea(cuts: SoundCut[], area: [number, number], total: number, fps: number) {
+  const [a, b] = area;
+  const next: SoundCut[] = normalizeCuts([...cuts, { from: toOriginal(a, cuts), to: toOriginal(b, cuts) }], total, fps);
+  return total - removedDuration(next) < 0.5 ? null : next;
+}
+
+/* --- playback -------------------------------------------------------------------------- */
+
+/* the kept spans (original time [a, b]) and where each starts in edited time (e) */
+export const keptSpans = (cuts: SoundCut[], total: number) =>
+  (keptSegments(cuts, total) as [number, number][]).map(([a, b]) => ({ a, b, e: toEdited(a, cuts) }));
+/* when (delay after `from`, edited time), from where (offset in the file) and for how long a file
+   placed at `start` (original time) plays: only inside the kept spans, joined in edited time.
+   `off`/`dur` play only that span of the file (a voice clip); `speed` plays it faster: `delay` stays
+   in video seconds, `offset` and `dur` are seconds of the file (what AudioBufferSourceNode.start takes,
+   with playbackRate = speed) */
+export function playbackWindows(
+  f: { start: number; off?: number; dur?: number; speed?: number },
+  bufferDuration: number,
+  spans: { a: number; b: number; e: number }[],
+  from: number,
+) {
+  const out: { delay: number; offset: number; dur: number }[] = [];
+  const off = f.off ?? 0;
+  const v = f.speed ?? 1;
+  const end = f.start + Math.min(f.dur ?? Infinity, bufferDuration - off) / v;
+  for (const sp of spans) {
+    const ini = Math.max(f.start, sp.a),
+      upTo = Math.min(end, sp.b);
+    if (upTo <= ini) continue;
+    let delay = sp.e + (ini - sp.a) - from,
+      offset = off + (ini - f.start) * v,
+      dur = (upTo - ini) * v;
+    if (delay + dur / v <= 0) continue;
+    if (delay < 0) {
+      offset -= delay * v;
+      dur += delay * v;
+      delay = 0;
+    }
+    out.push({ delay, offset, dur });
+  }
+  return out;
+}

package/studio/web/lib/sse.ts

@@ -0,0 +1,86 @@
+/* One EventSource for the whole page (GET /api/events). Queue, services and sessions arrive
+   whole; video, reference, omnichat and analytics arrive as "changed" notices. lib/query-client.ts
+   turns both into TanStack Query cache updates; components only see the query hooks. */
+
+export const SSE_EVENTS = [
+  "queue",
+  "services",
+  "video",
+  "sessions",
+  "reference",
+  "omnichat",
+  "analytics",
+  "agent",
+] as const;
+export type SseEvent = (typeof SSE_EVENTS)[number];
+
+export type Listener = (event: SseEvent, data: any) => void;
+
+const listeners = new Set<Listener>();
+const connectionListeners = new Set<() => void>();
+let source: EventSource | null = null;
+let connected = false;
+
+function setConnected(c: boolean) {
+  connected = c;
+  connectionListeners.forEach(l => l());
+}
+
+const reconnectListeners = new Set<() => void>();
+const RETRY_MS = 5000;
+let everConnected = false;
+
+export function openEventSource() {
+  if (source) return;
+  const es = new EventSource("/api/events");
+  source = es;
+  es.onopen = () => {
+    const back = everConnected && !connected;
+    everConnected = true;
+    setConnected(true);
+    /* events were missed while it was down: whoever shows data rereads it */
+    if (back) reconnectListeners.forEach(l => l());
+  };
+  es.onerror = () => {
+    setConnected(false);
+    /* a dropped stream retries by itself; a refused one (the hosted studio's 503 while the studio isn't
+       connected) is closed for good by the browser: open another one in a few seconds */
+    if (es.readyState === EventSource.CLOSED) {
+      source = null;
+      setTimeout(openEventSource, RETRY_MS);
+    }
+  };
+  for (const event of SSE_EVENTS) {
+    source.addEventListener(event, e => {
+      const data = JSON.parse((e as MessageEvent).data);
+      listeners.forEach(l => l(event, data));
+    });
+  }
+}
+
+/* listen to every event of the global stream; returns the unsubscribe */
+export function subscribe(listener: Listener) {
+  openEventSource();
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+/* the stream came back after being down; returns the unsubscribe */
+export function onReconnect(listener: () => void) {
+  reconnectListeners.add(listener);
+  return () => {
+    reconnectListeners.delete(listener);
+  };
+}
+
+/* connection state, for useSyncExternalStore (hooks/useConnected.ts) */
+export function subscribeConnection(onChange: () => void) {
+  openEventSource();
+  connectionListeners.add(onChange);
+  return () => {
+    connectionListeners.delete(onChange);
+  };
+}
+export const isConnected = () => connected;