@mevdragon/vidfarm-devcli 0.18.1 → 0.19.0

package/dist/src/reskin/discover-page.js

@@ -145,6 +145,30 @@ function viewerHtml() {
       </div>
     </div>`;
 }
+// The fullscreen TikTok-style viewer for the SWIPE deck — a sibling of the feed
+// viewer above but purpose-built for swiping: slides carry live composition
+// iframes (not video/img), and a bottom action bar reject/approves the ACTIVE
+// card, driving the same POST /discover/swipe/:id/{approve,reject} the deck uses.
+// The client script (swipe block) fills [data-sv-track] with slides on open.
+function swipeViewerHtml() {
+    return `
+    <div class="rk-discover-viewer rk-swipe-viewer" data-rk-swipe-viewer hidden role="dialog" aria-modal="true" aria-label="Swipe preview">
+      <div class="rk-discover-viewer-scrim" data-sv-close></div>
+      <div class="rk-discover-viewer-track rk-swipe-viewer-track" data-sv-track></div>
+      <div class="rk-discover-viewer-ui">
+        <button type="button" class="rk-discover-viewer-btn" data-sv-mute aria-label="Toggle sound"><span class="rk-dvm-on">${SOUND_ON_ICON}</span><span class="rk-dvm-off">${SOUND_OFF_ICON}</span></button>
+        <button type="button" class="rk-discover-viewer-btn" data-sv-close aria-label="Close viewer">${CROSS_ICON}</button>
+      </div>
+      <div class="rk-discover-viewer-nav">
+        <button type="button" class="rk-discover-viewer-btn" data-sv-prev aria-label="Previous">${CHEV_UP_ICON}</button>
+        <button type="button" class="rk-discover-viewer-btn" data-sv-next aria-label="Next">${CHEV_DOWN_ICON}</button>
+      </div>
+      <div class="rk-swipe-viewer-actions" data-sv-actions>
+        <button type="button" class="rk-discover-act rk-discover-act-skip" data-sv-reject aria-label="Reject">${CROSS_ICON}</button>
+        <button type="button" class="rk-discover-act rk-discover-act-fork" data-sv-approve aria-label="Approve">${CHECK_ICON}</button>
+      </div>
+    </div>`;
+}
 // The "Add New" modal (feed mode only) — paste a social video URL or upload a
 // video, adding it to the caller's private Discover feed via the same real
 // endpoints the old React SPA used (POST /discover/templates + the upload
@@ -237,8 +261,8 @@ export function renderReskinDiscover(mode = "feed", input = {}) {
         </div>
         <button type="button" class="rk-discover-act rk-discover-act-fork" data-swipe-fork data-swipe-act hidden aria-label="Fork">${CHECK_ICON}</button>
       </div>
-      <p class="rk-discover-act-hint" data-actions-hint hidden>Swipe to customize into an ad for your brand.</p>
-    </div>`;
+      <p class="rk-discover-act-hint" data-actions-hint hidden>Tap the card to preview full-screen. Swipe to customize into an ad for your brand.</p>
+    </div>${swipeViewerHtml()}`;
     }
     // ── CATEGORIES ──────────────────────────────────────────────────────────
     if (mode === "categories") {
@@ -537,6 +561,19 @@ video.rk-discover-viewer-media{cursor:pointer}
 .rk-discover-act-fork:hover{background:var(--rk-gold-700);box-shadow:0 8px 22px -6px rgba(252,185,0,.6)}
 .rk-discover-act-hint{font-size:12.5px;font-weight:600;color:var(--rk-text-faint);text-align:center;letter-spacing:.01em}
 .rk-discover-act-hint[hidden]{display:none}
+/* tapping the front card opens the fullscreen swipe viewer */
+.rk-discover-deck .rk-discover-swipe{cursor:pointer}
+/* ── swipe: fullscreen TikTok viewer — reuses .rk-discover-viewer* shell; slides
+   hold live composition iframes (.rk-discover-swipe-frame) and a bottom bar
+   reject/approves the active card. */
+.rk-swipe-viewer-stage{background:#000}
+.rk-swipe-viewer-slide .rk-discover-swipe-frame{border-radius:inherit}
+.rk-swipe-viewer .rk-discover-viewer-info{padding-bottom:112px}
+.rk-swipe-viewer-actions{position:absolute;left:0;right:0;bottom:max(24px,env(safe-area-inset-bottom,0px));z-index:6;
+  display:flex;gap:40px;justify-content:center;align-items:center;pointer-events:none}
+.rk-swipe-viewer-actions .rk-discover-act{pointer-events:auto;width:64px;height:64px}
+.rk-swipe-viewer-actions .rk-discover-act[hidden]{display:none}
+@media(max-width:560px){.rk-swipe-viewer-actions{gap:30px}}
 
 /* ── categories: browse-by-format cards ── */
 .rk-discover-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:20px}
@@ -759,7 +796,7 @@ video.rk-discover-viewer-media{cursor:pointer}
       ? '<span class="rk-btn rk-btn-ghost rk-btn-sm rk-btn-block rk-discover-fork rk-discover-fork-disabled" aria-disabled="true">'+(t.status==='failed'?'Download failed':'Preparing&hellip;')+'</span>'
       : remix
         ? '<button type="button" class="rk-btn rk-btn-gold rk-btn-sm rk-btn-block rk-discover-fork" data-remix="'+attr(inspirationIdOf(t))+'">'+EDIT_ICON+' Remix</button>'
-        : '<a class="rk-btn rk-btn-gold rk-btn-sm rk-btn-block rk-discover-fork" href="'+attr(editorUrl(tid))+'">'+EDIT_ICON+' Open Editor</a>';
+        : '<a class="rk-btn rk-btn-gold rk-btn-sm rk-btn-block rk-discover-fork" href="'+attr(editorUrl(tid))+'" target="_blank" rel="noopener">'+EDIT_ICON+' Open Editor</a>';
     return '<article class="rk-discover-card rk-card-hover">'
       + poster
       + '<div class="rk-discover-body">'
@@ -846,7 +883,7 @@ video.rk-discover-viewer-media{cursor:pointer}
             +(desc?'<div class="rk-discover-viewer-desc">'+esc(desc)+'</div>':'')
             +(remix
               ? '<button type="button" class="rk-btn rk-btn-gold rk-btn-sm rk-discover-viewer-fork" data-remix="'+attr(inspirationIdOf(t))+'">'+EDIT_ICON+' Remix</button>'
-              : '<a class="rk-btn rk-btn-gold rk-btn-sm rk-discover-viewer-fork" href="'+attr(editorUrl(tid))+'">'+EDIT_ICON+' Open Editor</a>')
+              : '<a class="rk-btn rk-btn-gold rk-btn-sm rk-discover-viewer-fork" href="'+attr(editorUrl(tid))+'" target="_blank" rel="noopener">'+EDIT_ICON+' Open Editor</a>')
           +'</div>'
         +'</figure>'
       +'</section>';
@@ -1236,6 +1273,7 @@ video.rk-discover-viewer-media{cursor:pointer}
     var soundBtn=swipeRoot.querySelector('[data-swipe-sound]');
     var sw={target:5,customizing:0,productSet:false,busy:false,refilling:false,loaded:false,soundOn:false,known:{}};
     var nodes=[]; // live card DOM nodes, top-of-deck first
+    var deckExpanded=false; // true while the fullscreen swipe viewer owns the previews
 
     // ── audio: the same-origin preview iframes poll these window flags (see
     // injectSwipePreviewFit). Only the TOP card's id is named audible so the
@@ -1243,6 +1281,9 @@ video.rk-discover-viewer-media{cursor:pointer}
     // always start muted (the only autoplay browsers permit); the toggle is the
     // user gesture that unlocks sound.
     function syncSound(){
+      // While the fullscreen viewer is open it owns the audio flags (it names the
+      // active slide's card audible); the deck must not clobber them.
+      if(deckExpanded) return;
       try{
         window.__VF_SWIPE_SOUND__ = sw.soundOn===true;
         window.__VF_SWIPE_SOUND_TOP__ = nodes.length? String(nodes[0]._card.id): null;
@@ -1308,12 +1349,16 @@ video.rk-discover-viewer-media{cursor:pointer}
         el.style.zIndex=String(20-i);
         el.style.transform='translateY('+(i*12)+'px) scale('+(1-i*0.045).toFixed(3)+')';
         el.style.opacity=i===0?'1':(i===1?'0.92':'0.82');
-        if(i<=1) upgradeToIframe(el);
+        // The viewer owns the previews while expanded — don't build deck iframes
+        // (that would double the audio + CPU); resume rebuilds them on close.
+        if(i<=1 && !deckExpanded) upgradeToIframe(el);
       });
       var has=nodes.length>0;
       actionBtns.forEach(function(b){ b.hidden=!has; });
       if(hint) hint.hidden=!has;
       syncSound(); updateSoundBtn();
+      // Keep the open viewer's slide list in step with refills/removals.
+      if(deckExpanded && swViewer) swViewer.sync();
       if(!has) swCaughtUp();
     }
     function swCaughtUp(){
@@ -1323,6 +1368,25 @@ video.rk-discover-viewer-media{cursor:pointer}
         swShowState('<div class="rk-discover-swipe-state-title">You\\u2019re all caught up</div><div>No more templates to customize right now. Check back as new ones are added.</div>');
       }
     }
+    // POST approve/reject for a card (shared by the deck buttons + the viewer).
+    function postDecision(card,dir){
+      var path=swipeBase+'/'+encodeURIComponent(String(card.id))+'/'+(dir==='fork'?'approve':'reject');
+      return fetch(withAccount(path),{method:'POST',credentials:'same-origin',headers:{'content-type':'application/json','accept':'application/json'},body:'{}'})
+        .then(function(r){ return r.json().catch(function(){ return {}; }); })
+        .catch(function(){ return {}; });
+    }
+    // Drop a card from the live deck (array + its DOM node) by id. The viewer can
+    // consume a card that isn't the top one, so removal is id-based, not shift().
+    function removeNodeByCard(card){
+      var id=card&&card.id!=null?String(card.id):null; if(id==null) return;
+      for(var i=0;i<nodes.length;i++){
+        if(String(nodes[i]._card.id)===id){
+          var el=nodes[i]; nodes.splice(i,1);
+          if(el&&el.parentNode) el.parentNode.removeChild(el);
+          return;
+        }
+      }
+    }
     function decide(dir){
       if(sw.busy||!nodes.length) return;
       sw.busy=true;
@@ -1333,11 +1397,7 @@ video.rk-discover-viewer-media{cursor:pointer}
       el.style.transform='translateX('+(dir==='fork'?460:-460)+'px) rotate('+(dir==='fork'?15:-15)+'deg)';
       el.style.opacity='0';
       window.setTimeout(function(){ if(el&&el.parentNode) el.parentNode.removeChild(el); },380);
-      var path=swipeBase+'/'+encodeURIComponent(String(card.id))+'/'+(dir==='fork'?'approve':'reject');
-      fetch(withAccount(path),{method:'POST',credentials:'same-origin',headers:{'content-type':'application/json','accept':'application/json'},body:'{}'})
-        .then(function(r){ return r.json().catch(function(){ return {}; }); })
-        .catch(function(){ /* swallowed — the card already left the deck */ })
-        .then(function(){ sw.busy=false; restack(); refill(); });
+      postDecision(card,dir).then(function(){ sw.busy=false; restack(); refill(); });
     }
     function refill(){
       if(sw.refilling||!sw.productSet||!sw.loaded) return;
@@ -1420,6 +1480,183 @@ video.rk-discover-viewer-media{cursor:pointer}
           swShowState('<div class="rk-discover-swipe-state-title">Couldn\\u2019t load your deck</div><div>'+esc(friendlyError(err))+'</div>','error');
         });
     }
+    // ── fullscreen swipe viewer — a TikTok-style vertical scroll over the CURRENT
+    // deck. Its bottom bar reject/approves the ACTIVE slide (same postDecision +
+    // refill the deck buttons use). While open it OWNS the previews: the deck's
+    // iframes are torn down (parkDeck) so audio/CPU never double, and it drives
+    // __VF_SWIPE_SOUND_* for the active slide's card. Closing rebuilds the deck.
+    var swViewer=(function(){
+      var el=root.querySelector('[data-rk-swipe-viewer]');
+      if(!el) return null;
+      var track=el.querySelector('[data-sv-track]');
+      var actionsEl=el.querySelector('[data-sv-actions]');
+      var rejectBtn=el.querySelector('[data-sv-reject]');
+      var approveBtn=el.querySelector('[data-sv-approve]');
+      var open=false, active=-1, sound=false, io=null, busy=false, activeCardId=null;
+
+      function updateMuteUi(){ el.classList.toggle('is-muted',!sound); }
+      function syncSVSound(){
+        try{ window.__VF_SWIPE_SOUND__ = sound===true; window.__VF_SWIPE_SOUND_TOP__ = activeCardId || null; }catch(e){}
+        updateMuteUi();
+      }
+      function updateActionState(){ if(actionsEl) actionsEl.style.display=track.children.length?'':'none'; }
+      // Detach every deck iframe so only the viewer plays audio/video.
+      function parkDeck(){
+        nodes.forEach(function(n){
+          var f=n.querySelector('.rk-discover-swipe-frame');
+          if(f&&f.parentNode) f.parentNode.removeChild(f);
+          n._iframed=false;
+          var fb=n.querySelector('.rk-discover-swipe-fallback');
+          if(fb){ fb.style.opacity=''; fb.style.pointerEvents=''; }
+        });
+      }
+      function hydrate(slide){
+        if(!slide||slide._iframed) return;
+        var url=slide.getAttribute('data-preview-url'); if(!url) return;
+        var fb=slide.querySelector('.rk-discover-swipe-fallback');
+        var frame=document.createElement('iframe');
+        frame.className='rk-discover-swipe-frame';
+        frame.setAttribute('src',url);
+        frame.setAttribute('title', slide.getAttribute('data-title')||'Preview');
+        frame.setAttribute('loading','lazy');
+        frame.setAttribute('scrolling','no');
+        frame.setAttribute('allow','autoplay');
+        function reveal(){ if(fb){ fb.style.opacity='0'; fb.style.pointerEvents='none'; } }
+        frame.addEventListener('load',function(){ window.setTimeout(reveal,120); });
+        window.setTimeout(reveal,2600);
+        var stage=slide.querySelector('.rk-swipe-viewer-stage');
+        if(stage) stage.insertBefore(frame, stage.firstChild); else slide.insertBefore(frame, slide.firstChild);
+        slide._iframed=true;
+      }
+      function setActive(idx){
+        active=idx;
+        var kids=track.children;
+        for(var i=0;i<kids.length;i++){ if(Math.abs(i-idx)<=1) hydrate(kids[i]); }
+        var s=kids[idx];
+        activeCardId=s? s.getAttribute('data-card-id'): null;
+        syncSVSound();
+      }
+      function appendSlide(card){
+        var slide=document.createElement('section');
+        slide.className='rk-discover-viewer-slide rk-swipe-viewer-slide';
+        slide.setAttribute('data-card-id', String(card.id));
+        var url=card.preview_url||card.previewUrl||'';
+        if(url) slide.setAttribute('data-preview-url', url);
+        var titleTxt=String(card.title||card.source_title||card.template_id||'Template');
+        slide.setAttribute('data-title', titleTxt);
+        var title=esc(titleTxt);
+        var caption=card.caption?('<div class="rk-discover-viewer-desc">'+esc(card.caption)+'</div>'):'';
+        slide.innerHTML='<figure class="rk-discover-viewer-stage rk-swipe-viewer-stage">'
+          +'<div class="rk-discover-swipe-fallback"><span>'+title+'</span></div>'
+          +'<div class="rk-discover-viewer-shade"></div>'
+          +'<div class="rk-discover-viewer-info"><div class="rk-discover-viewer-title">'+title+'</div>'+caption+'</div>'
+          +'</figure>';
+        track.appendChild(slide);
+        if(open&&io) io.observe(slide);
+        return slide;
+      }
+      // Keep the open track in step with the live deck: append a slide for any
+      // node that doesn't have one yet (refills). Removals go through decide().
+      function sync(){
+        if(!open) return;
+        var have={};
+        for(var i=0;i<track.children.length;i++){ have[track.children[i].getAttribute('data-card-id')]=true; }
+        nodes.forEach(function(n){ if(!have[String(n._card.id)]) appendSlide(n._card); });
+        updateActionState();
+      }
+      function step(d){
+        if(!open) return;
+        var next=Math.max(0,Math.min(track.children.length-1,active+d));
+        if(next===active) return;
+        track.scrollTo({top:next*track.clientHeight,behavior:'smooth'});
+      }
+      function decideActive(dir){
+        if(busy||active<0) return;
+        var slide=track.children[active]; if(!slide) return;
+        var id=slide.getAttribute('data-card-id'); var card=null;
+        for(var i=0;i<nodes.length;i++){ if(String(nodes[i]._card.id)===String(id)){ card=nodes[i]._card; break; } }
+        if(!card) return;
+        busy=true; var wasIdx=active;
+        var stage=slide.querySelector('.rk-swipe-viewer-stage');
+        if(stage){
+          stage.style.transition='transform .34s ease, opacity .34s ease';
+          stage.style.transform='translateX('+(dir==='fork'?'62%':'-62%')+') rotate('+(dir==='fork'?'9deg':'-9deg')+')';
+          stage.style.opacity='0';
+        }
+        postDecision(card,dir).then(function(){ refill(); });
+        removeNodeByCard(card);
+        window.setTimeout(function(){
+          if(slide&&slide.parentNode) slide.parentNode.removeChild(slide);
+          busy=false; updateActionState();
+          if(!track.children.length){ close(); return; }
+          var nextIdx=Math.min(wasIdx, track.children.length-1);
+          track.scrollTop=nextIdx*track.clientHeight;
+          setActive(nextIdx);
+        },340);
+      }
+      function openAt(startId){
+        if(!nodes.length||open) return;
+        deckExpanded=true; parkDeck();
+        track.innerHTML=''; sound=sw.soundOn===true; open=true;
+        el.hidden=false; document.documentElement.classList.add('rk-noscroll');
+        if(io) io.disconnect();
+        io=('IntersectionObserver' in window)?new IntersectionObserver(function(entries){
+          entries.forEach(function(en){
+            if(!en.isIntersecting) return;
+            var i=[].indexOf.call(track.children,en.target);
+            if(i>=0&&i!==active) setActive(i);
+          });
+        },{root:track,threshold:0.6}):null;
+        nodes.forEach(function(n){ appendSlide(n._card); });
+        updateActionState();
+        var startIdx=0;
+        for(var i=0;i<nodes.length;i++){ if(String(nodes[i]._card.id)===String(startId)){ startIdx=i; break; } }
+        track.scrollTop=startIdx*track.clientHeight;
+        setActive(startIdx);
+      }
+      function close(){
+        if(!open) return;
+        open=false; active=-1; activeCardId=null; busy=false;
+        if(io){ io.disconnect(); io=null; }
+        track.innerHTML=''; el.hidden=true;
+        document.documentElement.classList.remove('rk-noscroll');
+        deckExpanded=false; sw.soundOn=sound; // carry the sound pref back to the deck
+        restack(); updateSoundBtn();
+      }
+
+      el.querySelectorAll('[data-sv-close]').forEach(function(b){ b.addEventListener('click',close); });
+      var muteBtn=el.querySelector('[data-sv-mute]');
+      if(muteBtn) muteBtn.addEventListener('click',function(){ sound=!sound; syncSVSound(); });
+      var prevBtn=el.querySelector('[data-sv-prev]'); if(prevBtn) prevBtn.addEventListener('click',function(){ step(-1); });
+      var nextBtn=el.querySelector('[data-sv-next]'); if(nextBtn) nextBtn.addEventListener('click',function(){ step(1); });
+      if(rejectBtn) rejectBtn.addEventListener('click',function(){ decideActive('skip'); });
+      if(approveBtn) approveBtn.addEventListener('click',function(){ decideActive('fork'); });
+      // tap the empty gutter (not the phone frame) closes the viewer
+      track.addEventListener('click',function(e){
+        var t=e.target;
+        if(t&&t.classList&&(t.classList.contains('rk-discover-viewer-slide')||t===track)) close();
+      });
+      document.addEventListener('keydown',function(e){
+        if(!open) return;
+        if(e.key==='Escape'){ e.preventDefault(); close(); }
+        else if(e.key==='ArrowDown'||e.key==='PageDown'){ e.preventDefault(); step(1); }
+        else if(e.key==='ArrowUp'||e.key==='PageUp'){ e.preventDefault(); step(-1); }
+        else if(e.key==='ArrowRight'){ e.preventDefault(); decideActive('fork'); }
+        else if(e.key==='ArrowLeft'){ e.preventDefault(); decideActive('skip'); }
+      });
+      window.addEventListener('resize',function(){ if(open&&active>=0) track.scrollTop=active*track.clientHeight; });
+
+      return { openAt:openAt, close:close, sync:sync, isOpen:function(){ return open; } };
+    })();
+
+    // Tap the front card → open the fullscreen viewer at that card.
+    if(deck) deck.addEventListener('click',function(e){
+      if(sw.busy||(swViewer&&swViewer.isOpen())||!nodes.length) return;
+      var el=(e.target&&e.target.closest)?e.target.closest('.rk-discover-swipe'):null;
+      if(!el||!el._card||el!==nodes[0]) return; // only the front card is interactive
+      if(swViewer) swViewer.openAt(el._card.id);
+    });
+
     if(skipBtn) skipBtn.addEventListener('click',function(){ decide('skip'); });
     if(forkBtn) forkBtn.addEventListener('click',function(){ decide('fork'); });
     loadStack();

package/dist/src/reskin/document.js

@@ -37,7 +37,7 @@ export function rkBrandTitle(raw) {
  *  Other pages stay reachable from the /reskin gallery (brand link). */
 const SIDEBAR_NAV = [
     { slug: "discover", label: "Discover" },
-    { slug: "chat", label: "Chat" },
+    { slug: "chat", label: "Create" },
     { slug: "library", label: "Library" },
     { slug: "calendar", label: "Calendar" },
     { slug: "help", label: "Guides" },
@@ -115,7 +115,7 @@ export function renderChatDock(activeSlug) {
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/><path d="m16 15-3-3 3-3"/></svg>
       </button>
     </div>
-    <div class="rk-aichat-files-mount" id="rkAichatFilesMount" data-rk-directory data-mode="attach"></div>
+    <div class="rk-aichat-files-mount" id="rkAichatFilesMount" data-rk-directory data-mode="attach" data-primary-click="preview"></div>
   </div>
   <div class="rk-aichat-history" id="rkAichatHistory" aria-label="Chat history">
     <div class="rk-aichat-hist-head">Chat history</div>
@@ -127,6 +127,9 @@ export function renderChatDock(activeSlug) {
       <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>
       </button>
+      <button class="rk-aichat-tool" id="rkCopyThread" type="button" title="Copy chat ID" aria-label="Copy chat ID">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+      </button>
       <button class="rk-aichat-tool" id="rkNewChat" type="button" title="New chat" aria-label="Start a new chat">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>
       </button>
@@ -306,7 +309,35 @@ export const RESKIN_CHROME_SCRIPT = `(() => {
   var ENDPOINT = '/api/v1/editor-chat', API_KEY = null, TEMPLATE = null, CACHED = null;
   var THREADS_URL = '/api/v1/editor-chat/threads', TEMPLATE_ID = 'chat-brainstorm';
   var convo = [];      // [{role,text}] running conversation
-  var threadId = null; // set on first send / when opening a saved thread
+  // Minted up-front so the "Copy chat ID" tool always has something to copy
+  // (even before the first message) and so the id we copy is the SAME one the
+  // first send persists under. Reset to a fresh id on New chat, replaced by the
+  // real id when a saved thread is opened.
+  var threadId = genId('thread');
+
+  // Cross-page hand-off: /chat (or a future AI-driven page nav) can pass
+  // ?rk_chat=<threadId> to continue that EXACT conversation in this dock. Read it
+  // once, strip it from the URL (so reload / back-button doesn't re-trigger), and
+  // replay the thread as soon as boot is ready (see consumeHandoff, called from
+  // loadBoot's ready path). Also opens the panel below so the jump is seamless.
+  var handoffThread = null;
+  try {
+    var _hq = new URLSearchParams(window.location.search);
+    handoffThread = _hq.get('rk_chat') || null;
+    if (handoffThread) {
+      _hq.delete('rk_chat');
+      var _hqs = _hq.toString();
+      window.history.replaceState(window.history.state, '', window.location.pathname + (_hqs ? '?' + _hqs : '') + window.location.hash);
+    }
+  } catch (e) { handoffThread = null; }
+  // Replay a handed-off thread once the dock is authed + booted. openThread needs
+  // API_KEY (set by loadBoot), so this only fires from the boot-ready path.
+  function consumeHandoff() {
+    if (!handoffThread || BOOT_STATE !== 'ready') return;
+    var id = handoffThread; handoffThread = null;
+    setLeftMode('');   // show the conversation, not the Files/History drawer
+    openThread(id);
+  }
   var busy = false;
   var pendingAbort = null; // AbortController for the in-flight reply (Stop button)
 
@@ -385,6 +416,7 @@ export const RESKIN_CHROME_SCRIPT = `(() => {
         THREADS_URL = b.threadsUrl || THREADS_URL;
         BOOT_STATE = 'ready';
         loadThreads();
+        consumeHandoff();
       })
       .catch(function () { BOOT_STATE = 'error'; });
   }
@@ -759,10 +791,27 @@ export const RESKIN_CHROME_SCRIPT = `(() => {
     return pump();
   }
 
+  // Turn this turn's attachments into a text line the model can quote back as
+  // REST payload URLs (prompt_attachments / source_image_url / media_url), in
+  // addition to the binary file content parts. Mirrors the /editor React dock
+  // (buildAttachmentTransportText). Double-backslash-n = a browser-side newline
+  // (we live inside a script template literal, so a bare newline escape breaks it).
+  function buildAttachmentUrlText(atts) {
+    if (!atts || !atts.length) return '';
+    var lines = atts.map(function (a) { return '- ' + (a.fileName || 'file') + ' (' + (a.contentType || '') + '): ' + a.viewUrl; });
+    return '\\n\\nAttached file URLs for REST payloads:\\n' + lines.join('\\n') + '\\nUse these exact URLs as prompt_attachments for image generation, source_image_url for image edits, media_url for video slides, or reference attachment URLs when calling template routes.';
+  }
+
   function sendMessage(text) {
     if (busy) return;
     text = (text || '').trim();
     var picked = (typeof selected !== 'undefined' ? selected : []).slice();
+    // A pasted file may still be uploading to /temp — wait for it rather than
+    // silently dropping the attachment. Flash the in-flight chips as a hint.
+    if (picked.some(function (f) { return f && f.pending; })) {
+      picked.forEach(function (f) { if (f.pending) flashChip(f.id); });
+      return;
+    }
     var atts = picked.filter(function (f) { return f && f.viewUrl; }).map(function (f) {
       return { id: String(f.id), fileName: f.name || 'file', contentType: f.contentType || 'application/octet-stream', viewUrl: f.viewUrl };
     });
@@ -788,10 +837,22 @@ export const RESKIN_CHROME_SCRIPT = `(() => {
     // Attach a fresh <editor_context> to the current (last) user turn only, so the
     // model sees the composition state without bloating persisted history.
     var ctxBlock = editorContextBlock();
+    // Attachments (pasted files OR files picked from the directory explorer) must
+    // ride in the model messages as file content parts + a URL text line — the
+    // backend only feeds the model messages[].content, NOT user_message.attachments
+    // (which is persistence-only). Without this the AI never saw attached files.
+    var attUrlText = atts.length ? buildAttachmentUrlText(atts) : '';
     var outMessages = convo.map(function (m, i) {
+      var isLast = i === convo.length - 1;
+      var isLastUser = isLast && m.role === 'user';
       var t = m.text;
-      if (ctxBlock && m.role === 'user' && i === convo.length - 1) t = t + ctxBlock;
-      return { role: m.role, content: [{ type: 'text', text: t }] };
+      if (isLastUser && attUrlText) t = t + attUrlText;
+      if (ctxBlock && isLastUser) t = t + ctxBlock;
+      var content = [{ type: 'text', text: t }];
+      if (isLastUser && atts.length) {
+        atts.forEach(function (a) { content.push({ type: 'file', data: a.viewUrl, mediaType: a.contentType || 'application/octet-stream' }); });
+      }
+      return { role: m.role, content: content };
     });
     var body = {
       messages: outMessages,
@@ -859,7 +920,7 @@ export const RESKIN_CHROME_SCRIPT = `(() => {
   }
 
   function resetConversation() {
-    convo = []; threadId = null;
+    convo = []; threadId = genId('thread');
     if (log) { log.innerHTML = ''; bubble('is-ai', GREETING); }
     if (typeof clearChips === 'function') clearChips();
   }
@@ -1047,6 +1108,16 @@ export const RESKIN_CHROME_SCRIPT = `(() => {
   var historyToggle = document.getElementById('rkHistoryToggle');
   var newChatBtn = document.getElementById('rkNewChat');
   if (newChatBtn) newChatBtn.addEventListener('click', function () { if (!busy) newChat(); });
+  // Copy the current chat thread id (handy for support / linking a conversation).
+  // threadId is minted up-front, so this always has a real id to copy.
+  var copyThreadBtn = document.getElementById('rkCopyThread');
+  if (copyThreadBtn) copyThreadBtn.addEventListener('click', function () {
+    var prevTitle = copyThreadBtn.title;
+    copyText(String(threadId));
+    copyThreadBtn.title = 'Copied chat ID';
+    copyThreadBtn.classList.add('is-on');
+    setTimeout(function () { copyThreadBtn.title = prevTitle; copyThreadBtn.classList.remove('is-on'); }, 1400);
+  });
   var histBody = document.getElementById('rkAichatHistBody');
   var selected = [];
   window.__rkDirectoryHost = {
@@ -1087,14 +1158,15 @@ export const RESKIN_CHROME_SCRIPT = `(() => {
     chipsEl.innerHTML = '';
     selected.forEach(function (f, i) {
       var chip = document.createElement('span');
-      chip.className = 'rk-aichat-chip';
+      chip.className = 'rk-aichat-chip' + (f.pending ? ' is-pending' : '');
       chip.setAttribute('data-id', f.id);
+      if (f.pending) { var sp = document.createElement('span'); sp.className = 'rk-aichat-chip-spin'; sp.setAttribute('aria-hidden', 'true'); chip.appendChild(sp); }
       var label = document.createElement('button');
       label.type = 'button';
       label.className = 'rk-aichat-chip-label';
-      label.title = 'Preview ' + f.name;
+      label.title = f.pending ? 'Uploading ' + f.name + '…' : 'Preview ' + f.name;
       label.textContent = f.name;
-      if (f.viewUrl) label.addEventListener('click', function () { openFilePreview(selected, i); });
+      if (f.viewUrl && !f.pending) label.addEventListener('click', function () { openFilePreview(selected.filter(function (s) { return !s.pending; }), selected.filter(function (s) { return !s.pending; }).indexOf(f)); });
       var x = document.createElement('button');
       x.type = 'button';
       x.setAttribute('aria-label', 'Remove ' + f.name);
@@ -1275,6 +1347,66 @@ export const RESKIN_CHROME_SCRIPT = `(() => {
   if (composerAttach) {
     composerAttach.addEventListener('click', function () { setLeftMode(leftMode() === 'files' ? '' : 'files'); });
   }
+
+  // ─── paste-to-attach: drop a copied image/file straight into the composer ───
+  // Clipboard files (screenshot, copied image, "Copy image") get auto-uploaded
+  // to the user's /temp folder, then attached as a chip just like a picked file.
+  // We show a spinner chip immediately and swap it for the real file on success.
+  function extNameFor(blob, idx) {
+    var ct = (blob && blob.type) || '';
+    var base = ct.indexOf('image/') === 0 ? 'pasted-image' : ct.indexOf('video/') === 0 ? 'pasted-video' : ct.indexOf('audio/') === 0 ? 'pasted-audio' : 'pasted-file';
+    var ext = ct && ct.indexOf('/') > -1 ? ct.split('/')[1].split('+')[0].split(';')[0] : 'bin';
+    if (ext === 'jpeg') ext = 'jpg';
+    var stamp = Date.now().toString(36) + (idx ? '-' + idx : '');
+    return base + '-' + stamp + '.' + ext;
+  }
+  function uploadPastedBlob(blob, fileName, pendingId) {
+    var fd = new FormData();
+    fd.append('file', blob, fileName);
+    var headers = {}; if (API_KEY) headers['vidfarm-api-key'] = API_KEY;
+    fetch(window.location.origin + '/api/v1/user/me/temporary-files/upload', {
+      method: 'POST', credentials: 'same-origin', headers: headers, body: fd
+    }).then(function (r) { return r.json().catch(function () { return {}; }).then(function (j) { if (!r.ok) throw new Error((j && j.error) || ('upload failed (' + r.status + ')')); return j; }); })
+      .then(function (j) {
+        var f = j && j.file;
+        if (!f || !f.viewUrl) throw new Error('upload returned no file');
+        var idx = selected.map(function (s) { return s.id; }).indexOf(pendingId);
+        var item = { id: String(f.id), name: f.fileName || fileName, contentType: f.contentType || (blob && blob.type) || 'application/octet-stream', viewUrl: f.viewUrl };
+        if (idx > -1) selected[idx] = item; else selected.push(item);
+        renderChips();
+      })
+      .catch(function () {
+        // A failed paste-upload just drops its chip — keep the chat log clean.
+        selected = selected.filter(function (s) { return s.id !== pendingId; });
+        renderChips();
+      });
+  }
+  function handlePasteFiles(e) {
+    // Files-only drawer (on /chat) has no composer of its own — let that page's
+    // composer own paste; here we only handle the dock's real chat composer.
+    if (panel.classList.contains('is-files-only')) return;
+    var dt = e.clipboardData || (window.clipboardData);
+    if (!dt) return;
+    var blobs = [];
+    var items = dt.items;
+    if (items && items.length) {
+      for (var i = 0; i < items.length; i++) {
+        if (items[i] && items[i].kind === 'file') { var b = items[i].getAsFile(); if (b) blobs.push(b); }
+      }
+    }
+    if (!blobs.length && dt.files && dt.files.length) { for (var k = 0; k < dt.files.length; k++) blobs.push(dt.files[k]); }
+    if (!blobs.length) return; // plain-text paste → let the textarea handle it
+    e.preventDefault();
+    blobs.forEach(function (blob, idx) {
+      var name = (blob && blob.name) || extNameFor(blob, idx);
+      var pendingId = 'paste-' + Date.now().toString(36) + '-' + idx + '-' + Math.random().toString(36).slice(2, 6);
+      selected.push({ id: pendingId, name: name, contentType: (blob && blob.type) || 'application/octet-stream', pending: true });
+      renderChips();
+      uploadPastedBlob(blob, name, pendingId);
+    });
+    if (input) input.focus();
+  }
+  if (input) input.addEventListener('paste', handlePasteFiles);
   if (historyToggle) {
     historyToggle.addEventListener('click', function () { setLeftMode(leftMode() === 'history' ? '' : 'history'); });
   }
@@ -1307,6 +1439,11 @@ export const RESKIN_CHROME_SCRIPT = `(() => {
     else if (reopen === '1') openPanel();
   } catch (e) {}
 
+  // A handed-off thread (?rk_chat=…) always opens the dock so the conversation
+  // reappears immediately (openPanel → loadBoot → consumeHandoff replays it).
+  // The wide editor dock force-opens itself just below, so skip it here.
+  if (handoffThread && !isChatPage && !editorDockWide) openPanel();
+
   // Editor dock: force the panel open and pinned as a left column. Reuses the
   // normal openPanel path so the live /chat-dock/boot fetch + threads + files
   // all wire up exactly as on the reskin pages.
@@ -1442,7 +1579,7 @@ ${renderChatDock(active)}
 ${RESKIN_FONT_LINKS}
 <style>${RESKIN_CSS}${pageCss}</style>
 </head>
-<body class="rk-root${chrome === "full" ? " rk-has-sidebar" : ""}">
+<body class="rk-root${chrome === "full" ? " rk-has-sidebar" : ""}${input.account?.email?.trim() ? " rk-signed-in" : ""}">
 ${shell}${script}
 </body>
 </html>`;