@officexapp/vidfarm-devcli 0.21.15 → 0.21.16

package/public/serve-shells/tools-image.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;
@@ -1195,11 +1198,15 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
 .rk-ip-gen-box{background:#fff;border:1.5px solid var(--rk-border-strong);border-radius:var(--rk-r-2xl);padding:10px 10px 8px;display:grid;gap:8px;
   box-shadow:var(--rk-shadow-sm);transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease);text-align:left}
 .rk-ip-gen-box:focus-within{border-color:var(--rk-gold-600);box-shadow:0 0 0 3px var(--rk-gold-tint)}
+.rk-ip-gen.is-dragref .rk-ip-gen-box{border-color:var(--rk-gold-600);border-style:dashed;background:var(--rk-gold-tint)}
 .rk-ip-gen.is-busy .rk-ip-gen-box{opacity:.75}
 .rk-ip-gen-input{width:100%;border:0;outline:0;resize:none;background:transparent;font:inherit;font-size:14px;line-height:1.45;color:var(--rk-ink);min-height:44px;padding:2px 4px}
 .rk-ip-gen-input::placeholder{color:var(--rk-text-faint)}
 .rk-ip-gen-input:disabled{cursor:not-allowed;color:var(--rk-text-muted)}
 .rk-ip-gen-clip:disabled{opacity:.5;cursor:not-allowed}
+.rk-ip-gen-presets{display:flex;flex-wrap:wrap;gap:6px}
+.rk-ip-preset{flex:none;border:1px dashed var(--rk-border-strong,var(--rk-border));background:var(--rk-n-50);color:var(--rk-n-700);border-radius:999px;padding:4px 10px;font-size:11.5px;font-weight:600;cursor:pointer;transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-ip-preset:hover{background:var(--rk-gold-tint);color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
 .rk-ip-gen-refs{display:flex;flex-wrap:wrap;gap:6px}
 .rk-ip-gen-refs[hidden]{display:none}
 .rk-ip-gen-ref{display:inline-flex;align-items:center;gap:6px;padding:3px 4px 3px 6px;border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);background:var(--rk-n-50);font-size:11.5px;color:var(--rk-n-700);max-width:180px}
@@ -1227,6 +1234,10 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
 .rk-ip-filemodal-panel{width:min(560px,100%);max-height:min(80vh,680px);display:flex;flex-direction:column;background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-lg,var(--rk-shadow-card));overflow:hidden}
 .rk-ip-filemodal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--rk-border)}
 .rk-ip-filemodal-title{font-family:var(--rk-font-display);font-weight:800;font-size:var(--rk-text-md,15px);color:var(--rk-ink)}
