voxflow 1.15.1 → 1.15.3

package/lib/stage-ui/slice/template.js

@@ -231,6 +231,121 @@ function renderSliceStageHtml({ sourcePath, port }) {
     }
     .render-btn.completed:hover { filter: none; text-decoration: underline; }
 
+    /* Secondary (de-emphasised) render variant for "the other path". When the
+       user has no cached login, local becomes primary and cloud takes this
+       style; when they're logged in, local takes this style. The pair is
+       always visible — the emphasis just flips. */
+    .render-btn.secondary {
+      background: transparent; color: var(--text);
+      border-color: var(--border); font-weight: 500;
+    }
+    .render-btn.secondary:hover:not(:disabled) {
+      border-color: var(--accent); filter: none;
+    }
+    .render-btn.secondary.completed { color: var(--accent); }
+
+    /* Local-render mini-progress bar shown next to the local button while a
+       job is rendering. Sits inline with the button so the header doesn't
+       reflow. */
+    .render-local-progress {
+      display: inline-flex; align-items: center; gap: 6px;
+      font-size: 11px; color: var(--muted);
+      font-variant-numeric: tabular-nums;
+    }
+    .render-local-progress.hidden { display: none; }
+    .render-local-progress .bar {
+      width: 90px; height: 4px; border-radius: 2px;
+      background: var(--panel-2); overflow: hidden;
+      border: 1px solid var(--border);
+    }
+    .render-local-progress .bar > span {
+      display: block; height: 100%;
+      background: var(--accent);
+      transition: width 0.15s ease;
+    }
+
+    /* Toast that confirms the local mp4 was written. Persistent — user
+       dismisses with the close button. The "Open in Finder" link is a
+       file:// href; browser security may block click-to-open without a
+       prior user gesture, so we render it as a plain link. */
+    .local-render-toast {
+      position: fixed; right: 16px; bottom: 16px; z-index: 60;
+      max-width: 360px;
+      background: var(--panel); color: var(--text);
+      border: 1px solid var(--good); border-radius: 8px;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+      padding: 10px 12px;
+      font-size: 12px;
+      display: none; flex-direction: column; gap: 6px;
+    }
+    .local-render-toast.open { display: flex; }
+    .local-render-toast .toast-head {
+      display: flex; align-items: center; gap: 6px;
+      font-weight: 600; color: var(--good);
+    }
+    .local-render-toast .toast-head .grow { flex: 1; }
+    .local-render-toast .toast-head .close {
+      appearance: none; border: 0; background: transparent;
+      color: var(--muted); font-size: 16px; line-height: 1;
+      padding: 0 4px; cursor: pointer;
+    }
+    .local-render-toast .path {
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 11px; color: var(--muted); word-break: break-all;
+    }
+    .local-render-toast .actions { display: flex; gap: 8px; }
+    .local-render-toast .actions a, .local-render-toast .actions button {
+      appearance: none; cursor: pointer; font: inherit;
+      font-size: 11px; padding: 4px 8px; border-radius: 4px;
+      border: 1px solid var(--border); background: var(--panel-2);
+      color: var(--text); text-decoration: none;
+    }
+    .local-render-toast .actions a:hover,
+    .local-render-toast .actions button:hover { border-color: var(--accent); }
+
+    /* Inline-edit affordance — textarea replaces the caption / narration / title
+       text in place. Mirrors the original element's metrics so the card layout
+       doesn't jump when the user clicks to edit. */
+    .stage-card .editable {
+      cursor: text;
+      border-radius: 3px;
+      padding: 1px 3px; margin: -1px -3px;
+      transition: background 0.12s ease, outline 0.12s ease;
+    }
+    .stage-card .editable:hover {
+      background: rgba(0,0,0,0.04);
+      outline: 1px dashed rgba(0,0,0,0.2);
+    }
+    .stage-card[data-card-bg="dark"] .editable:hover {
+      background: rgba(255,255,255,0.06);
+      outline: 1px dashed rgba(255,255,255,0.25);
+    }
+    .stage-card textarea.inline-edit {
+      width: 100%; min-height: 1.6em;
+      font: inherit; color: inherit;
+      background: rgba(0,0,0,0.05);
+      border: 1px solid currentColor; border-radius: 3px;
+      padding: 2px 4px; margin: -2px -4px;
+      resize: none; outline: none;
+      box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 25%, transparent);
+    }
+    .stage-card[data-card-bg="dark"] textarea.inline-edit {
+      background: rgba(255,255,255,0.08);
+    }
+    .stage-card .inline-edit-err {
+      position: absolute; left: 10px; right: 10px; bottom: 10px;
+      background: var(--bad); color: white;
+      font-size: 10px; line-height: 1.3;
+      padding: 4px 6px; border-radius: 4px;
+      z-index: 5;
+    }
+    .stage-card .inline-edit-hint {
+      position: absolute; left: 10px; right: 10px; bottom: 4px;
+      font-size: 9px; color: var(--muted); letter-spacing: 0.04em;
+      text-align: center; pointer-events: none; opacity: 0.7;
+      z-index: 4;
+    }
+
     .render-modal-body { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 6px; }
     .render-modal-body .quota-line {
       display: flex; justify-content: space-between; align-items: baseline;
@@ -600,9 +715,17 @@ function renderSliceStageHtml({ sourcePath, port }) {
       <span class="dot" id="dot"></span>
       <span id="status-label">connecting…</span>
     </div>
-    <button class="render-btn" id="render-btn" type="button" aria-label="Render this deck to mp4 (cloud)">
-      <span class="icon">▶</span>
-      <span id="render-btn-label">Render mp4</span>
+    <span class="render-local-progress hidden" id="render-local-progress" aria-live="polite">
+      <span class="bar"><span id="render-local-progress-fill" style="width:0%"></span></span>
+      <span id="render-local-progress-label">0%</span>
+    </span>
+    <button class="render-btn" id="render-local-btn" type="button" aria-label="Render this deck to mp4 locally (no cloud, no quota)" title="Render locally with @remotion/renderer — no network, no quota">
+      <span class="icon">⬇</span>
+      <span id="render-local-btn-label">Render mp4 (local)</span>
+    </button>
+    <button class="render-btn secondary" id="render-btn" type="button" aria-label="Render this deck to mp4 (cloud)" title="Submit to cloud renderer — costs 200 quota">
+      <span class="icon">☁</span>
+      <span id="render-btn-label">Render mp4 (cloud)</span>
     </button>
     <button class="versions-btn" id="versions-btn" type="button" aria-label="Show version history" aria-expanded="false">
       <span class="icon">📚</span>
@@ -662,6 +785,21 @@ function renderSliceStageHtml({ sourcePath, port }) {
     <span>✏</span><span>Edit selection with AI</span>
   </button>
 
+  <div class="local-render-toast" id="local-render-toast" role="status" aria-live="polite">
+    <div class="toast-head">
+      <span>✓</span>
+      <span>Local render complete</span>
+      <span class="grow"></span>
+      <button class="close" id="local-render-toast-close" type="button" aria-label="Close">×</button>
+    </div>
+    <div class="path" id="local-render-toast-path"></div>
+    <div class="actions">
+      <a id="local-render-toast-open" href="#" target="_blank" rel="noopener">Open mp4</a>
+      <a id="local-render-toast-reveal" href="#">Open folder</a>
+      <button id="local-render-toast-copy" type="button">Copy path</button>
+    </div>
+  </div>
+
   <div class="modal-backdrop" id="render-modal" role="dialog" aria-modal="true" aria-labelledby="render-modal-title" hidden>
     <div class="modal">
       <div class="modal-header">
@@ -924,16 +1062,34 @@ function renderSliceStageHtml({ sourcePath, port }) {
           if (Array.isArray(card.title)) titleArr = card.title;
           else if (typeof card.title === 'string') titleArr = [card.title];
           else titleArr = ['(card ' + (i + 1) + ')'];
+          // Each title line is independently editable — saving rewrites the
+          // entire title[] array, so a click on line 0 mutates only that
+          // index and leaves the rest as-is.
           titleHtml = '<div class="title-text">'
-            + titleArr.map(function (line) {
-                return '<span class="line">' + escapeHtml(line) + '</span>';
+            + titleArr.map(function (line, lineIdx) {
+                return '<span class="line editable" data-edit-field="title" data-edit-index="'
+                  + lineIdx + '" title="Click to edit, Esc to cancel, Cmd/Ctrl+Enter to save">'
+                  + escapeHtml(line) + '</span>';
               }).join('')
             + '</div>';
         } else {
           var caption = typeof card.caption === 'string' ? card.caption : ('Card ' + (i + 1));
           var narration = typeof card.narration === 'string' ? card.narration : '';
-          titleHtml = '<div class="caption">' + escapeHtml(caption) + '</div>'
-            + (narration ? '<div class="narration">' + escapeHtml(narration) + '</div>' : '');
+          // body cards may have caption + narration; only caption is editable
+          // here when caption exists (some cards lack caption — quote/data/list).
+          // Narration is editable on every non-title card.
+          var captionHtml = (typeof card.caption === 'string')
+            ? '<div class="caption editable" data-edit-field="caption" title="Click to edit">'
+                + escapeHtml(caption) + '</div>'
+            : '<div class="caption">' + escapeHtml(caption) + '</div>';
+          var narrationHtml = narration
+            ? '<div class="narration editable" data-edit-field="narration" title="Click to edit narration">'
+                + escapeHtml(narration) + '</div>'
+            : (kind === 'body'
+                ? '<div class="narration editable" data-edit-field="narration" data-empty="1"'
+                  + ' title="Click to add narration" style="opacity:0.4">+ narration</div>'
+                : '');
+          titleHtml = captionHtml + narrationHtml;
         }
 
         var figureChip = card.figureKeyword
@@ -1099,6 +1255,40 @@ function renderSliceStageHtml({ sourcePath, port }) {
         es.addEventListener('open', function () {
           setStatus('good', 'live');
         });
+
+        // ─── Local-render progress fan-in (same SSE channel as deck) ──────
+        es.addEventListener('render-local-progress', function (e) {
+          try {
+            var msg = JSON.parse(e.data);
+            if (!msg || msg.jobId !== renderLocalJobId) return;
+            var pct = (typeof msg.progress === 'number' ? msg.progress : 0) * 100;
+            showLocalProgress(pct);
+            if (renderLocalState !== 'rendering') {
+              renderLocalState = 'rendering';
+              refreshRenderLocalBtn();
+            }
+          } catch (_) { /* malformed — ignore */ }
+        });
+        es.addEventListener('render-local-done', function (e) {
+          try {
+            var msg = JSON.parse(e.data);
+            if (!msg || msg.jobId !== renderLocalJobId) return;
+            renderLocalState = 'completed';
+            refreshRenderLocalBtn();
+            hideLocalProgress();
+            showToast(msg.outputPath);
+          } catch (_) { /* ignore */ }
+        });
+        es.addEventListener('render-local-error', function (e) {
+          try {
+            var msg = JSON.parse(e.data);
+            if (!msg || msg.jobId !== renderLocalJobId) return;
+            renderLocalState = 'failed';
+            refreshRenderLocalBtn();
+            hideLocalProgress();
+            alert('Local render failed: ' + (msg.message || 'unknown error'));
+          } catch (_) { /* ignore */ }
+        });
       }
       connect();
 
@@ -1461,6 +1651,298 @@ function renderSliceStageHtml({ sourcePath, port }) {
 
       refreshRenderBtn();
 
+      // ─── Render to MP4 (local, @remotion/renderer) ──────────────────────
+      // Mirrors the cloud renderer state machine but skips the JWT / quota
+      // dance. Progress arrives on the deck SSE channel (server fans out
+      // render-local-progress / render-local-done / render-local-error) so
+      // we add listeners inside connect()/onmessage below — see the SSE
+      // wiring further down for that fan-in.
+      var renderLocalBtn = document.getElementById('render-local-btn');
+      var renderLocalBtnLabel = document.getElementById('render-local-btn-label');
+      var renderLocalProgress = document.getElementById('render-local-progress');
+      var renderLocalProgressFill = document.getElementById('render-local-progress-fill');
+      var renderLocalProgressLabel = document.getElementById('render-local-progress-label');
+      var toast = document.getElementById('local-render-toast');
+      var toastPath = document.getElementById('local-render-toast-path');
+      var toastOpen = document.getElementById('local-render-toast-open');
+      var toastReveal = document.getElementById('local-render-toast-reveal');
+      var toastCopy = document.getElementById('local-render-toast-copy');
+      var toastClose = document.getElementById('local-render-toast-close');
+
+      var renderLocalState = 'idle';     // idle | submitting | rendering | completed | failed
+      var renderLocalJobId = null;
+      var renderLocalOutput = null;
+
+      function refreshRenderLocalBtn() {
+        renderLocalBtn.classList.remove('completed');
+        if (renderLocalState === 'idle' || renderLocalState === 'failed') {
+          renderLocalBtn.disabled = false;
+          renderLocalBtnLabel.textContent = 'Render mp4 (local)';
+        } else if (renderLocalState === 'submitting') {
+          renderLocalBtn.disabled = true;
+          renderLocalBtnLabel.textContent = 'Starting…';
+        } else if (renderLocalState === 'rendering') {
+          renderLocalBtn.disabled = true;
+          renderLocalBtnLabel.textContent = 'Rendering…';
+        } else if (renderLocalState === 'completed') {
+          renderLocalBtn.disabled = false;
+          renderLocalBtn.classList.add('completed');
+          renderLocalBtnLabel.textContent = 'Re-render local';
+        }
+      }
+      function showLocalProgress(pct) {
+        renderLocalProgress.classList.remove('hidden');
+        var clamped = Math.max(0, Math.min(100, pct));
+        renderLocalProgressFill.style.width = clamped.toFixed(1) + '%';
+        renderLocalProgressLabel.textContent = clamped.toFixed(0) + '%';
+      }
+      function hideLocalProgress() {
+        renderLocalProgress.classList.add('hidden');
+        renderLocalProgressFill.style.width = '0%';
+        renderLocalProgressLabel.textContent = '0%';
+      }
+      function showToast(outputPath) {
+        renderLocalOutput = outputPath;
+        toastPath.textContent = outputPath;
+        // file:// link only renders if the user copy-pastes — Chrome blocks
+        // file:// navigation from http://. We still expose the URL via Copy
+        // path, and the anchor itself is a no-op fallback.
+        var fileUrl = 'file://' + outputPath;
+        toastOpen.setAttribute('href', fileUrl);
+        toastReveal.setAttribute('href', 'file://' + outputPath.replace(/[^/]+$/, ''));
+        toast.classList.add('open');
+      }
+      function hideToast() { toast.classList.remove('open'); }
+
+      toastClose.addEventListener('click', hideToast);
+      toastCopy.addEventListener('click', function () {
+        if (!renderLocalOutput) return;
+        copyTextToClipboard(renderLocalOutput, toastCopy);
+      });
+
+      renderLocalBtn.addEventListener('click', function () {
+        if (renderLocalState === 'rendering' || renderLocalState === 'submitting') return;
+        if (!currentDeck || !Array.isArray(currentDeck.cards)) {
+          alert('No deck loaded — fix the JSON parse error first.');
+          return;
+        }
+        renderLocalState = 'submitting';
+        refreshRenderLocalBtn();
+        showLocalProgress(0);
+        hideToast();
+        fetch('/api/render-local', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          credentials: 'omit',
+          body: JSON.stringify({}),  // server reads the live snapshot
+        })
+          .then(function (r) { return r.json().then(function (j) { return { status: r.status, json: j }; }); })
+          .then(function (resp) {
+            if (resp.status !== 200 || resp.json.code !== 'success') {
+              renderLocalState = 'failed';
+              refreshRenderLocalBtn();
+              hideLocalProgress();
+              alert('Local render failed: ' + (resp.json.message || ('HTTP ' + resp.status)));
+              return;
+            }
+            renderLocalJobId = resp.json.jobId;
+            renderLocalOutput = resp.json.outputPath;
+            renderLocalState = 'rendering';
+            refreshRenderLocalBtn();
+          })
+          .catch(function (err) {
+            renderLocalState = 'failed';
+            refreshRenderLocalBtn();
+            hideLocalProgress();
+            alert('Network error: ' + err.message);
+          });
+      });
+
+      // Auth-state probe — flips the visual emphasis between local and cloud
+      // render. When the user is logged out (no cached JWT), the local
+      // button stays primary and the cloud button gets the secondary style
+      // (already the default in the HTML). Logged in: emphasis flips.
+      fetch('/api/auth-state', { credentials: 'omit' })
+        .then(function (r) { return r.ok ? r.json() : null; })
+        .then(function (j) {
+          if (!j) return;
+          if (j.tokenAvailable) {
+            // Cloud → primary, local → secondary
+            renderBtn.classList.remove('secondary');
+            renderLocalBtn.classList.add('secondary');
+          }
+        })
+        .catch(function () { /* leave defaults; logged-out is the safer assumption */ });
+
+      refreshRenderLocalBtn();
+
+      // ─── Inline edit (caption / narration / title rows) ─────────────────
+      // Conservative scope: only "safe" text fields are click-to-edit. theme,
+      // figureKeyword, kind, and card add/delete still require external
+      // editor (or AI-prompt flow above). Save trigger: blur or Cmd/Ctrl+
+      // Enter. Cancel: Escape.
+      var activeInlineEdit = null;  // { node, originalText, cardIdx, field, lineIdx }
+
+      function cancelInlineEdit() {
+        if (!activeInlineEdit) return;
+        var ed = activeInlineEdit;
+        activeInlineEdit = null;
+        var ta = ed.node.querySelector && ed.node.querySelector('textarea.inline-edit');
+        // Restore original text — we re-render the card label from
+        // currentDeck so theme styles re-apply cleanly.
+        ed.node.textContent = ed.originalText;
+        if (ed.errNode && ed.errNode.parentNode) ed.errNode.parentNode.removeChild(ed.errNode);
+        if (ed.hintNode && ed.hintNode.parentNode) ed.hintNode.parentNode.removeChild(ed.hintNode);
+      }
+
+      function applyEditToDeck(deck, cardIdx, field, lineIdx, newValue) {
+        // Returns a shallow-copied deck with the single field replaced.
+        // Never mutates the original; the save endpoint validates the result.
+        var copy = JSON.parse(JSON.stringify(deck));
+        var card = copy.cards && copy.cards[cardIdx];
+        if (!card) return null;
+        if (field === 'caption') card.caption = newValue;
+        else if (field === 'narration') {
+          if (newValue === '') {
+            delete card.narration;
+          } else {
+            card.narration = newValue;
+          }
+        }
+        else if (field === 'title') {
+          if (!Array.isArray(card.title)) card.title = [];
+          card.title[lineIdx] = newValue;
+        }
+        return copy;
+      }
+
+      function commitInlineEdit(newValue) {
+        if (!activeInlineEdit) return;
+        var ed = activeInlineEdit;
+        if (newValue === ed.originalText) {
+          cancelInlineEdit();
+          return;
+        }
+        var updatedDeck = applyEditToDeck(currentDeck, ed.cardIdx, ed.field, ed.lineIdx, newValue);
+        if (!updatedDeck) { cancelInlineEdit(); return; }
+
+        // Optimistically swap in the new text so the user sees it instantly;
+        // server validation may still reject (rare — schema caps). If it
+        // does, we restore originalText and surface the error inline.
+        var node = ed.node;
+        node.textContent = newValue;
+        var ta = node.querySelector && node.querySelector('textarea.inline-edit');
+        if (ta) ta.remove();
+        if (ed.hintNode && ed.hintNode.parentNode) ed.hintNode.parentNode.removeChild(ed.hintNode);
+        if (ed.errNode && ed.errNode.parentNode) ed.errNode.parentNode.removeChild(ed.errNode);
+        node.style.opacity = '0.6';
+
+        var snapshot = ed;
+        activeInlineEdit = null;
+
+        fetch('/api/deck', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          credentials: 'omit',
+          body: JSON.stringify({ deck: updatedDeck }),
+        })
+          .then(function (r) { return r.json().then(function (j) { return { status: r.status, json: j }; }); })
+          .then(function (resp) {
+            node.style.opacity = '';
+            if (resp.status !== 200 || resp.json.code !== 'success') {
+              // Restore + surface the validation error inline. The file
+              // watcher will not have fired (we didn't write), so the page
+              // text needs explicit revert.
+              node.textContent = snapshot.originalText;
+              var card = node.closest && node.closest('.stage-card');
+              if (card) {
+                var err = document.createElement('div');
+                err.className = 'inline-edit-err';
+                err.textContent = resp.json.message || 'Save rejected';
+                card.appendChild(err);
+                setTimeout(function () { if (err.parentNode) err.parentNode.removeChild(err); }, 3500);
+              }
+              return;
+            }
+            // Success — watcher will broadcast deck SSE, which re-renders
+            // the card with the new value + diff highlight ring. Nothing
+            // more to do here.
+          })
+          .catch(function (err) {
+            node.style.opacity = '';
+            node.textContent = snapshot.originalText;
+            alert('Save failed: ' + err.message);
+          });
+      }
+
+      function startInlineEdit(node) {
+        if (activeInlineEdit) return;
+        var card = node.closest && node.closest('.stage-card');
+        if (!card) return;
+        var cardIdx = parseInt(card.getAttribute('data-card-idx'), 10);
+        if (!Number.isFinite(cardIdx)) return;
+        var field = node.getAttribute('data-edit-field');
+        var lineIdx = parseInt(node.getAttribute('data-edit-index') || '0', 10);
+        if (!Number.isFinite(lineIdx)) lineIdx = 0;
+        var isEmpty = node.getAttribute('data-empty') === '1';
+        var original = isEmpty ? '' : node.textContent;
+        var ta = document.createElement('textarea');
+        ta.className = 'inline-edit';
+        ta.value = original;
+        // Approximate visual metrics so the card doesn't reflow noticeably.
+        var rect = node.getBoundingClientRect();
+        ta.style.minHeight = Math.max(20, rect.height) + 'px';
+        ta.rows = field === 'narration' ? 4 : 2;
+        node.textContent = '';
+        node.appendChild(ta);
+        var hint = document.createElement('div');
+        hint.className = 'inline-edit-hint';
+        hint.textContent = 'Cmd/Ctrl+Enter: save · Esc: cancel · blur: save';
+        card.appendChild(hint);
+
+        activeInlineEdit = {
+          node: node,
+          originalText: original,
+          cardIdx: cardIdx,
+          field: field,
+          lineIdx: lineIdx,
+          hintNode: hint,
+          errNode: null,
+        };
+
+        ta.focus();
+        ta.setSelectionRange(0, ta.value.length);
+
+        ta.addEventListener('keydown', function (e) {
+          if (e.key === 'Escape') {
+            e.preventDefault();
+            cancelInlineEdit();
+          } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            commitInlineEdit(ta.value);
+          }
+        });
+        ta.addEventListener('blur', function () {
+          // Use rAF so escape-keydown (which calls cancelInlineEdit) wins the
+          // race against blur. By the time rAF fires, activeInlineEdit will
+          // be null if the user pressed Escape.
+          requestAnimationFrame(function () {
+            if (!activeInlineEdit || activeInlineEdit.node !== node) return;
+            commitInlineEdit(ta.value);
+          });
+        });
+      }
+
+      cardsPane.addEventListener('click', function (ev) {
+        var target = ev.target.closest && ev.target.closest('.editable');
+        if (!target) return;
+        // Don't intercept clicks while an edit is already running on this
+        // same node — the textarea inside catches its own events.
+        if (target.querySelector && target.querySelector('textarea.inline-edit')) return;
+        ev.stopPropagation();
+        startInlineEdit(target);
+      });
+
       // ─── Edit-with-AI: prompt builder (mirrors stage-core/edit-prompt.js) ─
       // Kept as a small in-browser duplicate because the template is an
       // inline string — pulling the Node module across the boundary would

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "voxflow",
-  "version": "1.15.1",
+  "version": "1.15.3",
   "description": "AI audio content creation CLI — stories, podcasts, narration, dubbing, transcription, translation, and video translation with TTS",
   "bin": {
     "voxflow": "./dist/index.js"