@officexapp/vidfarm-devcli 0.21.14 → 0.21.16

package/public/serve-shells/library-files.html

@@ -382,7 +382,10 @@
 /* chat column */
 .rk-aichat-main{flex:1;min-width:0;display:flex;flex-direction:column}
 .rk-aichat-head{display:flex;align-items:center;gap:8px;padding:14px 14px;border-bottom:1px solid var(--rk-border);flex:none}
-.rk-aichat-head-main{flex:1;min-width:0;display:grid;gap:1px}
+.rk-aichat-head-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
+.rk-aichat-head-titles{display:grid;gap:1px;min-width:0}
+.rk-aichat-watch{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--rk-text-muted);font-size:12px;font-weight:400;font-family:inherit;cursor:pointer;padding:3px 8px;border-radius:8px;white-space:nowrap;transition:color .15s,background .15s}
+.rk-aichat-watch:hover{color:var(--rk-ink);background:var(--rk-n-100)}
 .rk-aichat-title{font-family:var(--rk-font-display);font-weight:800;font-size:15px;color:var(--rk-ink);letter-spacing:-.01em}
 .rk-aichat-sub{font-size:11.5px;color:var(--rk-text-muted)}
 .rk-aichat-back{flex:1;min-width:0;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;
@@ -1367,6 +1370,25 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
 .rk-clips-dialog-note[data-tone="error"]{background:#fdecea;color:#8d3b2f}
 .rk-clips-dialog-note[data-tone="success"]{background:#e8f7ee;color:#1f7a44}
 .rk-clips-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
+/* Import Raws: file-upload dropzone (mirrors discover) + folder picker trigger. */
+.rk-add-optional{font-weight:500;color:var(--rk-text-faint)}
+.rk-add-or{display:flex;align-items:center;gap:12px;color:var(--rk-text-faint);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
+.rk-add-or::before,.rk-add-or::after{content:"";height:1px;flex:1;background:var(--rk-border)}
+.rk-add-file{display:flex;align-items:center;gap:12px;border:1px dashed var(--rk-border-strong);border-radius:var(--rk-r-lg);padding:13px 14px;cursor:pointer;color:var(--rk-n-700);transition:border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
+.rk-add-file:hover{border-color:var(--rk-gold-600);background:var(--rk-gold-tint)}
+.rk-add-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
+.rk-add-file-ic{flex:none;color:var(--rk-gold-700);display:grid;place-items:center}
+.rk-add-file-text{font-size:13.5px;font-weight:600;display:grid;gap:2px;min-width:0}
+.rk-add-file-text .rk-add-optional{font-size:11.5px;font-weight:500}
+.rk-add-file.is-picked{border-style:solid;border-color:var(--rk-gold-600);background:var(--rk-gold-tint)}
+.rk-folderpick{display:flex;align-items:stretch;gap:8px}
+.rk-folderpick-btn{flex:1;min-width:0;display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer;color:var(--rk-text-faint);font-weight:500}
+.rk-folderpick-btn:hover{border-color:var(--rk-gold-600)}
+.rk-folderpick-btn.is-picked{color:var(--rk-ink);font-weight:600}
+.rk-folderpick-ic{flex:none;color:var(--rk-gold-700);display:grid;place-items:center}
+.rk-folderpick-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rk-folderpick-clear{flex:none;width:38px;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);background:var(--rk-n-50);color:var(--rk-n-700);cursor:pointer;font-size:13px;line-height:1;transition:border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
+.rk-folderpick-clear:hover{border-color:var(--rk-gold-600);background:var(--rk-gold-tint)}
 /* ── files tab: full-page mount of the shared directory-explorer component ──
    The component (.rk-dir + .rk-aichat-* rows) is tuned for the narrow chat
    drawer; on a full page we wrap it in a card and scale the search, crumbs and
@@ -1537,8 +1559,13 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
     <header class="rk-aichat-head">
       <span class="rk-brand-mark">V</span>
       <div class="rk-aichat-head-main">
-        <div class="rk-aichat-title">VidFarm AI</div>
-        <div class="rk-aichat-sub">on your own AI keys</div>
+        <div class="rk-aichat-head-titles">
+          <div class="rk-aichat-title">VidFarm AI</div>
+          <div class="rk-aichat-sub">on your own AI keys</div>
+        </div>
+        <button class="rk-aichat-watch" id="rkWatchPoppanel" type="button" title="Watch Tutorial" aria-label="Watch Tutorial">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M10 8.5l6 3.5-6 3.5z" fill="currentColor" stroke="none"></path></svg><span>Watch Tutorial</span>
+        </button>
       </div>
       <button class="rk-aichat-tool" id="rkHistoryToggle" type="button" title="Chat history" aria-label="Toggle chat history" aria-pressed="false">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l3 2"/></svg>
@@ -3507,6 +3534,63 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
     document.querySelectorAll("[data-skill-menu]").forEach((panel) => { panel.hidden = true; });
   });
 })();</script>
+<script>window.__vidfarmTutorials=[["/discover/templates/categories","/assets/blog/tutorial-videos/page-categories.mp4"],["/discover/templates/swipe","/assets/blog/tutorial-videos/page-swipe.mp4"],["/discover","/assets/blog/tutorial-videos/page-discover.mp4"],["/tools/image","/assets/blog/tutorial-videos/tools-image.mp4"],["/tools/video","/assets/blog/tutorial-videos/tools-video.mp4"],["/tools/clipper","/assets/blog/tutorial-videos/tools-clipper.mp4"],["/chat","/assets/blog/tutorial-videos/page-chat.mp4"],["/calendar","/assets/blog/tutorial-videos/page-calendar.mp4"],["/settings/profile","/assets/blog/tutorial-videos/page-profile.mp4"],["/settings/wallet","/assets/blog/tutorial-videos/page-wallet.mp4"],["/settings/channels","/assets/blog/tutorial-videos/page-channels.mp4"],["/settings/developer","/assets/blog/tutorial-videos/page-developer.mp4"],["/library","/assets/blog/tutorial-videos/page-library.mp4"]];window.__vfPoppanelVideo="/assets/blog/tutorial-videos/page-poppanel.mp4";</script>
+<script>(() => {
+  try {
+    function findTitle() {
+      var hs = document.querySelectorAll('.rk-content h1');
+      for (var i = 0; i < hs.length; i++) { var t = (hs[i].textContent || '').trim(); if (t && t.toLowerCase() !== 'vidfarm') return hs[i]; }
+      return null;
+    }
+    function openModal(url) {
+      if (document.getElementById('vf-tut-modal')) return;
+      var ov = document.createElement('div');
+      ov.id = 'vf-tut-modal';
+      ov.style.cssText = 'position:fixed;inset:0;z-index:2147483000;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:24px;';
+      var box = document.createElement('div');
+      box.style.cssText = 'position:relative;width:min(900px,92vw);';
+      var vid = document.createElement('video');
+      vid.src = url; vid.controls = true; vid.autoplay = true; vid.playsInline = true;
+      vid.style.cssText = 'width:100%;max-height:86vh;border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.5);background:#000;display:block;';
+      var x = document.createElement('button');
+      x.type = 'button'; x.setAttribute('aria-label', 'Close'); x.innerHTML = '&times;';
+      x.style.cssText = 'position:absolute;top:-16px;right:-16px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#111;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;';
+      function close() { try { vid.pause(); } catch (e) {} ov.remove(); document.removeEventListener('keydown', onKey); }
+      function onKey(e) { if (e.key === 'Escape') close(); }
+      x.onclick = close;
+      ov.onclick = function (e) { if (e.target === ov) close(); };
+      document.addEventListener('keydown', onKey);
+      box.appendChild(vid); box.appendChild(x); ov.appendChild(box); document.body.appendChild(ov);
+    }
+    window.__vfOpenTutorial = openModal;
+    // Pop-panel (agent dock) tutorial button — present on every full-chrome page,
+    // next to the "VidFarm AI" title. Retry briefly in case the dock mounts late.
+    var pt = 0;
+    (function wirePop() {
+      var pv = document.getElementById('rkWatchPoppanel');
+      if (pv && window.__vfPoppanelVideo) { pv.onclick = function () { openModal(window.__vfPoppanelVideo); }; return; }
+      if (pt++ < 20) setTimeout(wirePop, 300);
+    })();
+    // Page-title tutorial button — only when this route has a matching video.
+    var routes = window.__vidfarmTutorials || [];
+    var path = location.pathname, hit = null;
+    for (var i = 0; i < routes.length; i++) { if (path === routes[i][0] || path.indexOf(routes[i][0]) === 0) { hit = routes[i][1]; break; } }
+    function inject() {
+      if (document.getElementById('vf-watch-tut')) return true;
+      var h1 = findTitle(); if (!h1) return false;
+      var btn = document.createElement('button');
+      btn.id = 'vf-watch-tut'; btn.type = 'button'; btn.setAttribute('aria-label', 'Watch Tutorial');
+      btn.style.cssText = 'display:inline-flex;align-items:center;gap:6px;margin-left:16px;padding:4px 10px;border:0;background:transparent;color:#9aa0a6;font-size:13px;font-weight:400;font-family:inherit;letter-spacing:0;cursor:pointer;vertical-align:middle;border-radius:8px;transition:color .15s,background .15s;';
+      btn.innerHTML = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M10 8.5l6 3.5-6 3.5z" fill="currentColor" stroke="none"></path></svg><span>Watch Tutorial</span>';
+      btn.onmouseenter = function () { btn.style.color = '#3c4043'; btn.style.background = 'rgba(0,0,0,.05)'; };
+      btn.onmouseleave = function () { btn.style.color = '#9aa0a6'; btn.style.background = 'transparent'; };
+      btn.onclick = function () { openModal(hit); };
+      h1.appendChild(btn);
+      return true;
+    }
+    if (hit) { var tries = 0; (function loop() { if (inject()) return; if (tries++ > 40) return; setTimeout(loop, 250); })(); }
+  } catch (e) {}
+})();</script>
 <script type="module" src="/assets/file-directory-app.js"></script>
 </body>
 </html>

package/public/serve-shells/library-raws.html

@@ -382,7 +382,10 @@
 /* chat column */
 .rk-aichat-main{flex:1;min-width:0;display:flex;flex-direction:column}
 .rk-aichat-head{display:flex;align-items:center;gap:8px;padding:14px 14px;border-bottom:1px solid var(--rk-border);flex:none}
-.rk-aichat-head-main{flex:1;min-width:0;display:grid;gap:1px}
+.rk-aichat-head-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
+.rk-aichat-head-titles{display:grid;gap:1px;min-width:0}
+.rk-aichat-watch{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--rk-text-muted);font-size:12px;font-weight:400;font-family:inherit;cursor:pointer;padding:3px 8px;border-radius:8px;white-space:nowrap;transition:color .15s,background .15s}
+.rk-aichat-watch:hover{color:var(--rk-ink);background:var(--rk-n-100)}
 .rk-aichat-title{font-family:var(--rk-font-display);font-weight:800;font-size:15px;color:var(--rk-ink);letter-spacing:-.01em}
 .rk-aichat-sub{font-size:11.5px;color:var(--rk-text-muted)}
 .rk-aichat-back{flex:1;min-width:0;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;
@@ -1367,6 +1370,25 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
 .rk-clips-dialog-note[data-tone="error"]{background:#fdecea;color:#8d3b2f}
 .rk-clips-dialog-note[data-tone="success"]{background:#e8f7ee;color:#1f7a44}
 .rk-clips-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
+/* Import Raws: file-upload dropzone (mirrors discover) + folder picker trigger. */
+.rk-add-optional{font-weight:500;color:var(--rk-text-faint)}
+.rk-add-or{display:flex;align-items:center;gap:12px;color:var(--rk-text-faint);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
+.rk-add-or::before,.rk-add-or::after{content:"";height:1px;flex:1;background:var(--rk-border)}
+.rk-add-file{display:flex;align-items:center;gap:12px;border:1px dashed var(--rk-border-strong);border-radius:var(--rk-r-lg);padding:13px 14px;cursor:pointer;color:var(--rk-n-700);transition:border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
+.rk-add-file:hover{border-color:var(--rk-gold-600);background:var(--rk-gold-tint)}
+.rk-add-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
+.rk-add-file-ic{flex:none;color:var(--rk-gold-700);display:grid;place-items:center}
+.rk-add-file-text{font-size:13.5px;font-weight:600;display:grid;gap:2px;min-width:0}
+.rk-add-file-text .rk-add-optional{font-size:11.5px;font-weight:500}
+.rk-add-file.is-picked{border-style:solid;border-color:var(--rk-gold-600);background:var(--rk-gold-tint)}
+.rk-folderpick{display:flex;align-items:stretch;gap:8px}
+.rk-folderpick-btn{flex:1;min-width:0;display:flex;align-items:center;gap:9px;text-align:left;cursor:pointer;color:var(--rk-text-faint);font-weight:500}
+.rk-folderpick-btn:hover{border-color:var(--rk-gold-600)}
+.rk-folderpick-btn.is-picked{color:var(--rk-ink);font-weight:600}
+.rk-folderpick-ic{flex:none;color:var(--rk-gold-700);display:grid;place-items:center}
+.rk-folderpick-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rk-folderpick-clear{flex:none;width:38px;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);background:var(--rk-n-50);color:var(--rk-n-700);cursor:pointer;font-size:13px;line-height:1;transition:border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
+.rk-folderpick-clear:hover{border-color:var(--rk-gold-600);background:var(--rk-gold-tint)}
 /* ── files tab: full-page mount of the shared directory-explorer component ──
    The component (.rk-dir + .rk-aichat-* rows) is tuned for the narrow chat
    drawer; on a full page we wrap it in a card and scale the search, crumbs and
@@ -1532,12 +1554,30 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
     <div class="rk-card-head">
       <span class="rk-eyebrow">Import source</span>
       <h2>Import Raws</h2>
-      <p class="rk-muted">Paste a video URL — TikTok, YouTube, Instagram, X, or a direct link. We'll open the Clipper to preview it and save an exact subrange to your raws.</p>
+      <p class="rk-muted">Paste a video URL — TikTok, YouTube, Instagram, X, or a direct link — or upload a video file. We'll import it (or open the Clipper to trim a subrange) into your raws.</p>
     </div>
     <div class="rk-field">
       <label class="rk-label" for="rkScanUrl">Video URL</label>
       <input class="rk-input" id="rkScanUrl" name="url" type="url" placeholder="https://youtube.com/watch?v=… or https://…/video.mp4" autocomplete="off" />
     </div>
+    <div class="rk-add-or"><span>or</span></div>
+    <label class="rk-add-file" data-rk-scan-filelabel>
+      <input type="file" accept="video/*,.mp4,.mov,.webm,.m4v" data-rk-scan-file />
+      <span class="rk-add-file-ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 16V4"/><path d="m7 9 5-5 5 5"/><path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3"/></svg></span>
+      <span class="rk-add-file-text" data-rk-scan-filetext>Upload a video<span class="rk-add-optional">MP4 / MOV / WebM, up to 100 MB</span></span>
+    </label>
+    <div class="rk-field">
+      <label class="rk-label">Save to folder <span class="rk-hint">optional</span></label>
+      <div class="rk-folderpick">
+        <button type="button" class="rk-input rk-folderpick-btn" id="rkScanFolderBtn">
+          <span class="rk-folderpick-ic" aria-hidden="true"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2Z"/></svg></span>
+          <span class="rk-folderpick-label" id="rkScanFolderLabel">Auto-named from the video</span>
+        </button>
+        <button type="button" class="rk-folderpick-clear" id="rkScanFolderClear" aria-label="Clear folder" hidden>✕</button>
+      </div>
+      <input type="hidden" id="rkScanFolder" name="folder_path" value="" />
+      <span class="rk-hint">Choose an existing Raws folder or create one. Blank = auto-named from the video.</span>
+    </div>
     <div class="rk-field">
       <label class="rk-label" for="rkScanTracer">Tracer <span class="rk-hint">optional</span></label>
       <input class="rk-input" id="rkScanTracer" name="tracer" type="text" placeholder="my-campaign-001" autocomplete="off" />
@@ -1649,8 +1689,13 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
     <header class="rk-aichat-head">
       <span class="rk-brand-mark">V</span>
       <div class="rk-aichat-head-main">
-        <div class="rk-aichat-title">VidFarm AI</div>
-        <div class="rk-aichat-sub">on your own AI keys</div>
+        <div class="rk-aichat-head-titles">
+          <div class="rk-aichat-title">VidFarm AI</div>
+          <div class="rk-aichat-sub">on your own AI keys</div>
+        </div>
+        <button class="rk-aichat-watch" id="rkWatchPoppanel" type="button" title="Watch Tutorial" aria-label="Watch Tutorial">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M10 8.5l6 3.5-6 3.5z" fill="currentColor" stroke="none"></path></svg><span>Watch Tutorial</span>
+        </button>
       </div>
       <button class="rk-aichat-tool" id="rkHistoryToggle" type="button" title="Chat history" aria-label="Toggle chat history" aria-pressed="false">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l3 2"/></svg>
@@ -2201,6 +2246,19 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
   });
   // Copy a raw's canonical route path — handy to paste into the /editor Insert
   // Media panel. Works from the visible chip AND the kebab "Copy path" item.
+  // NOTE: this raws panel is its own IIFE — it can't see the files-panel copyText,
+  // so define a local one here (falls back to execCommand if the async API rejects,
+  // e.g. when the document isn't focused).
+  function copyText(txt,ok){
+    function fb(){ try{ var ta=document.createElement('textarea'); ta.value=txt; ta.style.position='fixed'; ta.style.opacity='0'; document.body.appendChild(ta); ta.focus(); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); }catch(e){} }
+    try{
+      if(navigator.clipboard&&navigator.clipboard.writeText){
+        navigator.clipboard.writeText(txt).then(function(){ if(ok)ok(); },function(){ fb(); if(ok)ok(); });
+        return;
+      }
+    }catch(e){}
+    fb(); if(ok)ok();
+  }
   document.addEventListener('click',function(e){
     var cp=e.target&&e.target.closest?e.target.closest('[data-raw-copy-path]'):null;
     if(!cp) return;
@@ -2410,7 +2468,84 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
   var scanPrompt=root.getElementById('rkScanPrompt');
   var scanProvider=root.getElementById('rkScanProvider');
   var scanTracer=root.getElementById('rkScanTracer');
+  var scanFolder=root.getElementById('rkScanFolder');
+  var scanFolderBtn=root.getElementById('rkScanFolderBtn');
+  var scanFolderLabel=root.getElementById('rkScanFolderLabel');
+  var scanFolderClear=root.getElementById('rkScanFolderClear');
+  var scanFile=root.querySelector('[data-rk-scan-file]');
+  var scanFileLabel=root.querySelector('[data-rk-scan-filelabel]');
+  var scanFileText=root.querySelector('[data-rk-scan-filetext]');
+  var defaultScanFileText=scanFileText?scanFileText.innerHTML:'';
+  var MAX_TEMP_UPLOAD=100*1024*1024;
   var scanNote=root.getElementById('rkScanNote');
+  function selectedScanFile(){ return scanFile&&scanFile.files&&scanFile.files[0]?scanFile.files[0]:null; }
+  function syncScanFileUi(){
+    var file=selectedScanFile();
+    if(scanFileLabel)scanFileLabel.classList.toggle('is-picked',!!file);
+    if(scanFileText)scanFileText.innerHTML=file?esc(file.name):defaultScanFileText;
+  }
+  function resetScanUpload(){ if(scanFile)scanFile.value=''; syncScanFileUi(); }
+  // Presign → upload → finalize a picked video into the user's temp store, then
+  // hand /raws/scan its temp_file_id (which the route resolves to an S3 key).
+  function uploadScanTempFile(file){
+    return fetch('/api/v1/user/me/temporary-files/presign',{method:'POST',credentials:'same-origin',headers:{'content-type':'application/json',Accept:'application/json'},
+      body:JSON.stringify({ file_name:file.name, content_type:file.type||null, size_bytes:file.size, folder_path:'raws/_inputs' })})
+      .then(function(r){ return r.json().catch(function(){ return {}; }).then(function(d){ return {ok:r.ok,data:d}; }); })
+      .then(function(res){
+        if(!res.ok||!res.data||!res.data.transport) throw new Error((res.data&&res.data.error)||'Unable to prepare upload.');
+        var p=res.data;
+        if(p.transport==='server'){
+          var form=new FormData();
+          form.append((p.upload&&p.upload.form_field)||'file',file,file.name);
+          form.append('folder_path','raws/_inputs');
+          return fetch((p.upload&&p.upload.url)||'/api/v1/user/me/temporary-files/upload',{method:(p.upload&&p.upload.method)||'POST',credentials:'same-origin',body:form})
+            .then(function(r){ return r.json().catch(function(){ return {}; }).then(function(d){ return {ok:r.ok,data:d}; }); })
+            .then(function(done){ var tf=done&&done.data&&done.data.file; var id=tf&&(tf.id||tf.fileId||tf.file_id); if(!done.ok||!id) throw new Error((done.data&&done.data.error)||'Unable to upload video.'); return id; });
+        }
+        return fetch(p.upload.url,{method:p.upload.method,headers:p.upload.headers,body:file})
+          .then(function(r){ if(!r.ok) throw new Error('Upload failed with status '+r.status+'.');
+            return fetch('/api/v1/user/me/temporary-files',{method:'POST',credentials:'same-origin',headers:{'content-type':'application/json',Accept:'application/json'},
+              body:JSON.stringify({ file_id:p.file_id, file_name:p.file_name, content_type:p.content_type, size_bytes:file.size, storage_key:p.storage_key, folder_path:p.folder_path||'raws/_inputs' })}); })
+          .then(function(r){ return r.json().catch(function(){ return {}; }).then(function(d){ return {ok:r.ok,data:d}; }); })
+          .then(function(done){ var tf=done&&done.data&&done.data.file; var id=tf&&(tf.id||tf.fileId||tf.file_id); if(!done.ok||!id) throw new Error((done.data&&done.data.error)||'Unable to save uploaded video.'); return id; });
+      });
+  }
+  // "Save to folder" uses the shared file-directory pop-panel (window.__vidfarmDirectory)
+  // scoped to the Raws root — the same picker as "Add to folder…", with create-new-folder
+  // inside. The chosen folder's relative folderPath is stashed on the hidden #rkScanFolder
+  // input (name=folder_path); its full /raws/… path shows on the trigger button.
+  function setScanFolder(folderPath, displayPath){
+    if(scanFolder)scanFolder.value=folderPath||'';
+    if(scanFolderLabel)scanFolderLabel.textContent=folderPath?(displayPath||('/raws/'+folderPath)):'Auto-named from the video';
+    if(scanFolderBtn)scanFolderBtn.classList.toggle('is-picked',!!folderPath);
+    if(scanFolderClear)scanFolderClear.hidden=!folderPath;
+  }
+  function openScanFolderPicker(){
+    var dir=window.__vidfarmDirectory;
+    if(!dir||typeof dir.pick!=='function'){
+      // Explorer not mounted — degrade to a prompt so the field still works.
+      var typed=window.prompt('Save these raws to which folder? (leave blank to auto-name)', (scanFolder&&scanFolder.value)||'');
+      if(typed!=null)setScanFolder((typed||'').trim().replace(/^\/+|\/+$/g,''));
+      return;
+    }
+    // The Import dialog is a top-layer <dialog> (showModal); the picker overlay is
+    // z-index only, so it would render BEHIND the dialog. Close the dialog while
+    // picking, then reopen it — the form's inputs persist across close/reopen.
+    var reopen=function(){ try{ if(dialog&&typeof dialog.showModal==='function'&&!dialog.open)dialog.showModal(); }catch(e){} };
+    try{ if(dialog&&dialog.open)dialog.close(); }catch(e){}
+    dir.pick({
+      select:'folder',
+      roots:['raws'],
+      initialPath:(scanFolder&&scanFolder.value)?('/raws/'+scanFolder.value):'/raws',
+      title:'Save raws to folder',
+      hint:'Pick a Raws folder (or create a new one), then choose “Save here”.',
+      confirmLabel:'Save here',
+      onPick:function(folder){ setScanFolder((folder&&folder.folderPath)||'', folder&&folder.path); reopen(); },
+      onCancel:reopen
+    });
+  }
+  if(scanFolderBtn)scanFolderBtn.addEventListener('click',openScanFolderPicker);
+  if(scanFolderClear)scanFolderClear.addEventListener('click',function(){ setScanFolder(''); });
   var scanSubmit=root.getElementById('rkClipsScanSubmit');
   var scanClip=root.getElementById('rkScanClip');
   var scanAudioOnly=root.getElementById('rkScanAudioOnly');
@@ -2455,18 +2590,21 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
       .then(function(r){ return r.ok?r.json():null; })
       .then(function(d){ if(d){ SCAN_OPTS=d; applyScanOpts(); } }).catch(function(){});
   }
+  var FILE_IMPORT_NOTE='Uploaded videos import straight into your raws library. Turn on Clip raws with AI to auto-mine matching moments instead.';
   function syncClipMode(){
     var on=!!(scanClip&&scanClip.checked);
+    var file=selectedScanFile();
     if(scanAdvanced)scanAdvanced.hidden=!on;
-    if(scanSubmit)scanSubmit.innerHTML=(on?'Start scan':'Open clipper')+' <span class="rk-arrow">→</span>';
+    if(scanSubmit)scanSubmit.innerHTML=(on?'Start scan':(file?'Import video':'Open clipper'))+' <span class="rk-arrow">→</span>';
     if(on&&!clipReady()){
       setNote('No AI provider available — add a Gemini, OpenAI, or OpenRouter key in Settings to clip raws (or uncheck to import the whole video).','error');
     } else {
-      setNote(on?CLIP_NOTE:IMPORT_NOTE);
+      setNote(on?CLIP_NOTE:(file?FILE_IMPORT_NOTE:IMPORT_NOTE));
     }
   }
   if(scanProvider)scanProvider.addEventListener('change',function(){ scanProviderTouched=true; });
   if(scanClip)scanClip.addEventListener('change',syncClipMode);
+  if(scanFile)scanFile.addEventListener('change',function(){ syncScanFileUi(); syncClipMode(); });
   if(dialog){ openBtns.forEach(function(openBtn){ openBtn.addEventListener('click',function(){ if(!SCAN_OPTS)loadScanOpts(); syncClipMode(); if(typeof dialog.showModal==='function'&&!dialog.open)dialog.showModal(); }); }); }
   if(cancelBtn&&dialog){ cancelBtn.addEventListener('click',function(){ if(dialog.open)dialog.close(); }); }
   if(dialog){
@@ -2479,33 +2617,43 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
     scanForm.addEventListener('submit',function(e){
       e.preventDefault();
       var url=(scanUrl&&scanUrl.value||'').trim();
+      var file=selectedScanFile();
       var tracer=(scanTracer&&scanTracer.value||'').trim();
+      var folder=(scanFolder&&scanFolder.value||'').trim();
       var clip=!!(scanClip&&scanClip.checked);
       var prompt=clip?(scanPrompt&&scanPrompt.value||'').trim():'';
       var provider=clip?(scanProvider&&scanProvider.value||'').trim():'';
       var audioOnly=clip&&!!(scanAudioOnly&&scanAudioOnly.checked);
-      if(!url){ setNote('Enter a video URL.','error'); return; }
-      // Whole-video (non-AI) path now opens the Clipper so the user can pick an
-      // exact subrange (or save the whole thing) with a live video preview.
-      if(!clip){
+      if(!file&&!url){ setNote('Enter a video URL or upload a video file.','error'); return; }
+      if(file&&file.size>MAX_TEMP_UPLOAD){ setNote('Video uploads can be at most 100 MB.','error'); return; }
+      // Whole-video (non-AI) URL path opens the Clipper so the user can pick an
+      // exact subrange (or save the whole thing) with a live video preview. An
+      // uploaded FILE has no previewable URL, so it imports directly instead.
+      if(url&&!file&&!clip){
         var clp=new URL('/tools/clipper', window.location.origin);
         clp.searchParams.set('source_url', url);
         if(tracer) clp.searchParams.set('tracer', tracer);
+        if(folder) clp.searchParams.set('folder_path', folder);
         window.location.href=clp.pathname+clp.search;
         return;
       }
-      setNote('Starting scan…');
+      setNote(file?'Uploading…':'Starting scan…');
       if(scanSubmit){ scanSubmit.disabled=true; scanSubmit.classList.add('is-loading'); }
 
-      var payload={source_url:url};
+      var payload={};
+      if(url&&!file)payload.source_url=url;
       if(clip){ payload.prompt=prompt; if(provider)payload.provider=provider; if(audioOnly)payload.audio_only=true; } else { payload.import_only=true; }
       if(tracer)payload.tracer=tracer;
+      if(folder)payload.folder_path=folder;
 
       // Fire the request now; hold it and only wire the result AFTER the modal
       // closes and the optimistic card lands (so a fast reply can't race ahead
-      // of its own placeholder).
+      // of its own placeholder). An uploaded file is presigned+staged first, then
+      // its temp_file_id rides the same /raws/scan body.
       var id='imp'+Date.now()+'-'+Math.floor(Math.random()*1e6);
-      var req=fetch('/raws/scan',{method:'POST',credentials:'same-origin',headers:{'Content-Type':'application/json',Accept:'application/json'},body:JSON.stringify(payload)})
+      var prep=file?uploadScanTempFile(file).then(function(tempFileId){ payload.temp_file_id=tempFileId; }):Promise.resolve();
+      var req=prep
+        .then(function(){ return fetch('/raws/scan',{method:'POST',credentials:'same-origin',headers:{'Content-Type':'application/json',Accept:'application/json'},body:JSON.stringify(payload)}); })
         .then(function(r){ return r.json().then(function(d){ return {ok:r.ok,data:d}; }); });
 
       // brief spinner beat, then close and optimistically drop an "importing…" card
@@ -2513,12 +2661,13 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
         if(scanSubmit){ scanSubmit.disabled=false; scanSubmit.classList.remove('is-loading'); }
         if(dialog&&dialog.open)dialog.close();
         if(scanForm.reset)scanForm.reset();
+        resetScanUpload();
         syncClipMode();
-        PENDING.unshift({id:id,url:url,tracer:tracer,clip:clip,label:clip?'Starting scan…':'Importing…'});
+        PENDING.unshift({id:id,url:url||(file&&file.name)||'',tracer:tracer,clip:clip,label:clip?'Starting scan…':(file?'Uploading…':'Importing…')});
         if(query)query.value='';
         paintRoot(); // surface the optimistic "importing…" card at the directory root
         if(statusEl)statusEl.textContent=(clip?'Mining a source…':'Importing a video…')+(tracer?' (tracer '+tracer+')':'');
-        req.then(function(res){ onScanResult(id,clip,res); }).catch(function(){ failImport(id,'Network error — please try again.'); });
+        req.then(function(res){ onScanResult(id,clip,res); }).catch(function(){ failImport(id,'Upload or scan failed — please try again.'); });
       },650);
     });
   }
@@ -4461,6 +4610,63 @@ button.rk-clips-thumb{appearance:none;-webkit-appearance:none;border:0;margin:0;
     document.querySelectorAll("[data-skill-menu]").forEach((panel) => { panel.hidden = true; });
   });
 })();</script>
+<script>window.__vidfarmTutorials=[["/discover/templates/categories","/assets/blog/tutorial-videos/page-categories.mp4"],["/discover/templates/swipe","/assets/blog/tutorial-videos/page-swipe.mp4"],["/discover","/assets/blog/tutorial-videos/page-discover.mp4"],["/tools/image","/assets/blog/tutorial-videos/tools-image.mp4"],["/tools/video","/assets/blog/tutorial-videos/tools-video.mp4"],["/tools/clipper","/assets/blog/tutorial-videos/tools-clipper.mp4"],["/chat","/assets/blog/tutorial-videos/page-chat.mp4"],["/calendar","/assets/blog/tutorial-videos/page-calendar.mp4"],["/settings/profile","/assets/blog/tutorial-videos/page-profile.mp4"],["/settings/wallet","/assets/blog/tutorial-videos/page-wallet.mp4"],["/settings/channels","/assets/blog/tutorial-videos/page-channels.mp4"],["/settings/developer","/assets/blog/tutorial-videos/page-developer.mp4"],["/library","/assets/blog/tutorial-videos/page-library.mp4"]];window.__vfPoppanelVideo="/assets/blog/tutorial-videos/page-poppanel.mp4";</script>
+<script>(() => {
+  try {
+    function findTitle() {
+      var hs = document.querySelectorAll('.rk-content h1');
+      for (var i = 0; i < hs.length; i++) { var t = (hs[i].textContent || '').trim(); if (t && t.toLowerCase() !== 'vidfarm') return hs[i]; }
+      return null;
+    }
+    function openModal(url) {
+      if (document.getElementById('vf-tut-modal')) return;
+      var ov = document.createElement('div');
+      ov.id = 'vf-tut-modal';
+      ov.style.cssText = 'position:fixed;inset:0;z-index:2147483000;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:24px;';
+      var box = document.createElement('div');
+      box.style.cssText = 'position:relative;width:min(900px,92vw);';
+      var vid = document.createElement('video');
+      vid.src = url; vid.controls = true; vid.autoplay = true; vid.playsInline = true;
+      vid.style.cssText = 'width:100%;max-height:86vh;border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.5);background:#000;display:block;';
+      var x = document.createElement('button');
+      x.type = 'button'; x.setAttribute('aria-label', 'Close'); x.innerHTML = '&times;';
+      x.style.cssText = 'position:absolute;top:-16px;right:-16px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#111;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;';
+      function close() { try { vid.pause(); } catch (e) {} ov.remove(); document.removeEventListener('keydown', onKey); }
+      function onKey(e) { if (e.key === 'Escape') close(); }
+      x.onclick = close;
+      ov.onclick = function (e) { if (e.target === ov) close(); };
+      document.addEventListener('keydown', onKey);
+      box.appendChild(vid); box.appendChild(x); ov.appendChild(box); document.body.appendChild(ov);
+    }
+    window.__vfOpenTutorial = openModal;
+    // Pop-panel (agent dock) tutorial button — present on every full-chrome page,
+    // next to the "VidFarm AI" title. Retry briefly in case the dock mounts late.
+    var pt = 0;
+    (function wirePop() {
+      var pv = document.getElementById('rkWatchPoppanel');
+      if (pv && window.__vfPoppanelVideo) { pv.onclick = function () { openModal(window.__vfPoppanelVideo); }; return; }
+      if (pt++ < 20) setTimeout(wirePop, 300);
+    })();
+    // Page-title tutorial button — only when this route has a matching video.
+    var routes = window.__vidfarmTutorials || [];
+    var path = location.pathname, hit = null;
+    for (var i = 0; i < routes.length; i++) { if (path === routes[i][0] || path.indexOf(routes[i][0]) === 0) { hit = routes[i][1]; break; } }
+    function inject() {
+      if (document.getElementById('vf-watch-tut')) return true;
+      var h1 = findTitle(); if (!h1) return false;
+      var btn = document.createElement('button');
+      btn.id = 'vf-watch-tut'; btn.type = 'button'; btn.setAttribute('aria-label', 'Watch Tutorial');
+      btn.style.cssText = 'display:inline-flex;align-items:center;gap:6px;margin-left:16px;padding:4px 10px;border:0;background:transparent;color:#9aa0a6;font-size:13px;font-weight:400;font-family:inherit;letter-spacing:0;cursor:pointer;vertical-align:middle;border-radius:8px;transition:color .15s,background .15s;';
+      btn.innerHTML = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M10 8.5l6 3.5-6 3.5z" fill="currentColor" stroke="none"></path></svg><span>Watch Tutorial</span>';
+      btn.onmouseenter = function () { btn.style.color = '#3c4043'; btn.style.background = 'rgba(0,0,0,.05)'; };
+      btn.onmouseleave = function () { btn.style.color = '#9aa0a6'; btn.style.background = 'transparent'; };
+      btn.onclick = function () { openModal(hit); };
+      h1.appendChild(btn);
+      return true;
+    }
+    if (hit) { var tries = 0; (function loop() { if (inject()) return; if (tries++ > 40) return; setTimeout(loop, 250); })(); }
+  } catch (e) {}
+})();</script>
 <script type="module" src="/assets/file-directory-app.js"></script>
 </body>
 </html>

package/public/serve-shells/tools-clipper.html

@@ -382,7 +382,10 @@
 /* chat column */
 .rk-aichat-main{flex:1;min-width:0;display:flex;flex-direction:column}
 .rk-aichat-head{display:flex;align-items:center;gap:8px;padding:14px 14px;border-bottom:1px solid var(--rk-border);flex:none}
-.rk-aichat-head-main{flex:1;min-width:0;display:grid;gap:1px}
+.rk-aichat-head-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
+.rk-aichat-head-titles{display:grid;gap:1px;min-width:0}
+.rk-aichat-watch{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--rk-text-muted);font-size:12px;font-weight:400;font-family:inherit;cursor:pointer;padding:3px 8px;border-radius:8px;white-space:nowrap;transition:color .15s,background .15s}
+.rk-aichat-watch:hover{color:var(--rk-ink);background:var(--rk-n-100)}
 .rk-aichat-title{font-family:var(--rk-font-display);font-weight:800;font-size:15px;color:var(--rk-ink);letter-spacing:-.01em}
 .rk-aichat-sub{font-size:11.5px;color:var(--rk-text-muted)}
 .rk-aichat-back{flex:1;min-width:0;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 9px;
@@ -1521,8 +1524,13 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
     <header class="rk-aichat-head">
       <span class="rk-brand-mark">V</span>
       <div class="rk-aichat-head-main">
-        <div class="rk-aichat-title">VidFarm AI</div>
-        <div class="rk-aichat-sub">on your own AI keys</div>
+        <div class="rk-aichat-head-titles">
+          <div class="rk-aichat-title">VidFarm AI</div>
+          <div class="rk-aichat-sub">on your own AI keys</div>
+        </div>
+        <button class="rk-aichat-watch" id="rkWatchPoppanel" type="button" title="Watch Tutorial" aria-label="Watch Tutorial">
+          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M10 8.5l6 3.5-6 3.5z" fill="currentColor" stroke="none"></path></svg><span>Watch Tutorial</span>
+        </button>
       </div>
       <button class="rk-aichat-tool" id="rkHistoryToggle" type="button" title="Chat history" aria-label="Toggle chat history" aria-pressed="false">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l3 2"/></svg>
@@ -2099,10 +2107,14 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
 
   // ── URL param preload ──
   function firstParam(names){ var p=new URLSearchParams(window.location.search); for(var i=0;i<names.length;i++){ var v=p.get(names[i]); if(v && v.trim()) return v.trim(); } return ""; }
-  function clearUrlParams(){ var u=new URL(window.location.href); ["source_url","source_video_url","video_url","url","source_video_name","video_name","file_name","tracer","tracer_id","trace"].forEach(function(k){ u.searchParams.delete(k); }); window.history.replaceState({}, "", u.toString()); }
+  function clearUrlParams(){ var u=new URL(window.location.href); ["source_url","source_video_url","video_url","url","source_video_name","video_name","file_name","tracer","tracer_id","trace","folder_path","folder"].forEach(function(k){ u.searchParams.delete(k); }); window.history.replaceState({}, "", u.toString()); }
   function initFromUrl(){
     var t = firstParam(["tracer","tracer_id","trace"]);
     if(t){ sessionTracer=t; tracerAutoPending=false; if(tracerInput) tracerInput.value=t; if(folderInput && !folderInput.value) folderInput.value=slug(t); }
+    // An explicit target folder (forwarded from the Import Raws modal) wins over
+    // the tracer-derived default so the whole-video import lands where asked.
+    var f = firstParam(["folder_path","folder"]);
+    if(f && folderInput){ folderInput.value=slug(f); }
     var src = firstParam(["source_url","source_video_url","video_url","url"]);
     if(src){ if(urlInput) urlInput.value = src; loadSourceUrl(src, firstParam(["source_video_name","video_name","file_name"])); }
     if(t) loadSession();
@@ -4048,6 +4060,63 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
     document.querySelectorAll("[data-skill-menu]").forEach((panel) => { panel.hidden = true; });
   });
 })();</script>
+<script>window.__vidfarmTutorials=[["/discover/templates/categories","/assets/blog/tutorial-videos/page-categories.mp4"],["/discover/templates/swipe","/assets/blog/tutorial-videos/page-swipe.mp4"],["/discover","/assets/blog/tutorial-videos/page-discover.mp4"],["/tools/image","/assets/blog/tutorial-videos/tools-image.mp4"],["/tools/video","/assets/blog/tutorial-videos/tools-video.mp4"],["/tools/clipper","/assets/blog/tutorial-videos/tools-clipper.mp4"],["/chat","/assets/blog/tutorial-videos/page-chat.mp4"],["/calendar","/assets/blog/tutorial-videos/page-calendar.mp4"],["/settings/profile","/assets/blog/tutorial-videos/page-profile.mp4"],["/settings/wallet","/assets/blog/tutorial-videos/page-wallet.mp4"],["/settings/channels","/assets/blog/tutorial-videos/page-channels.mp4"],["/settings/developer","/assets/blog/tutorial-videos/page-developer.mp4"],["/library","/assets/blog/tutorial-videos/page-library.mp4"]];window.__vfPoppanelVideo="/assets/blog/tutorial-videos/page-poppanel.mp4";</script>
+<script>(() => {
+  try {
+    function findTitle() {
+      var hs = document.querySelectorAll('.rk-content h1');
+      for (var i = 0; i < hs.length; i++) { var t = (hs[i].textContent || '').trim(); if (t && t.toLowerCase() !== 'vidfarm') return hs[i]; }
+      return null;
+    }
+    function openModal(url) {
+      if (document.getElementById('vf-tut-modal')) return;
+      var ov = document.createElement('div');
+      ov.id = 'vf-tut-modal';
+      ov.style.cssText = 'position:fixed;inset:0;z-index:2147483000;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:24px;';
+      var box = document.createElement('div');
+      box.style.cssText = 'position:relative;width:min(900px,92vw);';
+      var vid = document.createElement('video');
+      vid.src = url; vid.controls = true; vid.autoplay = true; vid.playsInline = true;
+      vid.style.cssText = 'width:100%;max-height:86vh;border-radius:14px;box-shadow:0 24px 80px rgba(0,0,0,.5);background:#000;display:block;';
+      var x = document.createElement('button');
+      x.type = 'button'; x.setAttribute('aria-label', 'Close'); x.innerHTML = '&times;';
+      x.style.cssText = 'position:absolute;top:-16px;right:-16px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#111;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;';
+      function close() { try { vid.pause(); } catch (e) {} ov.remove(); document.removeEventListener('keydown', onKey); }
+      function onKey(e) { if (e.key === 'Escape') close(); }
+      x.onclick = close;
+      ov.onclick = function (e) { if (e.target === ov) close(); };
+      document.addEventListener('keydown', onKey);
+      box.appendChild(vid); box.appendChild(x); ov.appendChild(box); document.body.appendChild(ov);
+    }
+    window.__vfOpenTutorial = openModal;
+    // Pop-panel (agent dock) tutorial button — present on every full-chrome page,
+    // next to the "VidFarm AI" title. Retry briefly in case the dock mounts late.
+    var pt = 0;
+    (function wirePop() {
+      var pv = document.getElementById('rkWatchPoppanel');
+      if (pv && window.__vfPoppanelVideo) { pv.onclick = function () { openModal(window.__vfPoppanelVideo); }; return; }
+      if (pt++ < 20) setTimeout(wirePop, 300);
+    })();
+    // Page-title tutorial button — only when this route has a matching video.
+    var routes = window.__vidfarmTutorials || [];
+    var path = location.pathname, hit = null;
+    for (var i = 0; i < routes.length; i++) { if (path === routes[i][0] || path.indexOf(routes[i][0]) === 0) { hit = routes[i][1]; break; } }
+    function inject() {
+      if (document.getElementById('vf-watch-tut')) return true;
+      var h1 = findTitle(); if (!h1) return false;
+      var btn = document.createElement('button');
+      btn.id = 'vf-watch-tut'; btn.type = 'button'; btn.setAttribute('aria-label', 'Watch Tutorial');
+      btn.style.cssText = 'display:inline-flex;align-items:center;gap:6px;margin-left:16px;padding:4px 10px;border:0;background:transparent;color:#9aa0a6;font-size:13px;font-weight:400;font-family:inherit;letter-spacing:0;cursor:pointer;vertical-align:middle;border-radius:8px;transition:color .15s,background .15s;';
+      btn.innerHTML = '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M10 8.5l6 3.5-6 3.5z" fill="currentColor" stroke="none"></path></svg><span>Watch Tutorial</span>';
+      btn.onmouseenter = function () { btn.style.color = '#3c4043'; btn.style.background = 'rgba(0,0,0,.05)'; };
+      btn.onmouseleave = function () { btn.style.color = '#9aa0a6'; btn.style.background = 'transparent'; };
+      btn.onclick = function () { openModal(hit); };
+      h1.appendChild(btn);
+      return true;
+    }
+    if (hit) { var tries = 0; (function loop() { if (inject()) return; if (tries++ > 40) return; setTimeout(loop, 250); })(); }
+  } catch (e) {}
+})();</script>
 <script type="module" src="/assets/file-directory-app.js"></script>
 </body>
 </html>