+.rk-ip-filemodal-actions{display:flex;align-items:center;gap:10px}
+.rk-ip-filemodal-upload{border:1px solid var(--rk-border-strong,var(--rk-border));background:var(--rk-n-50);color:var(--rk-n-700);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-ip-filemodal-upload:hover:not(:disabled){background:var(--rk-gold-tint);color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
+.rk-ip-filemodal-upload:disabled{opacity:.6;cursor:default}
 .rk-ip-filemodal-close{border:0;background:transparent;font-size:22px;line-height:1;color:var(--rk-text-muted);cursor:pointer;padding:0 4px}
 .rk-ip-filemodal-close:hover{color:var(--rk-ink)}
 .rk-ip-filemodal-mount{padding:12px 14px;overflow:auto;flex:1;min-height:0}
@@ -1457,6 +1468,10 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
           <span class="rk-ip-gen-or">or</span>
           <div class="rk-ip-gen-box">
             <textarea id="rk-ip-genprompt" class="rk-ip-gen-input" rows="2" placeholder="Or type your image prompt"></textarea>
+            <div class="rk-ip-gen-presets" id="rk-ip-genpresets">
+              <button type="button" class="rk-ip-preset" data-preset="character-card" title="Fill the prompt with a character reference sheet (multi-angle, expressions, poses)">＋ Character card</button>
+              <button type="button" class="rk-ip-preset" data-preset="storyboard" title="Fill the prompt with a numbered storyboard (sequential shot panels)">＋ Storyboard</button>
+            </div>
             <div class="rk-ip-gen-refs" id="rk-ip-genrefs" hidden></div>
             <div class="rk-ip-gen-bar">
               <button type="button" class="rk-ip-gen-clip" id="rk-ip-genclip" aria-label="Attach reference images from your files" title="Attach reference images from your files"><svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m8.1 10.7 4.8-4.8a2.5 2.5 0 0 1 3.5 3.5l-6.1 6.1a4 4 0 0 1-5.7-5.7l6.3-6.3"/><path d="m10 8.8-4.1 4.1a1.6 1.6 0 0 0 2.3 2.3l5.6-5.6"/></svg></button>
@@ -1596,8 +1611,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>
@@ -3612,8 +3632,35 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
             var panel = document.createElement('div'); panel.className = 'rk-ip-filemodal-panel';
             var head = document.createElement('div'); head.className = 'rk-ip-filemodal-head';
             var title = document.createElement('span'); title.className = 'rk-ip-filemodal-title'; title.textContent = 'Attach reference images';
+            var headActions = document.createElement('div'); headActions.className = 'rk-ip-filemodal-actions';
+            var uploadBtn = document.createElement('button'); uploadBtn.type = 'button'; uploadBtn.className = 'rk-ip-filemodal-upload'; uploadBtn.textContent = '\u2191 Upload from computer';
+            var uploadInput = document.createElement('input'); uploadInput.type = 'file'; uploadInput.accept = 'image/png,image/jpeg,image/webp,image/gif,image/avif'; uploadInput.multiple = true; uploadInput.hidden = true;
             var close = document.createElement('button'); close.type = 'button'; close.className = 'rk-ip-filemodal-close'; close.setAttribute('aria-label', 'Close'); close.innerHTML = '&times;';
-            head.appendChild(title); head.appendChild(close);
+            headActions.appendChild(uploadBtn); headActions.appendChild(close);
+            head.appendChild(title); head.appendChild(headActions); head.appendChild(uploadInput);
+            uploadBtn.addEventListener('click', function(){ if(!uploadBtn.disabled) uploadInput.click(); });
+            uploadInput.addEventListener('change', function(){
+              var files = Array.prototype.slice.call(uploadInput.files || []).filter(function(f){ return /^image\//i.test(f.type || '') || /\.(png|jpe?g|gif|webp|avif)$/i.test(f.name || ''); });
+              uploadInput.value = '';
+              if(!files.length){ setGenStatus('Pick an image file to upload as a reference.', 'error'); return; }
+              uploadBtn.disabled = true; var original = uploadBtn.textContent; uploadBtn.textContent = 'Uploading\u2026';
+              setGenStatus('Uploading ' + files.length + ' reference' + (files.length > 1 ? 's' : '') + '\u2026', '');
+              var added = 0;
+              files.reduce(function(chain, f){
+                return chain.then(function(){
+                  return uploadTemporaryBlob(f, f.name || 'reference.png', f.type || 'image/png').then(function(url){
+                    if(url && genRefs.indexOf(url) === -1){ genRefs.push(url); added++; renderGenRefs(); }
+                  });
+                });
+              }, Promise.resolve()).then(function(){
+                uploadBtn.disabled = false; uploadBtn.textContent = original;
+                if(added){ setGenStatus(added + ' reference' + (added > 1 ? 's' : '') + ' uploaded.', 'success'); closeGenFilePanel(); }
+                else setGenStatus('Those files were already attached.', '');
+              }).catch(function(err){
+                uploadBtn.disabled = false; uploadBtn.textContent = original;
+                setGenStatus((err && err.message) ? err.message : 'Upload failed.', 'error');
+              });
+            });
             var mountEl = document.createElement('div'); mountEl.className = 'rk-ip-filemodal-mount';
             panel.appendChild(head); panel.appendChild(mountEl); overlay.appendChild(panel);
             document.body.appendChild(overlay); genFileModal = overlay;
@@ -3639,6 +3686,30 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
             }
           }
 
+          // Paste or drop image files straight into the composer -> temp upload -> reference.
+          function addGenReferenceFiles(fileList){
+            var files = Array.prototype.slice.call(fileList || []).filter(function(f){ return /^image\//i.test(f.type || '') || /\.(png|jpe?g|gif|webp|avif)$/i.test(f.name || ''); });
+            if(!files.length) return Promise.resolve(0);
+            setGenStatus('Uploading ' + files.length + ' reference' + (files.length > 1 ? 's' : '') + '\u2026', '');
+            var added = 0;
+            return files.reduce(function(chain, f){
+              return chain.then(function(){
+                return uploadTemporaryBlob(f, f.name || 'pasted-image.png', f.type || 'image/png').then(function(url){
+                  if(url && genRefs.indexOf(url) === -1){ genRefs.push(url); added++; renderGenRefs(); }
+                });
+              });
+            }, Promise.resolve()).then(function(){
+              if(added) setGenStatus(added + ' reference' + (added > 1 ? 's' : '') + ' attached.', 'success');
+              return added;
+            }).catch(function(err){ setGenStatus((err && err.message) ? err.message : 'Upload failed.', 'error'); return added; });
+          }
+          function imagesFromClipboard(e){
+            var items = (e.clipboardData && e.clipboardData.items) || []; var out = [];
+            for(var i = 0; i < items.length; i++){ if(items[i].kind === 'file'){ var f = items[i].getAsFile(); if(f && /^image\//i.test(f.type || '')) out.push(f); } }
+            return out;
+          }
+          function dtHasFiles(e){ var t = (e.dataTransfer && e.dataTransfer.types) || []; return Array.prototype.indexOf.call(t, 'Files') !== -1; }
+
           function pollImageGenerateJob(jobId){
             var attempt = 0;
             function step(){
@@ -3661,8 +3732,41 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
             return step();
           }
 
+          // "character card" / "storyboard" shorthand — spell out the full layout
+          // so the image model produces a reference sheet / numbered shot board
+          // instead of a single picture. Snippets are shared with the AI chat +
+          // SKILL.md via src/services/image-prompt-presets.ts.
+          var CHAR_CARD_SNIPPET = "Render this as a CHARACTER REFERENCE SHEET (a.k.a. character card / model sheet / sprite card) on a plain neutral light-gray studio background — ONE single consistent character laid out as a clean labeled grid of views: BODY SHOTS (full body, three-quarter body, half body, and a head-and-shoulders 'original expression'); a CHARACTER TURNAROUND standing in a row (front, side profile, back view); an EXPRESSION SHEET of face close-ups (happy, sad, angry, blank / dazed); and a POSE SHEET of 2-3 dynamic action poses. Keep the SAME face, hairstyle, wardrobe, colors, body proportions and art style IDENTICAL across every panel so the character stays perfectly consistent. Small text label under each view, even flat studio lighting, no background scenery.";
+          var STORYBOARD_SNIPPET = "Render this as a STORYBOARD: a single sheet of sequential NUMBERED panels laid out in a grid (e.g. 3x3), each panel a framed still of one shot / scene in order, with a short caption UNDER each frame describing the action, the camera move (pan / zoom / cut) and any voiceover or sound. Keep the same characters and setting consistent from panel to panel; add small arrows to show motion or camera moves where useful; read left-to-right, top-to-bottom like a film / animation pre-viz board. IMPORTANT: this storyboard is ALSO a look / style fit-check, so render every panel in the SAME visual style intended for the final piece — match whatever style the subject implies (photoreal, cinematic, 3D, anime, flat illustration, etc.); only fall back to a clean pencil / line sketch if the user gave no style at all.";
+          function shorthandAlreadyExpanded(t){ var l=(t||'').toLowerCase(); return l.indexOf('character reference sheet')>=0 || l.indexOf('sequential numbered panels')>=0; }
+          function expandShorthand(t){
+            var text=(t||'').trim(); if(!text) return t;
+            if(shorthandAlreadyExpanded(text)) return text;
+            var cc=/\bcharacter\s+(card|sheet|reference\s+sheet|model\s+sheet)\b|\bmodel\s+sheet\b|\bsprite\s+card\b/i.test(text);
+            var sb=/\bstory\s?boards?\b/i.test(text);
+            if(!cc && !sb) return text;
+            var snip = cc ? CHAR_CARD_SNIPPET : STORYBOARD_SNIPPET;
+            var sep = /[.!?]\s*$/.test(text) ? ' ' : '. ';
+            return text + sep + snip;
+          }
+          function applyGenPreset(kind){
+            if(!genPrompt) return;
+            var snip = kind === 'storyboard' ? STORYBOARD_SNIPPET : CHAR_CARD_SNIPPET;
+            var cur = (genPrompt.value || '').split(CHAR_CARD_SNIPPET).join('').split(STORYBOARD_SNIPPET).join('').replace(/[\s.]+$/, '').trim();
+            var caret;
+            if(cur){ var sep = /[.!?]$/.test(cur) ? ' ' : '. '; genPrompt.value = cur + sep + snip; caret = cur.length; }
+            else { var lead = kind === 'storyboard' ? 'A storyboard for ' : 'A character card of '; genPrompt.value = lead + snip; caret = lead.length; }
+            genPrompt.focus();
+            try{ genPrompt.setSelectionRange(caret, caret); }catch(_){}
+            setGenStatus(kind === 'storyboard' ? 'Storyboard layout added \u2014 describe your scenes, then Generate.' : 'Character-card layout added \u2014 describe your character, then Generate.', '');
+            syncGenSend();
+          }
+          Array.prototype.forEach.call(document.querySelectorAll('#rk-ip-genpresets .rk-ip-preset'), function(btn){
+            btn.addEventListener('click', function(){ applyGenPreset(btn.getAttribute('data-preset') || 'character-card'); });
+          });
+
           function submitGenerate(){
-            var p = (genPrompt && genPrompt.value || '').trim();
+            var p = expandShorthand((genPrompt && genPrompt.value || '').trim());
             if(!p){ setGenStatus('Type a prompt to generate an image.', 'error'); if(genPrompt) genPrompt.focus(); return; }
             if(genBusy) return;
             genBusy = true; syncGenSend(); if(genWrap) genWrap.classList.add('is-busy');
@@ -3691,6 +3795,12 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
           if(genPrompt){
             genPrompt.addEventListener('input', syncGenSend);
             genPrompt.addEventListener('keydown', function(e){ if(e.key === 'Enter' && !e.shiftKey){ e.preventDefault(); submitGenerate(); } });
+            genPrompt.addEventListener('paste', function(e){ var imgs = imagesFromClipboard(e); if(imgs.length){ e.preventDefault(); addGenReferenceFiles(imgs); } });
+          }
+          if(genWrap){
+            ['dragenter', 'dragover'].forEach(function(ev){ genWrap.addEventListener(ev, function(e){ if(dtHasFiles(e)){ e.preventDefault(); e.stopPropagation(); genWrap.classList.add('is-dragref'); } }); });
+            ['dragleave', 'dragend'].forEach(function(ev){ genWrap.addEventListener(ev, function(){ genWrap.classList.remove('is-dragref'); }); });
+            genWrap.addEventListener('drop', function(e){ if(dtHasFiles(e)){ e.preventDefault(); e.stopPropagation(); genWrap.classList.remove('is-dragref'); addGenReferenceFiles(e.dataTransfer.files); } });
           }
           if(genClip) genClip.addEventListener('click', openGenFilePanel);
           if(genSend) genSend.addEventListener('click', submitGenerate);
@@ -5641,6 +5751,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>

package/public/serve-shells/tools-video.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;
@@ -1196,6 +1199,7 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
 .rk-ip-gen-or::before{left:0}.rk-ip-gen-or::after{right:0}
 .rk-ip-gen-box{background:#fff;border:1.5px solid var(--rk-border-strong);border-radius:var(--rk-r-2xl);padding:10px 10px 8px;display:grid;gap:8px;box-shadow:var(--rk-shadow-sm);text-align:left}
 .rk-ip-gen-box:focus-within{border-color:var(--rk-gold-600);box-shadow:0 0 0 3px var(--rk-gold-tint)}
+.rk-ip-gen.is-dragref .rk-ip-gen-box{border-color:var(--rk-gold-600);border-style:dashed;background:var(--rk-gold-tint)}
 .rk-ip-gen.is-busy .rk-ip-gen-box{opacity:.75}
 .rk-ip-gen-input{width:100%;border:0;outline:0;resize:none;background:transparent;font:inherit;font-size:14px;line-height:1.45;color:var(--rk-ink);min-height:44px;padding:2px 4px}
 .rk-ip-gen-input::placeholder{color:var(--rk-text-faint)}
@@ -1629,8 +1633,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>
@@ -2479,6 +2488,29 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
     dir.pick({ select: "file", roots: ["files","temp","raws"], title: "Attach reference images", hint: "Pick one or more images to guide the generation.", confirmLabel: "Attach", multiple: true,
       onPick: function(picked){ var arr = Array.isArray(picked) ? picked : [picked]; arr.forEach(function(f){ var url = f && (f.url || f.viewUrl); if(url){ try { genRefs.push(absoluteUrl(url)); } catch(_){} } }); renderGenRefs(); } });
   }
+  // Paste or drop image files straight into the composer -> temp upload -> reference.
+  function addGenReferenceFiles(fileList){
+    var files = Array.prototype.slice.call(fileList || []).filter(function(f){ return /^image\//i.test(f.type || "") || /\.(png|jpe?g|gif|webp|avif)$/i.test(f.name || ""); });
+    if(!files.length) return Promise.resolve(0);
+    setGenStatus("Uploading " + files.length + " reference" + (files.length > 1 ? "s" : "") + "\u2026", "");
+    var added = 0;
+    return files.reduce(function(chain, f){
+      return chain.then(function(){
+        return uploadTemporaryBlob(f, f.name || ("pasted-image.png"), f.type || "image/png").then(function(uploaded){
+          if(uploaded){ var url = absoluteUrl(uploaded); if(genRefs.indexOf(url) === -1){ genRefs.push(url); added++; renderGenRefs(); } }
+        });
+      });
+    }, Promise.resolve()).then(function(){
+      if(added) setGenStatus(added + " reference" + (added > 1 ? "s" : "") + " attached.", "success");
+      return added;
+    }).catch(function(err){ setGenStatus((err && err.message) ? err.message : "Upload failed.", "error"); return added; });
+  }
+  function imagesFromClipboard(e){
+    var items = (e.clipboardData && e.clipboardData.items) || []; var out = [];
+    for(var i = 0; i < items.length; i++){ if(items[i].kind === "file"){ var f = items[i].getAsFile(); if(f && /^image\//i.test(f.type || "")) out.push(f); } }
+    return out;
+  }
+  function dtHasFiles(e){ var t = (e.dataTransfer && e.dataTransfer.types) || []; return Array.prototype.indexOf.call(t, "Files") !== -1; }
   function pollGenerateJob(jobId){
     var attempt = 0;
     function step(){
@@ -2513,7 +2545,16 @@ body.vf-has-topbanner.rk-has-sidebar .rk-content{padding-top:var(--vf-topbanner-
       .catch(function(err){ var msg = (err && err.message) ? err.message : "Unable to generate video."; if(/401|403|sign in|unauth/i.test(msg)) msg = "Sign in to generate videos."; setGenStatus(msg, "error"); })
       .then(function(){ genBusy = false; if(genWrap) genWrap.classList.remove("is-busy"); syncGenSend(); });
   }
-  if(genPrompt){ genPrompt.addEventListener("input", syncGenSend); genPrompt.addEventListener("keydown", function(e){ if(e.key === "Enter" && !e.shiftKey){ e.preventDefault(); submitGenerateNew(); } }); }
+  if(genPrompt){
+    genPrompt.addEventListener("input", syncGenSend);
+    genPrompt.addEventListener("keydown", function(e){ if(e.key === "Enter" && !e.shiftKey){ e.preventDefault(); submitGenerateNew(); } });
+    genPrompt.addEventListener("paste", function(e){ var imgs = imagesFromClipboard(e); if(imgs.length){ e.preventDefault(); addGenReferenceFiles(imgs); } });
+  }
+  if(genWrap){
+    ["dragenter","dragover"].forEach(function(ev){ genWrap.addEventListener(ev, function(e){ if(dtHasFiles(e)){ e.preventDefault(); e.stopPropagation(); genWrap.classList.add("is-dragref"); } }); });
+    ["dragleave","dragend"].forEach(function(ev){ genWrap.addEventListener(ev, function(){ genWrap.classList.remove("is-dragref"); }); });
+    genWrap.addEventListener("drop", function(e){ if(dtHasFiles(e)){ e.preventDefault(); e.stopPropagation(); genWrap.classList.remove("is-dragref"); addGenReferenceFiles(e.dataTransfer.files); } });
+  }
   if(genClip) genClip.addEventListener("click", openGenFilePanel);
   if(genSend) genSend.addEventListener("click", submitGenerateNew);
   renderGenRefs(); syncGenSend();
@@ -4461,6 +4502,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>