primocode 10.16.0 → 10.17.1

package/editor/preview/app.js

@@ -0,0 +1,2122 @@
+/* Preview da edição: plain JS, no build step, no external requests. */
+'use strict';
+
+(() => {
+  const POLL_MS = 1500;
+  const TAB_HASH = { cut: '#corte', style: '#estilo', final: '#final' };
+  const HASH_TAB = { '#corte': 'cut', '#estilo': 'style', '#final': 'final' };
+  const PHASE_TAB = { setup: 'cut', cut: 'cut', style: 'style', final: 'final' };
+  const PHASE_LABEL = { setup: 'Preparação', cut: 'Corte', style: 'Estilo', final: 'Final' };
+  const AWAIT_TAB = { approval_cut: 'cut', style: 'style', approval_final: 'final' };
+  const SWATCHES = ['#FFC400', '#FF6B35', '#FF3D7F', '#39D98A', '#3DA9FC', '#FFFFFF'];
+  const DENOISE = [
+    { id: 'off', label: 'Desligado', desc: 'Som do jeito que foi gravado.' },
+    { id: 'leve', label: 'Leve', desc: 'Tira chiado e zumbido. A voz fica igual.' },
+    { id: 'forte', label: 'Forte', desc: 'Para barulho alto, como rua ou ventilador.' },
+  ];
+  const DENOISE_IDS = DENOISE.map((d) => d.id);
+  // edit_data "motion": how many animations the agent picks and their look
+  const MOTION_QTD = [
+    { id: 'poucas', n: 3, label: 'Poucas', desc: 'Os 2 ou 3 momentos mais fortes da fala.' },
+    { id: 'algumas', n: 5, label: 'Algumas', desc: 'Até 5, espalhadas pelo vídeo.' },
+  ];
+  // sw = the look's colors (base, highlight, text); null = the accent chosen for the video
+  const MOTION_TEMAS = [
+    { id: 'papelaria', label: 'Papel lilás', desc: 'Papel claro com base lilás, o estilo da Vit.', sw: ['#c7b7ef', '#665080', '#352c40'] },
+    { id: 'papel_azul', label: 'Papel azul', desc: 'Papel claro com base azul e check azul.', sw: ['#a9c7f2', '#2457c5', '#1f2a44'] },
+    { id: 'papel_verde', label: 'Papel verde', desc: 'Papel claro com base verde-menta.', sw: ['#a8dcc0', '#1f8a5b', '#1e3a2f'] },
+    { id: 'papel_laranja', label: 'Papel laranja', desc: 'Papel claro com base pêssego e laranja forte.', sw: ['#f6c29b', '#e0591f', '#3d2a1e'] },
+    { id: 'papel_grafite', label: 'Papel grafite', desc: 'Papel claro com base cinza e vermelho-tijolo. Sóbrio.', sw: ['#c9ccd1', '#d6452b', '#1d1f23'] },
+    { id: 'pop', label: 'Pop', desc: 'Cartão creme, contorno preto grosso e sombra dura.', sw: ['#fff8e7', '#e8412c', '#111111'] },
+    { id: 'neon', label: 'Neon', desc: 'Cartão escuro com borda que brilha e letra condensada.', sw: ['#0a0a12', '#22d3ee', '#ffffff'] },
+    { id: 'escuro', label: 'Vidro escuro', desc: 'Cartão escuro com a cor de destaque do vídeo.', sw: ['#121214', null, '#ffffff'] },
+    { id: 'claro', label: 'Branco', desc: 'Cartão branco com a cor de destaque do vídeo.', sw: ['#ffffff', null, '#111111'] },
+  ];
+  const MOTION_QTD_IDS = MOTION_QTD.map((x) => x.id);
+  const MOTION_TEMA_IDS = MOTION_TEMAS.map((x) => x.id);
+  const MUSIC_OFF = 'off';
+  const MUSIC_FILE = 'arquivo';
+  const MUSIC_ASK = ''; // music on, source not chosen yet (older saves, or "music": {"enabled": true} alone)
+  const TRILHAS_MS = 10000;
+  const MOOD_ID_RE = /^[a-z0-9][a-z0-9_]{0,39}$/;
+  const TV_ID = 'tela_verde';
+  const TV_POSITIONS = [
+    { id: 'esquerda', label: 'Canto esquerdo', desc: 'Você embaixo, à esquerda.' },
+    { id: 'direita', label: 'Canto direito', desc: 'Você embaixo, à direita.' },
+    { id: 'centro', label: 'Meio', desc: 'Você embaixo, no centro e maior.' },
+  ];
+  const TV_POS_IDS = TV_POSITIONS.map((x) => x.id);
+  const TV_POS_DEFAULT = 'direita';
+  const slugify = (text) => String(text || '').normalize('NFKD').replace(/[\u0300-\u036f]/g, '').toLowerCase()
+    .replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '').slice(0, 40).replace(/_+$/, '');
+  const baseName = (rel) => String(rel || '').split('/').pop();
+  const CHECK_SVG = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12.5 4.5 4.5L19 7.5"/></svg>';
+  const TRASH_SVG = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg>';
+
+  // ---------------------------------------------------------------- helpers
+
+  const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+
+  function el(tag, props = {}, ...children) {
+    const node = document.createElement(tag);
+    for (const [key, value] of Object.entries(props)) {
+      if (value === undefined || value === null || value === false) continue;
+      if (key === 'class') node.className = value;
+      else if (key === 'text') node.textContent = value;
+      else if (key === 'html') node.innerHTML = value;
+      else if (key.startsWith('on')) node.addEventListener(key.slice(2), value);
+      else if (key === 'style') Object.assign(node.style, value);
+      else node.setAttribute(key, value === true ? '' : value);
+    }
+    for (const child of children.flat()) {
+      if (child === null || child === undefined || child === false) continue;
+      node.append(child instanceof Node ? child : document.createTextNode(String(child)));
+    }
+    return node;
+  }
+
+  function fmtTime(seconds) {
+    if (seconds === null || seconds === undefined || !isFinite(seconds)) return '--:--';
+    const s = Math.max(0, seconds);
+    let m = Math.floor(s / 60);
+    let rest = Math.round((s - m * 60) * 100) / 100;
+    if (rest >= 60) { m += 1; rest -= 60; }
+    return `${String(m).padStart(2, '0')}:${rest.toFixed(2).padStart(5, '0')}`;
+  }
+
+  function fmtRuler(seconds, step) {
+    const m = Math.floor(seconds / 60);
+    const s = seconds - m * 60;
+    const secText = step < 1 ? s.toFixed(1).padStart(4, '0') : String(Math.round(s)).padStart(2, '0');
+    return `${m}:${secText}`;
+  }
+
+  function fmtClock(value) {
+    const d = typeof value === 'number' ? new Date(value) : new Date(Date.parse(value));
+    if (isNaN(d)) return '';
+    return d.toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' });
+  }
+
+  function fmtSeconds(sec) {
+    return `${(Math.round(sec * 10) / 10).toLocaleString('pt-BR', { minimumFractionDigits: 1, maximumFractionDigits: 1 })} s`;
+  }
+
+  function firstWords(text, n) {
+    if (!text) return '';
+    const words = String(text).trim().split(/\s+/);
+    const cut = words.slice(0, n).join(' ');
+    return words.length > n ? `${cut.replace(/[.,;:!?]+$/, '')}…` : cut;
+  }
+
+  const encodePath = (rel) => String(rel).split('/').map(encodeURIComponent).join('/');
+  const versionOf = (info) => (info ? `${Math.round(info.mtime * 1000)}-${info.size}` : '0');
+  const mediaUrl = (rel, info) => `/media/${encodePath(rel)}?v=${versionOf(info)}`;
+  const parseMs = (iso) => { const t = Date.parse(iso || ''); return isNaN(t) ? 0 : t; };
+
+  // edit_data "motion": a list of animations or {"enabled": bool, "items": [...]}. undefined = not decided yet.
+  function motionOn(m) {
+    if (Array.isArray(m)) return m.some((it) => it && typeof it === 'object' && it.enabled !== false) || undefined;
+    if (m && typeof m === 'object') {
+      if (m.enabled === false) return false;
+      return (Array.isArray(m.items) && m.items.some((it) => it && typeof it === 'object' && it.enabled !== false)) || undefined;
+    }
+    return undefined;
+  }
+
+  function normalizeHex(value) {
+    const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(String(value || '').trim());
+    if (!m) return null;
+    let hex = m[1];
+    if (hex.length === 3) hex = hex.split('').map((c) => c + c).join('');
+    return `#${hex.toUpperCase()}`;
+  }
+
+  const store = {
+    get(key) { try { const raw = localStorage.getItem(key); return raw ? JSON.parse(raw) : null; } catch { return null; } },
+    set(key, value) { try { localStorage.setItem(key, JSON.stringify(value)); } catch { /* private mode */ } },
+    del(key) { try { localStorage.removeItem(key); } catch { /* ignore */ } },
+    dropOthers(prefix, keep) {
+      try {
+        Object.keys(localStorage).forEach((k) => { if (k.startsWith(prefix) && k !== keep) localStorage.removeItem(k); });
+      } catch { /* ignore */ }
+    },
+  };
+
+  // The server hands out a per-run token in /api/state; every save must carry it, so no other site can post.
+  let previewToken = '';
+  let agentListening = false;
+  const NUDGE = 'Agora mande uma mensagem na conversa (por exemplo: "pronto") para o agente seguir.';
+  const handoff = (listening, saved) => (agentListening ? listening : `${saved} ${NUDGE}`);
+
+  async function refreshToken() {
+    try {
+      const res = await fetch('/api/state', { cache: 'no-store' });
+      const data = await res.json();
+      previewToken = data.token || '';
+      agentListening = Boolean(data.watcher && data.watcher.alive);
+    } catch { /* offline: the save below reports it */ }
+  }
+
+  async function postJson(path, body, retried = false) {
+    if (!previewToken) await refreshToken();
+    let res;
+    try {
+      res = await fetch(path, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'X-Preview-Token': previewToken },
+        body: JSON.stringify(body),
+      });
+    } catch {
+      throw new Error('Sem conexão com o preview. Ele ainda está rodando?');
+    }
+    const data = await res.json().catch(() => ({}));
+    if (res.status === 403 && !retried) { previewToken = ''; return postJson(path, body, true); } // server restarted
+    if (!res.ok || !data.ok) throw new Error(data.error ? `Não deu para salvar: ${data.error}` : `Não deu para salvar (erro ${res.status}).`);
+    return data;
+  }
+
+  function toast(message, kind = 'ok', ms = 3400) {
+    const wrap = document.getElementById('toasts');
+    const node = el('div', { class: `toast${kind === 'error' ? ' is-error' : ''}`, role: kind === 'error' ? 'alert' : 'status', text: message });
+    wrap.append(node);
+    while (wrap.children.length > 3) wrap.firstElementChild.remove();
+    setTimeout(() => {
+      node.classList.add('is-leaving');
+      setTimeout(() => node.remove(), 300);
+    }, ms);
+  }
+
+  function confirmBox({ title, text, ok }) {
+    const dialog = document.getElementById('confirm-dialog');
+    dialog.querySelector('[data-confirm-title]').textContent = title;
+    dialog.querySelector('[data-confirm-text]').textContent = text;
+    dialog.querySelector('[data-confirm-ok]').textContent = ok;
+    dialog.returnValue = '';
+    return new Promise((resolve) => {
+      dialog.addEventListener('close', () => resolve(dialog.returnValue === 'ok'), { once: true });
+      dialog.showModal();
+      dialog.querySelector('[data-confirm-ok]').focus();
+    });
+  }
+
+  const isTypingTarget = (target) => {
+    if (!target || !target.tagName) return false;
+    const tag = target.tagName;
+    if (tag === 'TEXTAREA' || tag === 'SELECT' || target.isContentEditable) return true;
+    return tag === 'INPUT' && !['checkbox', 'radio', 'button', 'submit', 'range', 'color'].includes(target.type);
+  };
+
+  // ---------------------------------------------------------------- review (Corte / Final)
+
+  class Review {
+    constructor(section, cfg) {
+      this.cfg = cfg;
+      this.section = section;
+      section.append(document.getElementById('review-template').content.cloneNode(true));
+      const q = (sel) => section.querySelector(sel);
+      this.els = {
+        empty: q('[data-empty]'), emptyTitle: q('[data-empty-title]'), emptyText: q('[data-empty-text]'),
+        review: q('[data-review]'), frame: q('[data-frame]'), video: q('[data-video]'), bigPlay: q('[data-bigplay]'),
+        videoMsg: q('[data-video-msg]'), play: q('[data-play]'), time: q('[data-time]'), duration: q('[data-duration]'),
+        now: q('[data-now]'), timeline: q('[data-timeline]'), tlScroll: q('[data-tl-scroll]'),
+        zoomLevel: q('[data-zoom-level]'), ruler: q('[data-ruler]'), layers: q('[data-layers]'),
+        segments: q('[data-segments]'), strip: q('[data-filmstrip]'), stripImg: q('[data-filmstrip-img]'), wave: q('[data-wave]'),
+        overlay: q('[data-marks-overlay]'), selection: q('[data-selection]'), playhead: q('[data-playhead]'),
+        trimsCard: q('[data-trims-card]'), trimsList: q('[data-trims-list]'), trimCount: q('[data-trim-count]'),
+        trimsState: q('[data-trims-state]'), saveTrims: q('[data-save-trims]'), clearTrims: q('[data-clear-trims]'),
+        markCount: q('[data-mark-count]'), marksState: q('[data-marks-state]'), setIn: q('[data-set-in]'), setOut: q('[data-set-out]'), motionHere: q('[data-motion-here]'),
+        pending: q('[data-pending]'), noteBox: q('[data-note-box]'), noteRange: q('[data-note-range]'), noteInput: q('[data-note-input]'),
+        noteCancel: q('[data-note-cancel]'), marksList: q('[data-marks-list]'), marksEmpty: q('[data-marks-empty]'),
+        banner: q('[data-banner]'), approveNote: q('[data-approve-note]'), download: q('[data-download]'),
+        saveMarks: q('[data-save-marks]'), approve: q('[data-approve]'),
+      };
+      this.els.waveFill = el('div', { class: 'wave-fill' });
+      this.els.wave.append(this.els.waveFill);
+      this.els.approve.textContent = cfg.approveLabel;
+      this.els.emptyTitle.textContent = cfg.emptyTitle;
+      this.els.emptyText.textContent = cfg.emptyText;
+      if (cfg.phase === 'final') this.els.layers.hidden = false;
+
+      this.data = null;
+      this.rel = null;
+      this.info = null;
+      this.mediaKey = null;
+      this.candidateKey = null;
+      this.duration = 0;
+      this.fps = 30;
+      this.segments = [];
+      this.segKey = '';
+      this.layersKey = '';
+      this.currentSeg = -1;
+      this.marks = [];
+      this.dirty = false;
+      this.marksSavedAt = null;
+      this.trims = new Map();       // id do trecho -> { start_delta, end_delta }
+      this.trimsDirty = false;
+      this.trimsSavedAt = null;
+      this.trimsSeen = null;
+      this.dragTrim = null;
+      this.pendingIn = null;
+      this.noteDraft = null;
+      this.scrubbing = false;
+      this.scrubTime = 0;
+      this.seekTarget = null;
+      this.rafOn = false;
+      this.active = false;
+      this.stripUrl = '';
+      this.waveUrl = '';
+      this.approving = false;
+      this.zoom = 1;
+      this.bind();
+    }
+
+    // -- wiring
+
+    bind() {
+      const { video, timeline } = this.els;
+      const refresh = () => this.renderTime();
+      video.addEventListener('play', () => { this.els.frame.classList.add('is-playing'); this.els.review.classList.add('is-playing'); this.startLoop(); });
+      video.addEventListener('pause', () => { this.els.frame.classList.remove('is-playing'); this.els.review.classList.remove('is-playing'); refresh(); });
+      video.addEventListener('ended', refresh);
+      video.addEventListener('timeupdate', () => { if (!this.rafOn) refresh(); });
+      video.addEventListener('seeked', () => this.onSeeked());
+      video.addEventListener('loadedmetadata', () => this.onMetadata());
+      video.addEventListener('error', () => this.onVideoError());
+      video.addEventListener('click', () => this.togglePlay());
+      this.els.bigPlay.addEventListener('click', () => this.togglePlay());
+      this.els.play.addEventListener('click', () => this.togglePlay());
+      this.section.querySelectorAll('[data-step]').forEach((b) => b.addEventListener('click', () => this.stepFrames(Number(b.dataset.step))));
+      this.section.querySelectorAll('[data-jump]').forEach((b) => b.addEventListener('click', () => this.jump(Number(b.dataset.jump))));
+
+      timeline.addEventListener('pointerdown', (e) => this.onPointerDown(e));
+      timeline.addEventListener('pointermove', (e) => this.onPointerMove(e));
+      timeline.addEventListener('pointerup', (e) => this.onPointerUp(e));
+      timeline.addEventListener('pointercancel', (e) => this.onPointerUp(e));
+      timeline.addEventListener('lostpointercapture', (e) => this.onPointerUp(e));
+
+      this.els.setIn.addEventListener('click', () => this.setIn());
+      this.els.setOut.addEventListener('click', () => this.setOut());
+      if (this.els.motionHere) this.els.motionHere.addEventListener('click', () => this.motionHere());
+      this.els.noteBox.addEventListener('submit', (e) => { e.preventDefault(); this.addMark(); });
+      this.els.noteCancel.addEventListener('click', () => { this.closeNote(); this.renderTime(); });
+      this.els.noteInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); this.closeNote(); this.renderTime(); }
+        if (e.key === 'Enter' && !e.isComposing) { e.preventDefault(); this.addMark(); }
+      });
+      this.els.saveMarks.addEventListener('click', () => this.saveMarks());
+      this.els.approve.addEventListener('click', () => this.approve());
+      this.els.saveTrims.addEventListener('click', () => this.saveTrims());
+      this.els.clearTrims.addEventListener('click', () => {
+        if (!this.trims.size) return;
+        this.trims.clear();
+        this.trimsDirty = true;
+        this.renderSegments();
+        this.renderTrims();
+      });
+
+      this.section.querySelectorAll('[data-zoom]').forEach((b) => b.addEventListener('click', () => {
+        const kind = b.dataset.zoom;
+        if (kind === 'fit') this.setZoom(1);
+        else this.zoomBy(kind === 'in' ? 1 : -1);
+      }));
+      this.els.tlScroll.addEventListener('wheel', (e) => {
+        if (e.ctrlKey || e.metaKey) {
+          e.preventDefault();
+          this.zoomBy(e.deltaY < 0 ? 1 : -1, e.clientX);
+        } else if (this.zoom > 1 && Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+          e.preventDefault();
+          this.els.tlScroll.scrollLeft += e.deltaY;
+        }
+      }, { passive: false });
+
+      let resizeTimer = null;
+      new ResizeObserver(() => {
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(() => { this.renderRuler(); this.loadStrips(); }, 180);
+      }).observe(timeline);
+
+      this.applyZoom();
+    }
+
+    // -- zoom da linha do tempo
+
+    zoomBy(dir, anchorClientX) {
+      const steps = [1, 1.5, 2, 3, 4, 6, 8, 12, 16, 24, 32];
+      const i = steps.findIndex((s) => s >= this.zoom - 1e-6);
+      const at = i < 0 ? steps.length - 1 : i;
+      const next = steps[clamp(at + dir, 0, steps.length - 1)];
+      this.setZoom(next, anchorClientX);
+    }
+
+    setZoom(z, anchorClientX) {
+      const next = clamp(z, 1, 32);
+      if (Math.abs(next - this.zoom) < 1e-6) return;
+      const { tlScroll, timeline } = this.els;
+      const box = tlScroll.getBoundingClientRect();
+      // o que fica parado na tela: o ponto do cursor ou, sem cursor, a agulha
+      let anchorPx;
+      let anchorT;
+      if (typeof anchorClientX === 'number') {
+        anchorPx = clamp(anchorClientX - box.left, 0, box.width);
+        anchorT = this.duration
+          ? ((tlScroll.scrollLeft + anchorPx) / Math.max(1, timeline.clientWidth)) * this.duration
+          : 0;
+      } else {
+        anchorT = this.now();
+        const x = this.duration ? (anchorT / this.duration) * timeline.clientWidth - tlScroll.scrollLeft : 0;
+        anchorPx = x >= 0 && x <= box.width ? x : box.width / 2;
+      }
+      this.zoom = next;
+      this.applyZoom();
+      const full = tlScroll.clientWidth * this.zoom;
+      tlScroll.scrollLeft = this.duration
+        ? clamp((anchorT / this.duration) * full - anchorPx, 0, Math.max(0, full - tlScroll.clientWidth))
+        : 0;
+    }
+
+    applyZoom() {
+      this.els.timeline.style.width = `${this.zoom * 100}%`;
+      this.els.zoomLevel.textContent = this.zoom >= 10 || Number.isInteger(this.zoom)
+        ? `${Math.round(this.zoom)}x` : `${this.zoom}x`;
+      this.section.querySelectorAll('[data-zoom]').forEach((b) => {
+        if (b.dataset.zoom === 'in') b.disabled = this.zoom >= 32;
+        if (b.dataset.zoom === 'out') b.disabled = this.zoom <= 1;
+        if (b.dataset.zoom === 'fit') b.disabled = this.zoom <= 1;
+      });
+      this.renderRuler();
+      this.loadStrips();
+    }
+
+    // -- esticar trecho (alças nas bordas dos blocos)
+
+    canTrim() {
+      return this.cfg.phase === 'cut';
+    }
+
+    trimOf(id) {
+      return this.trims.get(id) || { start_delta: 0, end_delta: 0 };
+    }
+
+    addHandles(block, seg) {
+      if (!this.canTrim() || !seg.id) return;
+      ['start', 'end'].forEach((side) => {
+        const grip = el('button', {
+          class: `seg-handle ${side}`,
+          type: 'button',
+          tabindex: '-1',
+          'aria-label': side === 'start' ? 'Esticar o começo deste trecho' : 'Esticar o fim deste trecho',
+          title: side === 'start'
+            ? 'Puxe para a esquerda para pegar o começo da palavra (Shift = mais fino, setas = 0,01 s)'
+            : 'Puxe para a direita para pegar o fim da palavra (Shift = mais fino, setas = 0,01 s)',
+        });
+        grip.addEventListener('keydown', (e) => {
+          if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+          e.preventDefault();
+          e.stopPropagation();
+          const step = (e.key === 'ArrowLeft' ? -1 : 1) * (e.shiftKey ? 0.05 : 0.01);
+          this.nudgeTrim(seg, side, step);
+        });
+        grip.addEventListener('pointerdown', (e) => this.onTrimDown(e, seg, side, block, grip));
+        grip.addEventListener('pointermove', (e) => this.onTrimMove(e));
+        grip.addEventListener('pointerup', (e) => this.onTrimUp(e));
+        grip.addEventListener('pointercancel', (e) => this.onTrimUp(e));
+        grip.addEventListener('lostpointercapture', (e) => this.onTrimUp(e));
+        block.append(grip);
+      });
+    }
+
+    onTrimDown(e, seg, side, block, grip) {
+      if (e.button !== 0 || !this.duration) return;
+      e.preventDefault();
+      e.stopPropagation();
+      grip.setPointerCapture(e.pointerId);
+      grip.focus({ preventScroll: true });
+      grip.classList.add('is-on');
+      block.classList.add('is-dragging');
+      const cur = this.trimOf(seg.id);
+      this.dragTrim = {
+        seg, side, block, grip,
+        x0: e.clientX,
+        base: side === 'start' ? cur.start_delta : cur.end_delta,
+        delta: side === 'start' ? cur.start_delta : cur.end_delta,
+        badge: el('div', { class: 'seg-delta' }),
+      };
+      block.append(this.dragTrim.badge);
+      this.paintDrag();
+    }
+
+    // segundos por pixel de arrasto: acompanha o zoom, mas nunca mais grosso que 0,01 s por pixel.
+    // O ajuste aqui é de fração de segundo (o fim de uma palavra), então em 1x a borda não pode
+    // correr junto com o mouse: um empurrãozinho viraria 2 s.
+    trimRate(fine) {
+      const perSec = this.els.timeline.clientWidth / Math.max(0.001, this.duration);
+      return Math.min(1 / Math.max(1, perSec), 0.01) / (fine ? 3 : 1);
+    }
+
+    onTrimMove(e) {
+      const d = this.dragTrim;
+      if (!d) return;
+      e.preventDefault();
+      const raw = d.base + (e.clientX - d.x0) * this.trimRate(e.shiftKey);
+      d.delta = clamp(Math.round(raw * 100) / 100, -2, 2);
+      this.paintDrag();
+    }
+
+    nudgeTrim(seg, side, step) {
+      const cur = { ...this.trimOf(seg.id) };
+      const key = side === 'start' ? 'start_delta' : 'end_delta';
+      cur[key] = clamp(Math.round((cur[key] + step) * 100) / 100, -2, 2);
+      if (!cur.start_delta && !cur.end_delta) this.trims.delete(seg.id);
+      else this.trims.set(seg.id, { ...cur, beat: seg.beat || '', quote: seg.quote || '' });
+      this.trimsDirty = true;
+      this.renderSegments();
+      this.renderTrims();
+      const again = [...this.els.segments.children].find((b) => b.dataset.segId === seg.id);
+      if (again) {
+        const grip = again.querySelector(`.seg-handle.${side}`);
+        if (grip) { grip.classList.add('is-on'); grip.focus({ preventScroll: true }); }
+      }
+    }
+
+    onTrimUp() {
+      const d = this.dragTrim;
+      if (!d) return;
+      this.dragTrim = null;
+      d.grip.classList.remove('is-on');
+      d.block.classList.remove('is-dragging');
+      d.badge.remove();
+      const cur = { ...this.trimOf(d.seg.id) };
+      cur[d.side === 'start' ? 'start_delta' : 'end_delta'] = d.delta;
+      if (!cur.start_delta && !cur.end_delta) this.trims.delete(d.seg.id);
+      else this.trims.set(d.seg.id, { ...cur, beat: d.seg.beat || '', quote: d.seg.quote || '' });
+      this.trimsDirty = true;
+      this.renderSegments();
+      this.renderTrims();
+    }
+
+    paintDrag() {
+      const d = this.dragTrim;
+      if (!d) return;
+      const cur = this.trimOf(d.seg.id);
+      const sd = d.side === 'start' ? d.delta : cur.start_delta;
+      const ed = d.side === 'end' ? d.delta : cur.end_delta;
+      this.placeBlock(d.block, d.seg, sd, ed);
+      const seg = d.delta;
+      const label = seg === 0 ? 'sem mudança'
+        : `${seg > 0 ? '+' : '−'}${Math.abs(seg).toFixed(2).replace('.', ',')} s ${d.side === 'start' ? 'no começo' : 'no fim'}`;
+      d.badge.textContent = label;
+    }
+
+    placeBlock(block, seg, sd, ed) {
+      const a = seg.out_start + (sd || 0);
+      const b = seg.out_end + (ed || 0);
+      block.style.left = `calc(${this.pct(a)} + 1px)`;
+      block.style.width = `calc(${this.duration ? clamp(((b - a) / this.duration) * 100, 0, 100) : 0}% - 2px)`;
+    }
+
+    renderTrims() {
+      const list = this.els.trimsList;
+      list.textContent = '';
+      const rows = [...this.trims.entries()]
+        .map(([id, t]) => ({ id, ...t, seg: this.segments.find((s) => s.id === id) }))
+        .sort((a, b) => (a.seg ? a.seg.out_start : 0) - (b.seg ? b.seg.out_start : 0));
+      rows.forEach((r) => {
+        const bits = [];
+        if (r.start_delta) bits.push(`${r.start_delta < 0 ? 'estica' : 'encolhe'} ${Math.abs(r.start_delta).toFixed(2).replace('.', ',')} s no começo`);
+        if (r.end_delta) bits.push(`${r.end_delta > 0 ? 'estica' : 'encolhe'} ${Math.abs(r.end_delta).toFixed(2).replace('.', ',')} s no fim`);
+        const row = el('li', { class: 'trim-row' },
+          el('span', { class: 'trim-when', text: r.seg ? fmtTime(r.seg.out_start) : r.id }),
+          el('span', { class: 'trim-what', text: r.quote ? `“${r.quote}”` : (r.beat || r.id), title: r.quote || r.id }),
+          el('span', { class: 'trim-delta', text: bits.join(' · ') }));
+        const del = el('button', { class: 'icon-btn small danger', type: 'button', 'aria-label': 'Desfazer este ajuste', title: 'Desfazer' });
+        del.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6 6 18"/></svg>';
+        del.addEventListener('click', () => {
+          this.trims.delete(r.id);
+          this.trimsDirty = true;
+          this.renderSegments();
+          this.renderTrims();
+        });
+        row.append(del);
+        list.append(row);
+      });
+      const n = this.trims.size;
+      this.els.trimsCard.hidden = !this.canTrim() || (n === 0 && !this.trimsSavedAt && !this.trimsDirty);
+      this.els.trimCount.textContent = n ? String(n) : '';
+      const st = this.els.trimsState;
+      st.classList.remove('is-dirty', 'is-saved');
+      if (this.trimsDirty) {
+        st.textContent = n ? 'Não enviados ainda' : 'Alteração não enviada';
+        st.classList.add('is-dirty');
+      } else if (this.trimsSavedAt) {
+        st.textContent = `Enviados às ${fmtClock(this.trimsSavedAt)}`;
+        st.classList.add('is-saved');
+      } else {
+        st.textContent = '';
+      }
+      this.els.saveTrims.disabled = !this.trimsDirty;
+      this.els.saveTrims.classList.toggle('attention', this.trimsDirty && n > 0);
+      this.els.clearTrims.disabled = n === 0;
+    }
+
+    async saveTrims() {
+      if (!this.trimsDirty) return;
+      this.els.saveTrims.disabled = true;
+      const payload = [...this.trims.entries()].map(([id, t]) => ({
+        id, start_delta: t.start_delta, end_delta: t.end_delta, beat: t.beat || '', quote: t.quote || '',
+      }));
+      try {
+        const res = await postJson('/api/trims', { phase: this.cfg.phase, trims: payload });
+        this.trimsDirty = false;
+        this.trimsSavedAt = res.saved.saved_at;
+        if (this.data && this.data.saved) this.data.saved.trims = res.saved;
+        toast(payload.length
+          ? handoff('Ajustes enviados. O agente vai esticar e renderizar de novo.', 'Ajustes enviados.')
+          : handoff('Ajustes apagados. O agente foi avisado.', 'Ajustes apagados.'),
+        'ok', agentListening ? 3400 : 7000);
+      } catch (err) {
+        toast(err.message, 'error', 5000);
+      }
+      this.renderTrims();
+    }
+
+    followPlayhead(t) {
+      if (this.zoom <= 1 || this.scrubbing || !this.duration) return;
+      const { tlScroll, timeline } = this.els;
+      const full = timeline.clientWidth;
+      const view = tlScroll.clientWidth;
+      if (full <= view) return;
+      const x = (t / this.duration) * full;
+      const margin = view * 0.15;
+      const left = tlScroll.scrollLeft;
+      if (x < left + margin || x > left + view - margin) {
+        tlScroll.scrollLeft = clamp(x - view / 2, 0, full - view);
+      }
+    }
+
+    setActive(active) {
+      this.active = active;
+      if (!active && !this.els.video.paused) this.els.video.pause();
+      if (active) requestAnimationFrame(() => { this.renderRuler(); this.loadStrips(); this.renderTime(); });
+    }
+
+    // -- data from the poll
+
+    update(data) {
+      this.data = data;
+      const state = data.state || {};
+      const files = data.files || {};
+      const rel = this.cfg.phase === 'cut' ? (state.cut_video || 'cut.mp4') : (state.final_video || null);
+      const info = rel ? files[rel] : null;
+
+      if (!rel || !info) {
+        this.showEmpty(true);
+        return;
+      }
+      const key = `${rel}|${info.mtime}|${info.size}`;
+      if (key !== this.mediaKey) {
+        const settled = info.age > 2.5 || key === this.candidateKey;
+        if (settled) {
+          this.loadMedia(rel, info, key);
+        } else {
+          this.candidateKey = key;
+          if (!this.mediaKey) this.showEmpty(true);
+        }
+      }
+      if (!this.mediaKey) return;
+      this.showEmpty(false);
+
+      const timeline = data.timeline && Array.isArray(data.timeline.segments) ? data.timeline : null;
+      if (timeline && timeline.fps) this.fps = Number(timeline.fps) || 30;
+      const segKey = JSON.stringify(timeline ? [timeline.duration, timeline.segments] : null);
+      if (segKey !== this.segKey) {
+        this.segKey = segKey;
+        this.segments = timeline ? timeline.segments.slice().sort((a, b) => a.out_start - b.out_start) : [];
+        this.renderSegments();
+      }
+      if (this.cfg.phase === 'final') {
+        const layersKey = JSON.stringify([data.edit_data, this.duration]);
+        if (layersKey !== this.layersKey) { this.layersKey = layersKey; this.renderLayers(); }
+      }
+      this.syncTrims(data);
+      this.renderBanner();
+    }
+
+    syncTrims(data) {
+      if (!this.canTrim()) return;
+      const rec = data.saved && data.saved.trims;
+      // um ajuste só vale para o render que a pessoa estava vendo: render novo zera a lista
+      const fresh = Boolean(rec && rec.phase === this.cfg.phase && this.info
+        && parseMs(rec.saved_at) >= this.info.mtime * 1000 - 1);
+      const stamp = `${this.mediaKey}|${fresh ? rec.saved_at : ''}`;
+      if (stamp === this.trimsSeen) return;
+      this.trimsSeen = stamp;
+      if (this.trimsDirty) return;   // não atropela o que ele está mexendo agora
+      this.trims.clear();
+      this.trimsSavedAt = fresh ? rec.saved_at : null;
+      if (fresh) {
+        (rec.trims || []).forEach((t) => this.trims.set(t.id, {
+          start_delta: Number(t.start_delta) || 0,
+          end_delta: Number(t.end_delta) || 0,
+          beat: t.beat || '',
+          quote: t.quote || '',
+        }));
+      }
+      this.renderSegments();
+      this.renderTrims();
+    }
+
+    showEmpty(isEmpty) {
+      this.els.empty.hidden = !isEmpty;
+      this.els.review.hidden = isEmpty;
+      if (isEmpty && !this.els.video.paused) this.els.video.pause();
+    }
+
+    get draftKey() {
+      return `preview:marks:${(this.data && this.data.edit_dir) || ''}:${this.cfg.phase}:${this.mediaKey}`;
+    }
+
+    loadMedia(rel, info, key) {
+      const { video } = this.els;
+      const hadMedia = Boolean(this.mediaKey);
+      const resumeAt = hadMedia ? this.now() : 0;
+      const wasPlaying = hadMedia && !video.paused;
+      const hadDirtyMarks = this.dirty && this.marks.length > 0;
+      this.mediaKey = key;
+      this.candidateKey = null;
+      this.rel = rel;
+      this.info = info;
+      this.els.videoMsg.hidden = true;
+      this.pendingResume = hadMedia ? { time: resumeAt, play: wasPlaying } : null;
+      video.src = mediaUrl(rel, info);
+      video.load();
+      if (this.cfg.phase === 'final') {
+        this.els.download.hidden = false;
+        this.els.download.href = mediaUrl(rel, info);
+        this.els.download.setAttribute('download', rel.split('/').pop());
+      }
+      this.stripUrl = '';
+      this.waveUrl = '';
+      this.showEmpty(false);
+
+      // marks: keep unsent ones, drop the ones the agent already received
+      if (hadMedia) {
+        if (!hadDirtyMarks) { this.marks = []; this.dirty = false; this.marksSavedAt = null; }
+        this.pendingIn = null;
+        this.closeNote();
+        toast(this.cfg.reloadedMsg + (hadDirtyMarks ? ' Confira suas marcações antes de salvar.' : ''));
+      } else {
+        this.restoreMarks();
+      }
+      this.renderMarks();
+      this.renderBanner();
+      requestAnimationFrame(() => { this.renderRuler(); this.loadStrips(); });
+    }
+
+    restoreMarks() {
+      const saved = this.data && this.data.saved && this.data.saved.marks;
+      const draft = store.get(this.draftKey);
+      if (draft && Array.isArray(draft.marks)) {
+        this.marks = draft.marks;
+        this.dirty = true;
+        return;
+      }
+      if (saved && saved.phase === this.cfg.phase && Array.isArray(saved.marks) && parseMs(saved.saved_at) >= this.info.mtime * 1000 - 1) {
+        this.marks = saved.marks.map((m) => ({ in: m.in, out: m.out, note: m.note || '', ...(m.kind === 'motion' ? { kind: 'motion' } : {}) }));
+        this.dirty = false;
+        this.marksSavedAt = saved.saved_at;
+      }
+    }
+
+    onMetadata() {
+      const { video } = this.els;
+      const tlDur = this.data && this.data.timeline ? Number(this.data.timeline.duration) : 0;
+      this.duration = isFinite(video.duration) && video.duration > 0 ? video.duration : tlDur;
+      this.els.duration.textContent = fmtTime(this.duration);
+      if (video.videoWidth && video.videoHeight) {
+        this.els.frame.style.setProperty('--ar', `${video.videoWidth} / ${video.videoHeight}`);
+        this.els.review.classList.toggle('is-horizontal', video.videoWidth > video.videoHeight * 1.05);
+      }
+      if (this.pendingResume) {
+        const { time, play } = this.pendingResume;
+        this.pendingResume = null;
+        video.currentTime = clamp(time, 0, Math.max(0, this.duration - 1 / this.fps));
+        if (play) video.play().catch(() => {});
+      }
+      this.renderSegments();
+      this.renderLayers();
+      this.renderRuler();
+      this.renderMarks();
+      this.loadStrips();
+      this.renderTime();
+    }
+
+    onVideoError() {
+      if (!this.mediaKey) return;
+      this.els.videoMsg.hidden = false;
+      this.els.videoMsg.textContent = 'Não consegui abrir o vídeo. Se o agente ainda está gerando, ele aparece aqui em instantes.';
+      const failedKey = this.mediaKey;
+      setTimeout(() => {
+        if (this.mediaKey === failedKey) { this.mediaKey = null; this.candidateKey = failedKey; }
+      }, 2500);
+    }
+
+    // -- playback
+
+    now() {
+      if (this.scrubbing) return this.scrubTime;
+      if (this.seekTarget !== null) return this.seekTarget;
+      return this.els.video.currentTime || 0;
+    }
+
+    togglePlay() {
+      const { video } = this.els;
+      if (!this.mediaKey) return;
+      if (video.paused || video.ended) {
+        if (video.ended || video.currentTime >= this.duration - 0.05) video.currentTime = 0;
+        video.play().catch(() => {});
+      } else {
+        video.pause();
+      }
+    }
+
+    seek(t) {
+      const { video } = this.els;
+      if (!this.duration) return;
+      const target = clamp(t, 0, Math.max(0, this.duration - 0.001));
+      this.seekTarget = target;
+      if (!video.seeking) video.currentTime = target;
+      this.renderTime();
+    }
+
+    onSeeked() {
+      const { video } = this.els;
+      if (this.seekTarget !== null && Math.abs(video.currentTime - this.seekTarget) > 0.0005) {
+        video.currentTime = this.seekTarget;
+        return;
+      }
+      this.seekTarget = null;
+      this.renderTime();
+    }
+
+    stepFrames(dir) {
+      const { video } = this.els;
+      video.pause();
+      const f = this.fps || 30;
+      const idx = Math.round(this.now() * f);
+      this.seek((idx + dir) / f + 0.0005);
+    }
+
+    jump(dir) {
+      this.seek(this.now() + dir);
+    }
+
+    startLoop() {
+      if (this.rafOn) return;
+      this.rafOn = true;
+      const loop = () => {
+        this.renderTime();
+        if (!this.els.video.paused || this.scrubbing) requestAnimationFrame(loop);
+        else this.rafOn = false;
+      };
+      requestAnimationFrame(loop);
+    }
+
+    // -- scrubbing
+
+    timeAtX(clientX) {
+      const rect = this.els.timeline.getBoundingClientRect();
+      return clamp((clientX - rect.left) / Math.max(1, rect.width), 0, 1) * this.duration;
+    }
+
+    segmentAt(t) {
+      return this.segments.find((s) => t >= s.out_start - 1e-3 && t < s.out_end) || null;
+    }
+
+    onPointerDown(e) {
+      if (e.button !== 0 || !this.duration) return;
+      e.preventDefault();
+      const stamp = performance.now();
+      const isDouble = this.lastDown && stamp - this.lastDown.t < 400 && Math.abs(e.clientX - this.lastDown.x) < 8;
+      this.lastDown = isDouble ? null : { t: stamp, x: e.clientX };
+      if (isDouble) {
+        const seg = this.segmentAt(this.timeAtX(e.clientX));
+        if (seg) { this.markSegment(seg); return; }
+      }
+      this.els.timeline.setPointerCapture(e.pointerId);
+      this.scrubbing = true;
+      this.resumeAfterScrub = !this.els.video.paused;
+      this.els.video.pause();
+      this.scrubTime = this.timeAtX(e.clientX);
+      this.seek(this.scrubTime);
+      this.startLoop();
+    }
+
+    onPointerMove(e) {
+      if (!this.scrubbing) return;
+      this.scrubTime = this.timeAtX(e.clientX);
+      this.seek(this.scrubTime);
+    }
+
+    onPointerUp() {
+      if (!this.scrubbing) return;
+      this.scrubbing = false;
+      this.seek(this.scrubTime);
+      if (this.resumeAfterScrub) this.els.video.play().catch(() => {});
+    }
+
+    // -- rendering
+
+    pct(t) {
+      return this.duration ? `${clamp((t / this.duration) * 100, 0, 100)}%` : '0%';
+    }
+
+    renderTime() {
+      const t = this.now();
+      this.els.time.textContent = fmtTime(t);
+      this.els.playhead.style.left = this.pct(t);
+      this.followPlayhead(t);
+      if (this.pendingIn !== null || this.noteDraft) {
+        const a = this.noteDraft ? this.noteDraft.in : Math.min(this.pendingIn, t);
+        const b = this.noteDraft ? this.noteDraft.out : Math.max(this.pendingIn, t);
+        this.els.selection.hidden = false;
+        this.els.selection.style.left = this.pct(a);
+        this.els.selection.style.width = this.duration ? `${((b - a) / this.duration) * 100}%` : '0';
+      } else {
+        this.els.selection.hidden = true;
+      }
+      let idx = -1;
+      for (let i = 0; i < this.segments.length; i += 1) {
+        const s = this.segments[i];
+        if (t >= s.out_start - 1e-3 && t < s.out_end) { idx = i; break; }
+      }
+      if (idx === -1 && this.segments.length && t >= this.segments[this.segments.length - 1].out_start) idx = this.segments.length - 1;
+      if (idx !== this.currentSeg) {
+        this.currentSeg = idx;
+        this.els.segments.querySelectorAll('.seg-block').forEach((b, i) => b.classList.toggle('is-current', i === idx));
+        const seg = this.segments[idx];
+        this.els.now.textContent = '';
+        if (seg) {
+          const label = seg.beat || `Trecho ${idx + 1}`;
+          this.els.now.append(el('b', { text: label }), seg.quote ? `“${seg.quote}”` : '');
+          this.els.now.title = seg.quote || '';
+        }
+      }
+      const items = this.els.marksList.children;
+      this.marks.forEach((m, i) => { if (items[i]) items[i].classList.toggle('is-current', t >= m.in && t <= m.out); });
+    }
+
+    renderRuler() {
+      const ruler = this.els.ruler;
+      ruler.textContent = '';
+      const width = this.els.timeline.clientWidth;
+      if (!this.duration || !width) return;
+      const steps = [0.5, 1, 2, 5, 10, 15, 30, 60, 120, 300];
+      const pxPerSec = width / this.duration;
+      const step = steps.find((s) => s * pxPerSec >= 90) || 600;
+      const minor = step / (step >= 10 ? 5 : 2);
+      const frag = document.createDocumentFragment();
+      for (let t = 0; t <= this.duration + 1e-6; t += minor) {
+        const isMajor = Math.abs(t / step - Math.round(t / step)) < 1e-6;
+        const tick = el('div', { class: isMajor ? 'tick' : 'tick minor' });
+        tick.style.left = this.pct(t);
+        if (isMajor && (this.duration - t) * pxPerSec > 28) tick.textContent = fmtRuler(t, step);
+        frag.append(tick);
+      }
+      ruler.append(frag);
+    }
+
+    renderSegments() {
+      const box = this.els.segments;
+      box.textContent = '';
+      this.currentSeg = -2;
+      if (!this.duration) return;
+      const segs = this.segments.length ? this.segments : [{ out_start: 0, out_end: this.duration, beat: 'Vídeo inteiro', quote: '' }];
+      segs.forEach((s, i) => {
+        const label = s.beat || `Trecho ${i + 1}`;
+        const block = el('div', {
+          class: 'seg-block',
+          title: `${label} · ${fmtTime(s.out_start)} → ${fmtTime(s.out_end)}${s.quote ? `\n“${s.quote}”` : ''}\n2 cliques marcam este trecho inteiro`,
+        }, el('span', { class: 'seg-beat', text: label }), s.quote ? el('span', { class: 'seg-quote', text: firstWords(s.quote, 6) }) : null);
+        if (s.id) block.dataset.segId = s.id;
+        const tr = s.id ? this.trimOf(s.id) : null;
+        if (tr && (tr.start_delta || tr.end_delta)) block.classList.add('is-trimmed');
+        this.placeBlock(block, s, tr ? tr.start_delta : 0, tr ? tr.end_delta : 0);
+        this.addHandles(block, s);
+        box.append(block);
+      });
+      this.renderTime();
+    }
+
+    renderLayers() {
+      if (this.cfg.phase !== 'final') return;
+      const box = this.els.layers;
+      box.textContent = '';
+      const ed = this.data && this.data.edit_data;
+      if (!ed || !this.duration) { box.hidden = true; return; }
+      const items = [];
+      if (ed.hook && ed.hook.enabled !== false && ed.hook.end > ed.hook.start) items.push({ start: ed.hook.start, end: ed.hook.end, label: 'Gancho' });
+      const insertLabel = { split_top: 'Imagem em cima', split_bottom: 'Imagem embaixo', full: 'Tela cheia', pip: 'Janela' };
+      if (ed.edit_type === TV_ID) { insertLabel.split_top = 'Fundo'; insertLabel.split_bottom = 'Fundo'; }
+      (ed.inserts || []).forEach((ins) => {
+        if (ins.end > ins.start) items.push({ start: ins.start, end: ins.end, label: insertLabel[ins.type] || 'Imagem' });
+      });
+      if (ed.cta && ed.cta.enabled !== false) {
+        const dur = Number(ed.cta.duration) || 2.5;
+        const start = ed.cta.start === null || ed.cta.start === undefined ? this.duration - dur : Number(ed.cta.start);
+        items.push({ start, end: Math.min(this.duration, start + dur), label: 'Chamada' });
+      }
+      box.hidden = items.length === 0;
+      items.forEach((it) => {
+        const pill = el('div', { class: 'layer-pill', text: it.label, title: `${it.label} · ${fmtTime(it.start)} → ${fmtTime(it.end)}` });
+        pill.style.left = this.pct(it.start);
+        pill.style.width = `max(6px, ${((it.end - it.start) / this.duration) * 100}%)`;
+        box.append(pill);
+      });
+    }
+
+    loadStrips() {
+      if (!this.rel || !this.info || !this.active) return;
+      const width = this.els.timeline.clientWidth;
+      if (!width) return;
+      const dpr = clamp(window.devicePixelRatio || 1, 1, 2);
+      const { video } = this.els;
+      const aspect = video.videoWidth && video.videoHeight ? video.videoWidth / video.videoHeight : 9 / 16;
+      const stripH = this.els.strip.clientHeight || 64;
+      const thumbW = stripH * aspect;
+      const n = clamp(Math.ceil(width / thumbW / 4) * 4, 4, 160);
+      const h = clamp(Math.round((stripH * dpr) / 16) * 16, 32, 192);
+      const ver = versionOf(this.info);
+      const file = encodeURIComponent(this.rel);
+      const stripUrl = `/api/filmstrip?file=${file}&n=${n}&h=${h}&v=${ver}`;
+      if (stripUrl !== this.stripUrl) {
+        this.stripUrl = stripUrl;
+        const { strip, stripImg } = this.els;
+        strip.classList.add('is-loading');
+        const img = new Image();
+        img.onload = () => { if (this.stripUrl === stripUrl) { stripImg.src = stripUrl; strip.classList.remove('is-loading', 'is-empty'); } };
+        img.onerror = () => { if (this.stripUrl === stripUrl) { strip.classList.remove('is-loading'); strip.classList.add('is-empty'); } };
+        img.src = stripUrl;
+      }
+      const w = clamp(Math.round((width * dpr) / 250) * 250, 500, 4000);
+      const waveUrl = `/api/waveform?file=${file}&w=${w}&h=104&v=${ver}`;
+      if (waveUrl !== this.waveUrl) {
+        this.waveUrl = waveUrl;
+        const { wave, waveFill } = this.els;
+        wave.classList.add('is-loading');
+        const img = new Image();
+        img.onload = () => {
+          if (this.waveUrl !== waveUrl) return;
+          waveFill.style.webkitMaskImage = `url("${waveUrl}")`;
+          waveFill.style.maskImage = `url("${waveUrl}")`;
+          wave.classList.remove('is-loading');
+          wave.classList.add('is-ready');
+        };
+        img.onerror = () => { if (this.waveUrl === waveUrl) wave.classList.remove('is-loading'); };
+        img.src = waveUrl;
+      }
+    }
+
+    // -- marks
+
+    setIn() {
+      if (!this.mediaKey) return;
+      this.closeNote();
+      this.pendingIn = this.now();
+      this.els.pending.hidden = false;
+      this.els.pending.textContent = `Início em ${fmtTime(this.pendingIn)}. Agora vá até o fim do trecho e marque o fim.`;
+      this.renderTime();
+    }
+
+    setOut() {
+      if (!this.mediaKey) return;
+      const t = this.now();
+      let a = this.pendingIn;
+      let b = t;
+      let auto = false;
+      if (a === null) { a = Math.max(0, t - 1); auto = true; }
+      if (b < a) [a, b] = [b, a];
+      if (b - a < 0.1) b = Math.min(this.duration, a + 0.5);
+      this.els.video.pause();
+      this.pendingIn = null;
+      this.els.pending.hidden = true;
+      this.noteDraft = { in: Math.round(a * 1000) / 1000, out: Math.round(b * 1000) / 1000 };
+      this.els.noteRange.textContent = `${fmtTime(a)} → ${fmtTime(b)}`;
+      this.els.noteRange.append(el('small', { text: auto ? `${fmtSeconds(b - a)}, o segundo antes deste ponto` : fmtSeconds(b - a) }));
+      this.els.noteBox.hidden = false;
+      this.els.noteInput.value = '';
+      this.renderTime();
+      requestAnimationFrame(() => this.els.noteInput.focus());
+    }
+
+    markSegment(seg) {
+      if (!this.mediaKey) return;
+      this.els.video.pause();
+      this.closeNote();
+      this.pendingIn = null;
+      this.els.pending.hidden = true;
+      const a = Math.round(seg.out_start * 1000) / 1000;
+      const b = Math.round(Math.min(this.duration, seg.out_end) * 1000) / 1000;
+      this.seek(a);
+      this.noteDraft = { in: a, out: b };
+      this.els.noteRange.textContent = `${fmtTime(a)} → ${fmtTime(b)}`;
+      this.els.noteRange.append(el('small', { text: `${fmtSeconds(b - a)}, o trecho inteiro` }));
+      this.els.noteBox.hidden = false;
+      this.els.noteInput.value = '';
+      this.renderTime();
+      requestAnimationFrame(() => this.els.noteInput.focus());
+    }
+
+    closeNote() {
+      this.noteDraft = null;
+      this.els.noteBox.hidden = true;
+    }
+
+    cancelPending() {
+      const had = this.pendingIn !== null || !this.els.noteBox.hidden;
+      this.pendingIn = null;
+      this.els.pending.hidden = true;
+      this.closeNote();
+      this.renderTime();
+      return had;
+    }
+
+    motionHere() {
+      if (!this.mediaKey) return;
+      this.els.video.pause();
+      this.cancelPending();
+      const t = Math.round(this.now() * 1000) / 1000;
+      this.marks.push({ in: t, out: Math.round(Math.min(this.duration || t + 1, t + 1) * 1000) / 1000, note: '', kind: 'motion' });
+      this.marks.sort((x, y) => x.in - y.in || x.out - y.out);
+      this.markDirty();
+      toast(`Motion pedido em ${fmtTime(t)}. Se quiser, escreva o que mostrar e envie as marcações.`, 'ok', 3200);
+    }
+
+    addMark() {
+      if (!this.noteDraft) return;
+      this.marks.push({ ...this.noteDraft, note: this.els.noteInput.value.trim() });
+      this.marks.sort((x, y) => x.in - y.in || x.out - y.out);
+      this.closeNote();
+      this.els.noteInput.blur();
+      this.markDirty();
+    }
+
+    deleteMark(index) {
+      this.marks.splice(index, 1);
+      this.markDirty();
+    }
+
+    markDirty() {
+      this.dirty = true;
+      store.set(this.draftKey, { marks: this.marks });
+      store.dropOthers(`preview:marks:${(this.data && this.data.edit_dir) || ''}:${this.cfg.phase}:`, this.draftKey);
+      this.renderMarks();
+    }
+
+    renderMarks() {
+      const list = this.els.marksList;
+      list.textContent = '';
+      const overlay = this.els.overlay;
+      overlay.textContent = '';
+      this.marks.forEach((m, i) => {
+        const range = el('button', { class: 'mark-range', type: 'button', title: 'Ir para este trecho', text: `${fmtTime(m.in)} → ${fmtTime(m.out)}` });
+        range.addEventListener('click', () => { this.els.video.pause(); this.seek(m.in); });
+        const isMotion = m.kind === 'motion';
+        const note = el('input', {
+          class: 'mark-note', type: 'text', maxlength: '500',
+          placeholder: isMotion ? 'Opcional: o que mostrar (ex.: lista com os 3 itens)' : 'Sem nota. Escreva o que mudar',
+          'aria-label': `Nota da marcação ${i + 1}`,
+        });
+        note.value = m.note || '';
+        note.addEventListener('input', () => { m.note = note.value; this.dirty = true; store.set(this.draftKey, { marks: this.marks }); this.renderMarksState(); });
+        note.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === 'Escape') note.blur(); });
+        const del = el('button', { class: 'icon-btn small danger', type: 'button', 'aria-label': `Apagar marcação ${i + 1}`, title: 'Apagar marcação', html: TRASH_SVG });
+        del.addEventListener('click', () => this.deleteMark(i));
+        const num = el('span', { class: isMotion ? 'mark-num is-motion' : 'mark-num', text: isMotion ? '✦' : String(i + 1), title: isMotion ? 'Motion aqui' : '' });
+        list.append(el('li', { class: isMotion ? 'mark-item is-motion' : 'mark-item' }, num, range, note, del));
+
+        const region = el('div', { class: isMotion ? 'mark-region is-motion' : 'mark-region' }, el('span', { text: isMotion ? '✦' : String(i + 1) }));
+        region.style.left = this.pct(m.in);
+        region.style.width = this.duration ? `max(2px, ${((m.out - m.in) / this.duration) * 100}%)` : '0';
+        overlay.append(region);
+      });
+      this.els.marksEmpty.hidden = this.marks.length > 0;
+      this.els.markCount.textContent = this.marks.length ? `(${this.marks.length})` : '';
+      this.renderMarksState();
+      this.renderTime();
+    }
+
+    renderMarksState() {
+      const st = this.els.marksState;
+      st.classList.remove('is-dirty', 'is-saved');
+      if (this.dirty) {
+        st.textContent = this.marks.length ? 'Não enviadas ainda' : 'Alteração não enviada';
+        st.classList.add('is-dirty');
+      } else if (this.marksSavedAt) {
+        st.textContent = `Enviadas às ${fmtClock(this.marksSavedAt)}`;
+        st.classList.add('is-saved');
+      } else {
+        st.textContent = '';
+      }
+      this.els.saveMarks.disabled = !this.dirty;
+      this.els.saveMarks.classList.toggle('attention', this.dirty && this.marks.length > 0);
+    }
+
+    async saveMarks() {
+      if (!this.dirty) return;
+      if (!this.els.noteBox.hidden && this.noteDraft) this.addMark();
+      this.els.saveMarks.disabled = true;
+      try {
+        const res = await postJson('/api/marks', { phase: this.cfg.phase, marks: this.marks });
+        this.dirty = false;
+        this.marksSavedAt = res.saved.saved_at;
+        this.marks = res.saved.marks.map((m) => ({ ...m }));
+        store.del(this.draftKey);
+        if (this.data && this.data.saved) this.data.saved.marks = res.saved;
+        toast(this.marks.length ? handoff(this.cfg.marksSavedMsg, 'Marcações salvas.')
+          : handoff('Marcações apagadas. O agente foi avisado.', 'Marcações apagadas.'), 'ok', agentListening ? 3400 : 7000);
+        this.renderMarks();
+        this.renderBanner();
+      } catch (err) {
+        toast(err.message, 'error', 5000);
+        this.renderMarksState();
+      }
+    }
+
+    isApproved() {
+      const ap = this.data && this.data.saved && this.data.saved.approval;
+      return Boolean(ap && ap.approved && ap.phase === this.cfg.phase && this.info && parseMs(ap.saved_at) >= this.info.mtime * 1000 - 1);
+    }
+
+    async approve() {
+      if (this.approving || !this.mediaKey) return;
+      if (this.trimsDirty && this.trims.size) {
+        const go = await confirmBox({
+          title: 'Aprovar sem enviar os ajustes?',
+          text: 'Você puxou a borda de algum trecho e ainda não clicou em "Enviar ajustes". Se aprovar agora, o agente não vai esticar esses trechos.',
+          ok: 'Aprovar mesmo assim',
+        });
+        if (!go) return;
+      }
+      const savedMarks = this.data && this.data.saved && this.data.saved.marks;
+      if (this.dirty && this.marks.length) {
+        const go = await confirmBox({
+          title: 'Aprovar sem enviar as marcações?',
+          text: 'Você mexeu nas marcações e ainda não clicou em "Salvar marcações". Se aprovar agora, o agente não vai ver essas mudanças.',
+          ok: 'Aprovar mesmo assim',
+        });
+        if (!go) return;
+      } else if (savedMarks && savedMarks.phase === this.cfg.phase && Array.isArray(savedMarks.marks) && savedMarks.marks.length
+                 && parseMs(savedMarks.saved_at) >= this.info.mtime * 1000 - 1) {
+        const go = await confirmBox({
+          title: 'Aprovar com marcações enviadas?',
+          text: 'Você enviou marcações para esta versão e o agente ainda não mandou uma versão nova. Se aprovar, ele vai perguntar se ajusta antes de seguir.',
+          ok: 'Aprovar mesmo assim',
+        });
+        if (!go) return;
+      }
+      this.approving = true;
+      this.els.approve.disabled = true;
+      try {
+        const res = await postJson('/api/approve', {
+          phase: this.cfg.phase, note: this.els.approveNote.value.trim(),
+          file: this.rel, file_mtime: this.info.mtime, file_size: this.info.size,
+        });
+        if (this.data && this.data.saved) this.data.saved.approval = res.saved;
+        this.els.approveNote.value = '';
+        toast(handoff(this.cfg.approvedMsg, this.cfg.approvedShort), 'ok', agentListening ? 3400 : 7000);
+      } catch (err) {
+        toast(err.message, 'error', 5000);
+      } finally {
+        this.approving = false;
+        this.renderBanner();
+      }
+    }
+
+    renderBanner() {
+      const { banner, approve, approveNote } = this.els;
+      if (!this.info) return;
+      const approved = this.isApproved();
+      const savedMarks = this.data && this.data.saved && this.data.saved.marks;
+      banner.className = 'banner';
+      if (approved) {
+        const ap = this.data.saved.approval;
+        banner.hidden = false;
+        banner.classList.add('is-approved');
+        banner.textContent = this.cfg.approvedBanner(fmtClock(ap.saved_at), this.rel);
+      } else if (!this.dirty && savedMarks && savedMarks.phase === this.cfg.phase && savedMarks.marks.length
+                 && parseMs(savedMarks.saved_at) >= this.info.mtime * 1000 - 1) {
+        banner.hidden = false;
+        banner.classList.add('is-info');
+        banner.textContent = this.cfg.marksBanner(fmtClock(savedMarks.saved_at));
+      } else {
+        banner.hidden = true;
+      }
+      approve.textContent = approved ? this.cfg.approvedLabel : this.cfg.approveLabel;
+      approve.classList.toggle('is-done', approved);
+      approve.disabled = approved || this.approving;
+      approveNote.hidden = approved;
+    }
+
+    // -- keyboard
+
+    handleKey(e) {
+      if (this.els.review.hidden) return false;
+      const key = e.key;
+      if (e.code === 'Space' || key === ' ') { if (!e.repeat) this.togglePlay(); return true; }
+      if (key === 'ArrowLeft' || key === 'ArrowRight') {
+        const dir = key === 'ArrowLeft' ? -1 : 1;
+        if (e.shiftKey) this.jump(dir); else this.stepFrames(dir);
+        return true;
+      }
+      if (key === 'i' || key === 'I') { this.setIn(); return true; }
+      if (key === 'o' || key === 'O') { this.setOut(); return true; }
+      if (key === 'm' || key === 'M') { this.motionHere(); return true; }
+      if (key === '+' || key === '=') { this.zoomBy(1); return true; }
+      if (key === '-' || key === '_') { this.zoomBy(-1); return true; }
+      if (key === '0') { this.setZoom(1); return true; }
+      if (key === 'Escape') return this.cancelPending();
+      return false;
+    }
+  }
+
+  // ---------------------------------------------------------------- style tab
+
+  class StyleView {
+    constructor(section) {
+      this.section = section;
+      const q = (sel) => section.querySelector(sel);
+      this.els = {
+        empty: q('[data-style-empty]'), main: q('[data-style-main]'), types: q('[data-edit-types]'),
+        picker: q('[data-accent-picker]'), hex: q('[data-accent-hex]'), hexHelp: q('[data-hex-help]'), swatches: q('[data-swatches]'),
+        hookText: q('[data-hook-text]'), hookCount: q('[data-hook-count]'), hooks: q('[data-hook-styles]'), captions: q('[data-caption-styles]'),
+        elements: q('[data-elements]'), denoise: q('[data-denoise]'), music: q('[data-music]'), musicHelp: q('[data-music-help]'),
+        tvPos: q('[data-tv-pos]'), tvPosList: q('[data-tv-pos-list]'), tvNote: q('[data-tv-note]'),
+        cta: q('[data-cta-text]'), ctaHelp: q('[data-cta-help]'), note: q('[data-style-note]'),
+        pvImg: q('[data-pv-img]'), pvPlaceholder: q('[data-pv-placeholder]'), pvLabel: q('[data-pv-label]'), sampleNote: q('[data-sample-note]'),
+        summary: q('[data-summary]'), saved: q('[data-style-saved]'), save: q('[data-save-style]'),
+      };
+      this.data = null;
+      this.trilhas = null;
+      this.trilhasKey = '';
+      this.catalog = null;
+      this.catalogKey = '';
+      this.samplesKey = '';
+      this.picks = null;
+      this.baseKey = '';
+      this.dirty = false;
+      this.savedAt = null;
+      this.pv = 'hook';
+      this.hover = null;
+      this.saving = false;
+      this.bind();
+    }
+
+    bind() {
+      const { picker, hex, hookText, cta, note, save } = this.els;
+      picker.addEventListener('input', () => this.setAccent(picker.value, 'picker'));
+      hex.addEventListener('input', () => {
+        const norm = normalizeHex(hex.value);
+        const full = /^#?[0-9a-f]{6}$/i.test(hex.value.trim());
+        if (norm && full) { this.setAccent(norm, 'hex'); this.hexError(false); } else { this.hexError(hex.value.trim().length >= 7 || !/^#?[0-9a-f]*$/i.test(hex.value.trim())); }
+      });
+      hex.addEventListener('blur', () => {
+        const norm = normalizeHex(hex.value);
+        if (norm) this.setAccent(norm, 'blur');
+        else if (this.picks) hex.value = this.picks.accent;
+        this.hexError(false);
+      });
+      hookText.addEventListener('input', () => { this.picks.hook_text = hookText.value; this.touch(); this.renderCounter(); });
+      cta.addEventListener('input', () => { this.picks.cta_text = cta.value; this.touch(); });
+      note.addEventListener('input', () => { this.picks.note = note.value; this.touch(); });
+      save.addEventListener('click', () => this.save());
+      this.section.querySelectorAll('[data-pv]').forEach((b) => b.addEventListener('click', () => { this.pv = b.dataset.pv; this.renderPreview(); }));
+      SWATCHES.forEach((c) => {
+        const sw = el('button', { class: 'swatch', type: 'button', title: c, 'aria-label': `Usar a cor ${c}`, 'aria-pressed': 'false', style: { background: c } });
+        sw.addEventListener('click', () => this.setAccent(c, 'swatch'));
+        this.els.swatches.append(sw);
+      });
+    }
+
+    get draftKey() { return `preview:style:${(this.data && this.data.edit_dir) || ''}`; }
+
+    update(data) {
+      this.data = data;
+      const cat = data.catalog;
+      const usable = cat && ((cat.caption_styles || []).length || (cat.hook_styles || []).length || (cat.edit_types || []).length);
+      this.els.empty.hidden = Boolean(usable);
+      this.els.main.hidden = !usable;
+      if (!usable) return;
+
+      const catalogKey = JSON.stringify(cat);
+      const catalogChanged = catalogKey !== this.catalogKey;
+      if (catalogChanged) { this.catalogKey = catalogKey; this.catalog = cat; }
+
+      const saved = data.saved && data.saved.style;
+      if (saved && saved.saved_at) this.savedAt = saved.saved_at;
+      const base = this.basePicks(data);
+      const baseKey = JSON.stringify(base);
+      if (!this.picks) {
+        const draft = store.get(this.draftKey);
+        if (draft && draft.picks && draft.base === baseKey) { this.picks = this.sanitize(draft.picks); this.dirty = true; } else { this.picks = base; }
+        this.baseKey = baseKey;
+        this.renderAll();
+      } else if (baseKey !== this.baseKey) {
+        this.baseKey = baseKey;
+        if (!this.dirty) { this.picks = base; this.renderAll(); }
+        else if (catalogChanged) this.renderAll();
+      } else if (catalogChanged) {
+        this.picks = this.sanitize(this.picks);
+        this.renderAll();
+      }
+
+      const samplesRel = (data.state && data.state.samples) || 'samples/index.json';
+      const samplesInfo = data.files ? data.files[samplesRel] : null;
+      const samplesKey = JSON.stringify([data.samples, versionOf(samplesInfo)]);
+      if (samplesKey !== this.samplesKey) {
+        this.samplesKey = samplesKey;
+        this.renderCards();
+        this.renderPreview();
+      }
+      if (this.els.tvNote && this.picks && this.picks.edit_type === TV_ID) this.els.tvNote.textContent = this.tvNoteText();
+      this.renderSaved();
+    }
+
+    basePicks(data) {
+      const cat = data.catalog || {};
+      const d = cat.defaults || {};
+      const first = (list) => (list && list[0] ? list[0].id : null);
+      const p = {
+        edit_type: d.edit_type || first(cat.edit_types),
+        caption_style: d.caption_style || first(cat.caption_styles),
+        hook_style: d.hook_style || first(cat.hook_styles),
+        accent: normalizeHex(d.accent) || '#FFC400',
+        hook_text: '',
+        cta_text: '',
+        elements: {},
+        denoise: 'off',
+        music_mood: MUSIC_OFF,
+        music_file: '',
+        tela_verde_posicao: TV_POS_DEFAULT,
+        motion_qtd: 'poucas',
+        motion_tema: 'papelaria',
+        note: '',
+      };
+      (cat.elements || []).forEach((item) => { p.elements[item.id] = Boolean(item.default); });
+      const ed = data.edit_data;
+      if (ed && typeof ed === 'object') {
+        if (normalizeHex(ed.accent)) p.accent = normalizeHex(ed.accent);
+        if (ed.audio && ed.audio.enabled !== false && DENOISE_IDS.includes(ed.audio.denoise)) p.denoise = ed.audio.denoise;
+        if (ed.hook) { if (ed.hook.style) p.hook_style = ed.hook.style; if (ed.hook.text) p.hook_text = ed.hook.text; }
+        if (ed.captions && ed.captions.style) p.caption_style = ed.captions.style;
+        if (ed.cta && ed.cta.text) p.cta_text = ed.cta.text;
+        if (ed.edit_type === TV_ID) p.edit_type = TV_ID;
+        if (ed.tela_verde && TV_POS_IDS.includes(ed.tela_verde.posicao)) p.tela_verde_posicao = ed.tela_verde.posicao;
+        if (ed.motion && typeof ed.motion === 'object' && !Array.isArray(ed.motion)) {
+          if (MOTION_TEMA_IDS.includes(ed.motion.tema)) p.motion_tema = ed.motion.tema;
+          if (Number(ed.motion.quantidade) > 0) p.motion_qtd = Number(ed.motion.quantidade) <= 3 ? 'poucas' : 'algumas';
+        }
+        const fromEd = {
+          zoom_cuts: ed.camera && ed.camera.zoom_cuts, push_in: ed.camera && ed.camera.push_in,
+          flash: Array.isArray(ed.transitions) ? ed.transitions.some((t) => t.type === 'flash') : undefined,
+          sfx: ed.sfx && ed.sfx.enabled, music: ed.music && ed.music.enabled,
+          cta: ed.cta && ed.cta.enabled, disclaimer: ed.disclaimer && ed.disclaimer.enabled,
+          motion: motionOn(ed.motion),
+        };
+        Object.entries(fromEd).forEach(([k, v]) => { if (typeof v === 'boolean' && k in p.elements) p.elements[k] = v; });
+        const mu = ed.music;
+        if (mu && typeof mu === 'object') {
+          if (mu.enabled === false) p.music_mood = MUSIC_OFF;
+          else if (typeof mu.file === 'string' && mu.file) { p.music_mood = MUSIC_FILE; p.music_file = mu.file; }
+          else if (typeof mu.mood === 'string' && slugify(mu.mood)) p.music_mood = slugify(mu.mood);
+          else if (Object.keys(mu).length) p.music_mood = MUSIC_ASK;
+        }
+      }
+      const merge = (src) => {
+        if (!src || typeof src !== 'object') return;
+        ['edit_type', 'caption_style', 'hook_style'].forEach((k) => { if (src[k]) p[k] = src[k]; });
+        if (normalizeHex(src.accent)) p.accent = normalizeHex(src.accent);
+        ['hook_text', 'cta_text', 'note'].forEach((k) => { if (typeof src[k] === 'string') p[k] = src[k]; });
+        if (src.elements && typeof src.elements === 'object') Object.entries(src.elements).forEach(([k, v]) => { p.elements[k] = Boolean(v); });
+        if (DENOISE_IDS.includes(src.denoise)) p.denoise = src.denoise;
+        if (TV_POS_IDS.includes(src.tela_verde_posicao)) p.tela_verde_posicao = src.tela_verde_posicao;
+        if (MOTION_QTD_IDS.includes(src.motion_qtd)) p.motion_qtd = src.motion_qtd;
+        if (MOTION_TEMA_IDS.includes(src.motion_tema)) p.motion_tema = src.motion_tema;
+        if (typeof src.music_mood === 'string' && (src.music_mood === MUSIC_OFF || MOOD_ID_RE.test(src.music_mood))) {
+          p.music_mood = src.music_mood;
+          p.music_file = src.music_mood === MUSIC_FILE && typeof src.music_file === 'string' ? src.music_file : '';
+        } else if (src.elements && typeof src.elements.music === 'boolean') {
+          // saved before the Trilha choice existed: keep "com trilha" without inventing a source
+          if (!src.elements.music) p.music_mood = MUSIC_OFF;
+          else if (p.music_mood === MUSIC_OFF) p.music_mood = MUSIC_ASK;
+        }
+      };
+      merge(data.state && data.state.style);
+      merge(data.saved && data.saved.style);
+      return this.sanitize(p, cat);
+    }
+
+    sanitize(p, cat = this.catalog || {}) {
+      const ids = (list) => (list || []).map((x) => x.id);
+      const fix = (value, list, fallback) => (ids(list).includes(value) ? value : (fallback && ids(list).includes(fallback) ? fallback : (ids(list)[0] || null)));
+      const d = cat.defaults || {};
+      const out = { ...p, elements: { ...(p.elements || {}) } };
+      out.edit_type = fix(out.edit_type, cat.edit_types, d.edit_type);
+      out.caption_style = fix(out.caption_style, cat.caption_styles, d.caption_style);
+      out.hook_style = fix(out.hook_style, cat.hook_styles, d.hook_style);
+      out.accent = normalizeHex(out.accent) || '#FFC400';
+      ['hook_text', 'cta_text', 'note'].forEach((k) => { out[k] = typeof out[k] === 'string' ? out[k] : ''; });
+      (cat.elements || []).forEach((item) => { if (!(item.id in out.elements)) out.elements[item.id] = Boolean(item.default); });
+      out.denoise = DENOISE_IDS.includes(out.denoise) ? out.denoise : 'off';
+      out.tela_verde_posicao = TV_POS_IDS.includes(out.tela_verde_posicao) ? out.tela_verde_posicao : TV_POS_DEFAULT;
+      out.motion_qtd = MOTION_QTD_IDS.includes(out.motion_qtd) ? out.motion_qtd : 'poucas';
+      out.motion_tema = MOTION_TEMA_IDS.includes(out.motion_tema) ? out.motion_tema : 'papelaria';
+      out.music_file = typeof out.music_file === 'string' ? out.music_file : '';
+      if (typeof out.music_mood !== 'string' || !(out.music_mood === MUSIC_OFF || out.music_mood === MUSIC_ASK || MOOD_ID_RE.test(out.music_mood))) out.music_mood = MUSIC_OFF;
+      if (out.music_mood === MUSIC_FILE && !out.music_file) out.music_mood = MUSIC_OFF;
+      if (out.music_mood !== MUSIC_FILE) out.music_file = '';
+      const t = this && this.trilhas;
+      if (t && t.ok) {
+        // a mood or a file that the library or the edit no longer has: still "com trilha", source to choose again
+        const moods = (t.moods || []).map((m) => m.id);
+        if (out.music_mood === MUSIC_FILE && !(t.edit_files || []).includes(out.music_file)) out.music_mood = MUSIC_ASK;
+        else if (![MUSIC_OFF, MUSIC_FILE, MUSIC_ASK].includes(out.music_mood) && !moods.includes(out.music_mood)) out.music_mood = MUSIC_ASK;
+        if (out.music_mood !== MUSIC_FILE) out.music_file = '';
+      }
+      if ('music' in out.elements || out.music_mood !== MUSIC_OFF) out.elements.music = out.music_mood !== MUSIC_OFF;
+      return out;
+    }
+
+    setTrilhas(t) {
+      const key = JSON.stringify(t);
+      if (key === this.trilhasKey) return;
+      this.trilhasKey = key;
+      this.trilhas = t;
+      if (!this.picks || !this.catalog) return;
+      this.picks = this.sanitize(this.picks);
+      this.renderMusic();
+      this.renderSummary();
+    }
+
+    touch() {
+      this.dirty = true;
+      store.set(this.draftKey, { picks: this.picks, base: this.baseKey });
+      this.renderSummary();
+      this.renderSaved();
+    }
+
+    // -- rendering
+
+    renderAll() {
+      const { hookText, cta, note } = this.els;
+      this.renderTypes();
+      this.renderCards();
+      this.renderElements();
+      this.renderMusic();
+      this.renderDenoise();
+      hookText.value = this.picks.hook_text || '';
+      cta.value = this.picks.cta_text || '';
+      note.value = this.picks.note || '';
+      this.setAccent(this.picks.accent, 'init');
+      this.renderCounter();
+      this.renderPreview();
+      this.renderSummary();
+      this.renderSaved();
+    }
+
+    renderTypes() {
+      const box = this.els.types;
+      box.textContent = '';
+      (this.catalog.edit_types || []).forEach((t) => {
+        const schema = el('span', { class: t.id === TV_ID ? `schema tv pos-${this.picks.tela_verde_posicao}` : 'schema', 'aria-hidden': 'true' });
+        if (t.id === 'split_top') schema.append(el('span', { class: 'band' }), el('span', { class: 'person' }));
+        else if (t.id === 'split_bottom') schema.append(el('span', { class: 'person' }), el('span', { class: 'band' }));
+        else schema.append(el('span', { class: 'person' }));
+        const card = el('button', {
+          class: 'type-card', type: 'button', role: 'radio', 'aria-checked': String(this.picks.edit_type === t.id), 'data-id': t.id,
+          'aria-label': t.desc ? `${t.label || t.id}. ${t.desc}` : (t.label || t.id),
+        },
+          schema, el('span', { class: 'tc-text' }, el('strong', { text: t.label || t.id }), t.desc ? el('span', { class: 'tc-desc', text: t.desc }) : null));
+        card.addEventListener('click', () => { this.picks.edit_type = t.id; this.syncChecked(box, t.id); this.renderTvPos(); this.touch(); });
+        box.append(card);
+      });
+      this.renderTvPos();
+    }
+
+    tvAvailable() {
+      return (this.catalog.edit_types || []).some((t) => t.id === TV_ID);
+    }
+
+    tvPosLabel() {
+      const pos = TV_POSITIONS.find((x) => x.id === this.picks.tela_verde_posicao) || TV_POSITIONS[1];
+      return pos.label;
+    }
+
+    tvNoteText() {
+      // the inserts already planned stay in edit_data: in tela verde the split ones become the background by themselves
+      const ed = this.data && this.data.edit_data;
+      const list = ed && Array.isArray(ed.inserts) ? ed.inserts : [];
+      const n = list.filter((x) => x && (x.type === 'split_top' || x.type === 'split_bottom')).length;
+      if (n === 1) return 'A imagem ou vídeo já planejado vai para o fundo, atrás de você. Não precisa mudar nada.';
+      if (n > 1) return `As ${n} imagens e vídeos já planejados vão para o fundo, atrás de você. Não precisa mudar nada.`;
+      return 'As imagens e vídeos da edição vão para o fundo, atrás de você.';
+    }
+
+    renderTvPos() {
+      const { tvPos, tvPosList, tvNote } = this.els;
+      if (!tvPos || !tvPosList) return;
+      const on = this.picks.edit_type === TV_ID && this.tvAvailable();
+      tvPos.hidden = !on;
+      tvPosList.textContent = '';
+      if (tvNote) tvNote.textContent = on ? this.tvNoteText() : '';
+      if (!on) return;
+      TV_POSITIONS.forEach((pos) => {
+        const mini = el('span', { class: `schema tv pos-${pos.id}`, 'aria-hidden': 'true' }, el('span', { class: 'person' }));
+        const card = el('button', {
+          class: 'type-card tv-pos-card', type: 'button', role: 'radio', 'data-id': pos.id,
+          'aria-checked': String(this.picks.tela_verde_posicao === pos.id), 'aria-label': `${pos.label}. ${pos.desc}`,
+        }, mini, el('span', { class: 'tc-text' }, el('strong', { text: pos.label }), el('span', { class: 'tc-desc', text: pos.desc })));
+        card.addEventListener('click', () => {
+          this.picks.tela_verde_posicao = pos.id;
+          this.syncChecked(tvPosList, pos.id);
+          const main = this.els.types.querySelector(`[data-id="${TV_ID}"] .schema`);
+          if (main) main.className = `schema tv pos-${pos.id}`;
+          this.touch();
+        });
+        tvPosList.append(card);
+      });
+    }
+
+    sampleUrl(kind, id) {
+      const idx = this.data && this.data.samples;
+      const file = idx && idx[kind] && idx[kind][id];
+      if (!file) return null;
+      const samplesRel = (this.data.state && this.data.state.samples) || 'samples/index.json';
+      const dir = samplesRel.includes('/') ? samplesRel.slice(0, samplesRel.lastIndexOf('/') + 1) : '';
+      const rel = file.startsWith('/') ? null : `${dir}${file}`;
+      if (!rel) return null;
+      return mediaUrl(rel, this.data.files ? this.data.files[samplesRel] : null);
+    }
+
+    renderCards() {
+      if (!this.catalog || !this.picks) return;
+      const build = (box, list, kind, pickKey) => {
+        box.textContent = '';
+        (list || []).forEach((st) => {
+          const url = this.sampleUrl(kind, st.id);
+          const thumb = el('span', { class: 'thumb' });
+          if (url) {
+            const img = el('img', { src: url, alt: '', loading: 'lazy', draggable: 'false' });
+            img.addEventListener('error', () => { img.remove(); thumb.append(el('span', { class: 'thumb-fallback', text: st.label || st.id })); });
+            thumb.append(img);
+          } else {
+            thumb.append(el('span', { class: 'thumb-fallback', text: st.label || st.id }));
+          }
+          const card = el('button', {
+            class: 'style-card', type: 'button', role: 'radio', 'aria-checked': String(this.picks[pickKey] === st.id),
+            'data-id': st.id, title: st.desc || '',
+            'aria-label': [st.label || st.id, kind === 'caption' && st.animated ? 'animada' : '', st.desc || ''].filter(Boolean).join('. '),
+          },
+          kind === 'caption' && st.animated ? el('span', { class: 'badge', text: 'Animada' }) : null,
+          el('span', { class: 'check', html: CHECK_SVG }),
+          thumb,
+          el('span', { class: 'meta' }, el('strong', { text: st.label || st.id }), st.desc ? el('span', { text: st.desc }) : null));
+          card.addEventListener('click', () => {
+            this.picks[pickKey] = st.id;
+            this.pv = kind;
+            this.syncChecked(box, st.id);
+            this.touch();
+            this.renderPreview();
+          });
+          card.addEventListener('mouseenter', () => { this.hover = { kind, id: st.id }; this.renderPreview(); });
+          card.addEventListener('mouseleave', () => { this.hover = null; this.renderPreview(); });
+          box.append(card);
+        });
+      };
+      build(this.els.hooks, this.catalog.hook_styles, 'hook', 'hook_style');
+      build(this.els.captions, this.catalog.caption_styles, 'caption', 'caption_style');
+    }
+
+    renderElements() {
+      const box = this.els.elements;
+      box.textContent = '';
+      (this.catalog.elements || []).forEach((item) => {
+        if (item.id === 'music') return; // the "Trilha de fundo" section below is the control for it
+        const input = el('input', { class: 'switch', type: 'checkbox', 'data-id': item.id, 'aria-label': item.label || item.id });
+        input.checked = Boolean(this.picks.elements[item.id]);
+        input.addEventListener('change', () => {
+          this.picks.elements[item.id] = input.checked;
+          this.touch();
+          this.renderCtaState();
+          if (item.id === 'motion') this.renderMotionOptions();
+        });
+        box.append(el('label', { class: 'toggle' }, el('span', { text: item.label || item.id }), input));
+        if (item.id === 'motion') box.append(el('div', { class: 'motion-options', 'data-motion-options': '' }));
+      });
+      this.renderCtaState();
+      this.renderMotionOptions();
+    }
+
+    renderMotionOptions() {
+      const box = this.els.elements.querySelector('[data-motion-options]');
+      if (!box) return;
+      box.textContent = '';
+      box.hidden = !this.picks.elements.motion;
+      if (box.hidden) return;
+      const group = (title, opts, key) => {
+        const list = el('div', { class: 'motion-choice', role: 'radiogroup', 'aria-label': title });
+        opts.forEach((opt) => {
+          const card = el('button', {
+            class: 'type-card motion-card', type: 'button', role: 'radio', 'data-id': opt.id,
+            'aria-checked': String(this.picks[key] === opt.id), 'aria-label': `${opt.label}. ${opt.desc}`,
+          }, ...(opt.sw ? [el('span', { class: 'motion-sw', 'aria-hidden': 'true' },
+            ...opt.sw.map((c) => { const dot = el('i'); dot.style.background = c || this.picks.accent; return dot; }))] : []),
+          el('span', { class: 'tc-text' }, el('strong', { text: opt.label }), el('span', { class: 'tc-desc', text: opt.desc })));
+          card.addEventListener('click', () => { this.picks[key] = opt.id; this.syncChecked(list, opt.id); this.touch(); });
+          list.append(card);
+        });
+        return el('div', { class: 'motion-group' }, el('span', { class: 'motion-label', text: title }), list);
+      };
+      box.append(
+        group('Quantas', MOTION_QTD, 'motion_qtd'),
+        group('Visual', MOTION_TEMAS, 'motion_tema'),
+        el('p', { class: 'hint', text: 'O agente acha os momentos mais fortes da fala. Quer num lugar certo? Na aba do vídeo, pare no ponto e toque em "Motion aqui".' }),
+      );
+    }
+
+    musicOptions() {
+      const t = this.trilhas;
+      const opts = [{ key: MUSIC_OFF, mood: MUSIC_OFF, file: '', mark: '–', label: 'Sem trilha', desc: 'Só a sua voz e os efeitos.' }];
+      if (t && t.ok) {
+        (t.moods || []).forEach((m) => {
+          const count = `${m.count} ${m.count === 1 ? 'trilha' : 'trilhas'}`;
+          const fav = m.favorite_title ? ` · ★ ${m.favorite_title}` : ' · o agente escolhe a que encaixa melhor';
+          opts.push({ key: m.id, mood: m.id, file: '', mark: '♪', label: m.label || m.id, desc: `${count}${fav}`, title: m.when || '' });
+        });
+        (t.edit_files || []).forEach((f) => {
+          opts.push({ key: `${MUSIC_FILE}:${f}`, mood: MUSIC_FILE, file: f, mark: '♫', label: 'Usar arquivo da pasta', desc: baseName(f), title: f });
+        });
+      }
+      return opts;
+    }
+
+    musicKey() {
+      return this.picks.music_mood === MUSIC_FILE ? `${MUSIC_FILE}:${this.picks.music_file}` : this.picks.music_mood;
+    }
+
+    musicLabel() {
+      const opt = this.musicOptions().find((o) => o.key === this.musicKey());
+      if (opt) return opt.mood === MUSIC_FILE ? `Arquivo ${opt.desc}` : opt.label;
+      if (this.picks.music_mood === MUSIC_ASK) return 'Com trilha, falta escolher';
+      return this.picks.music_mood === MUSIC_FILE ? `Arquivo ${baseName(this.picks.music_file)}` : this.picks.music_mood;
+    }
+
+    renderMusic() {
+      const box = this.els.music;
+      if (!box || !this.picks) return;
+      box.textContent = '';
+      const opts = this.musicOptions();
+      const current = this.musicKey();
+      if (current !== MUSIC_ASK && !opts.some((o) => o.key === current)) {
+        // chosen before the library list arrived: show it so the pick stays visible
+        opts.push({ key: current, mood: this.picks.music_mood, file: this.picks.music_file, mark: '♪',
+          label: this.picks.music_mood === MUSIC_FILE ? 'Usar arquivo da pasta' : this.picks.music_mood,
+          desc: this.picks.music_mood === MUSIC_FILE ? baseName(this.picks.music_file) : 'Conferindo a biblioteca…' });
+      }
+      opts.forEach((opt) => {
+        const card = el('button', {
+          class: 'type-card music-card', type: 'button', role: 'radio', 'aria-checked': String(opt.key === current),
+          'data-id': opt.key, title: opt.title || '', 'aria-label': `${opt.label}. ${opt.desc}`,
+        }, el('span', { class: 'music-mark', 'aria-hidden': 'true', text: opt.mark }),
+        el('span', { class: 'tc-text' }, el('strong', { text: opt.label }), el('span', { class: 'tc-desc', text: opt.desc })));
+        card.addEventListener('click', () => {
+          this.picks.music_mood = opt.mood;
+          this.picks.music_file = opt.file || '';
+          this.picks.elements.music = opt.mood !== MUSIC_OFF;
+          this.syncChecked(box, opt.key);
+          this.touch();
+        });
+        box.append(card);
+      });
+      const t = this.trilhas;
+      let help = 'Carregando a sua biblioteca de trilhas…';
+      if (t && !t.ok) help = 'Não deu para ler a biblioteca de trilhas agora. Você pode pedir a trilha na conversa.';
+      else if (t && t.error) help = `Problema na biblioteca de trilhas: ${t.error}`;
+      else if (t && !(t.moods || []).length) help = 'Sua biblioteca de trilhas ainda está vazia. Peça ao agente, por exemplo: "guarda essa música como trilha animada".';
+      else if (t) help = 'Cada clima usa a sua trilha favorita (★) ou a que encaixa melhor no tamanho do vídeo. A música fica baixinha por baixo da voz.';
+      if (current === MUSIC_ASK) help = `Você pediu trilha. Escolha o clima ou o arquivo (ou deixe assim e o agente pergunta). ${help}`;
+      this.els.musicHelp.textContent = help;
+    }
+
+    renderDenoise() {
+      const box = this.els.denoise;
+      box.textContent = '';
+      DENOISE.forEach((opt, level) => {
+        // little meter: the voice bar stays, the noise bars around it shrink with the level
+        const meter = el('span', { class: `noise-meter lv-${level}`, 'aria-hidden': 'true' },
+          el('i', { class: 'nz' }), el('i', { class: 'nz' }), el('i', { class: 'vc' }), el('i', { class: 'vc tall' }),
+          el('i', { class: 'vc' }), el('i', { class: 'nz' }), el('i', { class: 'nz' }));
+        const card = el('button', {
+          class: 'type-card noise-card', type: 'button', role: 'radio', 'aria-checked': String(this.picks.denoise === opt.id),
+          'data-id': opt.id, 'aria-label': `${opt.label}. ${opt.desc}`,
+        }, meter, el('span', { class: 'tc-text' }, el('strong', { text: opt.label }), el('span', { class: 'tc-desc', text: opt.desc })));
+        card.addEventListener('click', () => { this.picks.denoise = opt.id; this.syncChecked(box, opt.id); this.touch(); });
+        box.append(card);
+      });
+    }
+
+    renderCtaState() {
+      const hasCta = this.catalog && (this.catalog.elements || []).some((x) => x.id === 'cta');
+      const off = hasCta && !this.picks.elements.cta;
+      this.els.cta.disabled = off;
+      this.els.ctaHelp.textContent = off ? 'O card de chamada está desligado em Elementos.' : 'Deixe vazio para o agente sugerir.';
+    }
+
+    syncChecked(box, id) {
+      box.querySelectorAll('[role="radio"]').forEach((c) => c.setAttribute('aria-checked', String(c.dataset.id === id)));
+    }
+
+    setAccent(value, source) {
+      const norm = normalizeHex(value);
+      if (!norm || !this.picks) return;
+      const changed = norm !== this.picks.accent;
+      this.picks.accent = norm;
+      if (source !== 'picker') this.els.picker.value = norm.toLowerCase();
+      if (source !== 'hex') this.els.hex.value = norm;
+      this.els.swatches.querySelectorAll('.swatch').forEach((sw) => sw.setAttribute('aria-pressed', String(normalizeHex(sw.title) === norm)));
+      if (changed && source !== 'init') this.touch();
+      this.renderPreview();
+      this.renderSummary();
+    }
+
+    hexError(on) {
+      this.els.hex.classList.toggle('is-invalid', on);
+      this.els.hexHelp.classList.toggle('is-error', on);
+      this.els.hexHelp.textContent = on ? 'Use o formato #RRGGBB, por exemplo #FFC400.' : 'Formato #RRGGBB.';
+    }
+
+    renderCounter() {
+      const len = this.els.hookText.value.length;
+      this.els.hookCount.textContent = len ? `${len}/90` : '';
+    }
+
+    labelOf(list, id) {
+      const item = (list || []).find((x) => x.id === id);
+      return item ? item.label || item.id : id || 'nenhum';
+    }
+
+    renderPreview() {
+      if (!this.catalog || !this.picks) return;
+      this.section.querySelectorAll('[data-pv]').forEach((b) => {
+        const on = b.dataset.pv === this.pv;
+        b.classList.toggle('on', on);
+        b.setAttribute('aria-pressed', String(on));
+      });
+      const kind = this.hover ? this.hover.kind : this.pv;
+      const id = this.hover ? this.hover.id : this.picks[`${kind}_style`];
+      const url = this.sampleUrl(kind, id);
+      const list = kind === 'hook' ? this.catalog.hook_styles : this.catalog.caption_styles;
+      const { pvImg, pvPlaceholder, pvLabel, sampleNote } = this.els;
+      if (url) {
+        if (pvImg.getAttribute('src') !== url) pvImg.src = url;
+        pvImg.hidden = false;
+        pvPlaceholder.hidden = true;
+      } else {
+        pvImg.hidden = true;
+        pvPlaceholder.hidden = false;
+        pvLabel.textContent = this.labelOf(list, id);
+      }
+      const idx = this.data && this.data.samples;
+      const sampleAccent = idx && normalizeHex(idx.accent);
+      if (!idx) sampleNote.textContent = 'As amostras aparecem aqui quando o agente gerar.';
+      else if (sampleAccent && sampleAccent !== this.picks.accent) sampleNote.textContent = `A amostra usa a cor ${sampleAccent}. No vídeo entra a cor que você escolher.`;
+      else sampleNote.textContent = `${kind === 'hook' ? 'Gancho' : 'Legenda'} ${this.labelOf(list, id)} num quadro do seu vídeo.`;
+    }
+
+    renderSummary() {
+      if (!this.catalog || !this.picks) return;
+      const box = this.els.summary;
+      box.textContent = '';
+      const shown = (this.catalog.elements || []).filter((x) => x.id !== 'music');
+      const on = shown.filter((x) => this.picks.elements[x.id]).length;
+      const total = shown.length;
+      const rows = [
+        ['Tipo', this.labelOf(this.catalog.edit_types, this.picks.edit_type) + (this.picks.edit_type === TV_ID ? ` · ${this.tvPosLabel().toLowerCase()}` : '')],
+        ['Gancho', this.labelOf(this.catalog.hook_styles, this.picks.hook_style)],
+        ['Legenda', this.labelOf(this.catalog.caption_styles, this.picks.caption_style)],
+        ['Cor', [el('span', { class: 'chip', style: { background: this.picks.accent } }), this.picks.accent]],
+        ['Elementos', `${on} de ${total} ligados`],
+        ['Trilha', this.musicLabel()],
+        ['Ruído de fundo', (DENOISE.find((d) => d.id === this.picks.denoise) || DENOISE[0]).label],
+      ];
+      rows.forEach(([k, v]) => box.append(el('dt', { text: k }), el('dd', {}, v)));
+    }
+
+    renderSaved() {
+      const st = this.els.saved;
+      st.classList.remove('is-dirty', 'is-saved');
+      if (this.dirty) { st.textContent = 'Alterações não salvas'; st.classList.add('is-dirty'); }
+      else if (this.savedAt) { st.textContent = `Salvo às ${fmtClock(this.savedAt)}`; st.classList.add('is-saved'); }
+      else st.textContent = 'Nada salvo ainda';
+    }
+
+    async save() {
+      if (this.saving || !this.picks) return;
+      const hexNorm = normalizeHex(this.els.hex.value);
+      if (!hexNorm) { this.hexError(true); this.els.hex.focus(); toast('A cor precisa estar no formato #RRGGBB.', 'error'); return; }
+      this.setAccent(hexNorm, 'blur');
+      this.saving = true;
+      this.els.save.disabled = true;
+      try {
+        const body = {
+          edit_type: this.picks.edit_type, caption_style: this.picks.caption_style, hook_style: this.picks.hook_style,
+          accent: this.picks.accent, hook_text: String(this.picks.hook_text || '').trim(), cta_text: String(this.picks.cta_text || '').trim(),
+          elements: this.picks.elements, denoise: this.picks.denoise, note: String(this.picks.note || '').trim(),
+          music_mood: this.picks.music_mood || null,
+        };
+        if (this.picks.music_mood === MUSIC_FILE) body.music_file = this.picks.music_file;
+        if (this.picks.edit_type === TV_ID) body.tela_verde_posicao = this.picks.tela_verde_posicao;
+        if (this.picks.elements.motion) { body.motion_qtd = this.picks.motion_qtd; body.motion_tema = this.picks.motion_tema; }
+        const res = await postJson('/api/style', body);
+        this.dirty = false;
+        this.savedAt = res.saved.saved_at;
+        if (this.data && this.data.saved) this.data.saved.style = res.saved;
+        this.baseKey = JSON.stringify(this.basePicks(this.data));
+        store.del(this.draftKey);
+        toast(handoff('Estilo salvo. O agente já recebeu suas escolhas.', 'Estilo salvo.'), 'ok', agentListening ? 3400 : 7000);
+      } catch (err) {
+        toast(err.message, 'error', 5000);
+      } finally {
+        this.saving = false;
+        this.els.save.disabled = false;
+        this.renderSaved();
+      }
+    }
+  }
+
+  // ---------------------------------------------------------------- app shell
+
+  const App = {
+    data: null,
+    tab: null,
+    lastPhase: undefined,
+    lastMessage: null,
+    connected: null,
+    shownErrors: new Set(),
+    trilhasAt: 0,
+    trilhasBusy: false,
+
+    init() {
+      this.views = {
+        cut: new Review(document.getElementById('view-cut'), {
+          phase: 'cut',
+          approveLabel: 'Aprovar corte',
+          approvedLabel: 'Corte aprovado',
+          emptyTitle: 'O corte ainda está sendo feito…',
+          emptyText: 'Assim que o agente terminar, o vídeo aparece aqui sozinho. Não precisa recarregar a página.',
+          reloadedMsg: 'Novo corte carregado.',
+          marksSavedMsg: 'Marcações enviadas. O agente vai ajustar o corte.',
+          approvedMsg: 'Corte aprovado. O agente segue para o estilo.',
+          approvedShort: 'Corte aprovado.',
+          approvedBanner: (time) => `Você aprovou este corte às ${time}. O próximo passo é escolher o estilo.`,
+          marksBanner: (time) => `Marcações enviadas às ${time}. O corte novo aparece aqui quando o agente terminar.`,
+        }),
+        style: new StyleView(document.getElementById('view-style')),
+        final: new Review(document.getElementById('view-final'), {
+          phase: 'final',
+          approveLabel: 'Aprovar vídeo final',
+          approvedLabel: 'Vídeo final aprovado',
+          emptyTitle: 'O vídeo final ainda não foi montado',
+          emptyText: 'Primeiro aprove o corte e escolha o estilo. Quando o agente terminar, o vídeo final aparece aqui sozinho.',
+          reloadedMsg: 'Nova versão do vídeo final carregada.',
+          marksSavedMsg: 'Marcações enviadas. O agente vai ajustar o vídeo.',
+          approvedMsg: 'Vídeo final aprovado. Parabéns!',
+          approvedShort: 'Vídeo final aprovado. Parabéns!',
+          approvedBanner: (time, rel) => `Você aprovou o vídeo final às ${time}. O arquivo está em edit/${rel}.`,
+          marksBanner: (time) => `Marcações enviadas às ${time}. A nova versão aparece aqui quando o agente terminar.`,
+        }),
+      };
+      document.querySelectorAll('.tab').forEach((btn) => btn.addEventListener('click', () => this.setTab(btn.dataset.tab, true)));
+      document.getElementById('help-btn').addEventListener('click', () => this.openHelp());
+      document.addEventListener('keydown', (e) => this.onKey(e));
+      document.addEventListener('keyup', (e) => {
+        if ((e.code === 'Space' || e.key === ' ') && e.target && e.target.tagName === 'BUTTON' && this.activeReview()) e.preventDefault();
+      });
+      window.addEventListener('hashchange', () => { const t = HASH_TAB[location.hash]; if (t) this.setTab(t, true); });
+      const fromHash = HASH_TAB[location.hash];
+      this.setTab(fromHash || 'cut', Boolean(fromHash));
+      this.poll();
+    },
+
+    activeReview() {
+      const view = this.views[this.tab];
+      return view instanceof Review ? view : null;
+    },
+
+    setTab(tab, byUser) {
+      if (!this.views[tab]) return;
+      const changed = tab !== this.tab;
+      this.tab = tab;
+      if (byUser) this.userPicked = true;
+      document.querySelectorAll('.tab').forEach((btn) => btn.setAttribute('aria-selected', String(btn.dataset.tab === tab)));
+      ['cut', 'style', 'final'].forEach((name) => {
+        document.getElementById(`view-${name}`).hidden = name !== tab;
+        const view = this.views[name];
+        if (view instanceof Review) view.setActive(name === tab);
+      });
+      if (changed && location.hash !== TAB_HASH[tab]) history.replaceState(null, '', TAB_HASH[tab]);
+      if (changed) window.scrollTo(0, 0);
+    },
+
+    openHelp() {
+      const dialog = document.getElementById('help-dialog');
+      if (!dialog.open) dialog.showModal();
+    },
+
+    onKey(e) {
+      if (e.defaultPrevented || document.querySelector('dialog[open]')) return;
+      const typing = isTypingTarget(e.target);
+      if (e.key === '?' && !typing) { e.preventDefault(); this.openHelp(); return; }
+      if (typing || e.metaKey || e.ctrlKey || e.altKey) return;
+      const review = this.activeReview();
+      if (review && review.handleKey(e)) e.preventDefault();
+    },
+
+    async poll() {
+      try {
+        const res = await fetch('/api/state', { cache: 'no-store' });
+        if (!res.ok) throw new Error(String(res.status));
+        const data = await res.json();
+        this.setConnected(true);
+        this.apply(data);
+      } catch {
+        this.setConnected(false);
+      } finally {
+        setTimeout(() => this.poll(), POLL_MS);
+      }
+    },
+
+    setConnected(ok) {
+      if (ok === this.connected) return;
+      const was = this.connected;
+      this.connected = ok;
+      const line = document.getElementById('statusline');
+      line.classList.toggle('is-offline', !ok);
+      if (!ok) {
+        document.getElementById('status-text').textContent = 'Sem conexão com o preview. Ele ainda está rodando no terminal? Tentando de novo…';
+        document.getElementById('status-badge').hidden = true;
+        document.getElementById('status-meta').textContent = '';
+      } else if (was === false) {
+        this.lastMessage = null;
+        toast('Conexão com o preview de volta.');
+      }
+    },
+
+    apply(data) {
+      this.data = data;
+      if (data.token) previewToken = data.token;
+      agentListening = Boolean(data.watcher && data.watcher.alive);
+      const state = data.state || null;
+      const phase = state && state.phase ? state.phase : 'setup';
+
+      // tab follows the phase when the agent moves on
+      if (this.lastPhase === undefined) {
+        if (!this.userPicked) this.setTab(PHASE_TAB[phase] || 'cut', false);
+      } else if (phase !== this.lastPhase && PHASE_TAB[phase] && PHASE_TAB[phase] !== this.tab) {
+        this.setTab(PHASE_TAB[phase], false);
+        toast(`Etapa agora: ${PHASE_LABEL[phase] || phase}.`);
+      }
+      this.lastPhase = phase;
+
+      this.views.cut.update(data);
+      this.views.style.update(data);
+      this.views.final.update(data);
+      this.loadTrilhas();
+      this.renderStatus(state, phase);
+
+      Object.entries(data.errors || {}).forEach(([file, msg]) => {
+        const key = `${file}:${msg}`;
+        if (!this.shownErrors.has(key)) { this.shownErrors.add(key); toast(`Problema em ${file}: ${msg}`, 'error', 6000); }
+      });
+    },
+
+    // moods of the personal soundtrack library (read-only route, needs the preview token)
+    async loadTrilhas(force = false) {
+      if (this.trilhasBusy || (!force && Date.now() - this.trilhasAt < TRILHAS_MS) || !previewToken) return;
+      this.trilhasBusy = true;
+      try {
+        const res = await fetch('/api/trilhas', { cache: 'no-store', headers: { 'X-Preview-Token': previewToken } });
+        const body = await res.json().catch(() => ({}));
+        if (res.ok && body.ok) {
+          this.trilhasAt = Date.now();
+          this.views.style.setTrilhas(body);
+        } else {
+          this.trilhasAt = Date.now() - TRILHAS_MS + 2000; // try again soon (the server may have restarted)
+          if (!this.views.style.trilhas) this.views.style.setTrilhas({ ok: false });
+        }
+      } catch {
+        this.trilhasAt = Date.now() - TRILHAS_MS + 2000;
+      } finally {
+        this.trilhasBusy = false;
+      }
+    },
+
+    // saved_at of the approval, marks or style the person sent for what the agent is waiting on, or null
+    receivedAt(state, awaiting) {
+      const saved = (this.data && this.data.saved) || {};
+      const since = parseMs(state && state.updated_at);
+      if (awaiting === 'approval_cut' || awaiting === 'approval_final') {
+        const phase = awaiting === 'approval_cut' ? 'cut' : 'final';
+        const view = this.views[phase];
+        const ap = saved.approval;
+        if (view && view.isApproved() && parseMs(ap.saved_at) >= since) return ap.saved_at;
+        const mk = saved.marks;
+        if (view && view.info && mk && mk.phase === phase && Array.isArray(mk.marks) && mk.marks.length
+            && parseMs(mk.saved_at) >= view.info.mtime * 1000 - 1 && parseMs(mk.saved_at) >= since) return mk.saved_at;
+      } else if (awaiting === 'style' && saved.style && parseMs(saved.style.saved_at) >= since) {
+        return saved.style.saved_at;
+      }
+      return null;
+    },
+
+    renderStatus(state, phase) {
+      const project = document.getElementById('project-name');
+      const name = state && state.project ? state.project : '';
+      if (project.textContent !== name) { project.textContent = name; document.title = name ? `${name} · Preview da edição` : 'Preview da edição'; }
+
+      let awaiting = state ? state.awaiting : null;
+      const received = this.receivedAt(state, awaiting);
+      if (received) awaiting = null; // the person already acted: it is the agent's turn now
+      document.querySelectorAll('.tab').forEach((btn) => btn.classList.toggle('is-awaiting', AWAIT_TAB[awaiting] === btn.dataset.tab));
+
+      const line = document.getElementById('statusline');
+      const text = document.getElementById('status-text');
+      const badge = document.getElementById('status-badge');
+      const meta = document.getElementById('status-meta');
+      let message = state && state.message;
+      if (received) {
+        message = agentListening ? 'Recebido. O agente está trabalhando nisso.' : `Recebido. ${NUDGE}`;
+      }
+      if (!message) {
+        message = state ? {
+          setup: 'O agente está preparando a edição.',
+          cut: 'O agente está trabalhando no corte.',
+          style: 'Escolha o estilo do vídeo e salve.',
+          final: 'O agente está montando o vídeo final.',
+        }[phase] || 'O agente está trabalhando.' : 'Esperando o agente começar a edição.';
+      }
+      if (message !== this.lastMessage) {
+        text.textContent = message;
+        if (this.lastMessage !== null) { text.classList.remove('flash'); void text.offsetWidth; text.classList.add('flash'); }
+        this.lastMessage = message;
+      }
+      badge.hidden = !awaiting;
+      line.classList.toggle('is-awaiting', Boolean(awaiting));
+      line.classList.toggle('is-working', !awaiting);
+      const parts = [`Etapa: ${PHASE_LABEL[phase] || phase}`];
+      if (state && state.updated_at) { const clock = fmtClock(state.updated_at); if (clock) parts.push(`atualizado às ${clock}`); }
+      meta.textContent = parts.join(' · ');
+    },
+  };
+
+  document.addEventListener('DOMContentLoaded', () => App.init());
+})();