@mevdragon/vidfarm-devcli 0.18.1 → 0.19.0

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

@@ -152,7 +152,12 @@ function projectCard(post, accountId, index) {
           </div>
         </div>
       </div>`;
-    return `<article class="rk-library-card rk-card-hover" data-status="${rkEscape(post.status)}" data-title="${rkEscape(searchHay)}" data-post-id="${rkEscape(post.post_id)}"
+    // Folder identity for the client-side folder view: the real folder_path if the
+    // post has one, else its tracer (a synthetic group that materializes a folder
+    // when renamed). data-poster fuels the folder-tile mosaic.
+    const folder = (post.folder_path || "").replace(/^\/+|\/+$/g, "");
+    const posterUrl = (post.media.find((a) => isVideoAsset(a)) || post.media.find((a) => isImageAsset(a)) || primaryAsset(post))?.url || "";
+    return `<article class="rk-library-card rk-card-hover" data-status="${rkEscape(post.status)}" data-title="${rkEscape(searchHay)}" data-post-id="${rkEscape(post.post_id)}" data-folder="${rkEscape(folder)}" data-tracer="${rkEscape(post.tracer || "")}" data-poster="${rkEscape(posterUrl)}">
     <button type="button" class="rk-library-poster" data-rk-view="${index}" aria-label="Play ${rkEscape(title)}">
       ${posterMedia(post)}
       <span class="rk-pill ${s.pill} rk-library-pstatus"><span class="rk-library-dot"></span>${rkEscape(s.short)}</span>
@@ -216,6 +221,10 @@ function approvedPanel(input, tabs) {
     ${LOGS_BTN}
   </div>
 
+  <div class="rk-raws-bar rk-library-foldbar" data-rk-approved-bar data-rk-account="${rkEscape(accountId)}" hidden>
+    <nav class="rk-raws-crumbs" data-rk-approved-crumbs aria-label="Breadcrumb"></nav>
+  </div>
+
   <div class="rk-library-grid" data-rk-grid>
     ${cards}
   </div>
@@ -278,10 +287,6 @@ function clipsPanel(tabs) {
     <p class="rk-muted">Click <b>Import source</b> to mine a long video into tagged, searchable short clips.</p>
   </div>
 
-  <div class="rk-raws-hover" id="rkRawsHover" hidden aria-hidden="true">
-    <video class="rk-raws-hover-vid" muted loop playsinline preload="none"></video>
-    <div class="rk-raws-hover-cap" id="rkRawsHoverCap"></div>
-  </div>
   ${LIBRARY_VIEWER_HTML}`;
 }
 /* ──────────────────────────────── Files tab ───────────────────────────────── */
@@ -293,7 +298,13 @@ function clipsPanel(tabs) {
 // (/assets/file-directory-app.js) already ships on every full-chrome reskin
 // page and auto-mounts any `[data-rk-directory]`, so no page script is needed;
 // preview routes through the chrome's `window.__rkDirectoryHost.onPreview`.
-function filesPanel(tabs) {
+function filesPanel(tabs, cloudAvailable = false, initialPath) {
+    // `?path=` deep-links straight into a folder (e.g. /library/files?path=/approved/swipes).
+    // The client's parseDirectoryPath only accepts the known roots, so any junk or
+    // traversal falls back to the virtual root "/" — safe to reflect verbatim.
+    const initialAttr = initialPath && initialPath.trim()
+        ? ` data-initial-path="${rkEscape(initialPath.trim())}"`
+        : "";
     return `
   <div class="rk-library-topbar">
     ${tabs}
@@ -301,7 +312,7 @@ function filesPanel(tabs) {
   </div>
 
   <div class="rk-files-explorer">
-    <div data-rk-directory data-mode="standalone" data-show-upload="true" data-show-multiselect="true" data-primary-click="preview"></div>
+    <div data-rk-directory data-mode="standalone" data-show-upload="true" data-show-multiselect="true" data-primary-click="preview"${cloudAvailable ? ` data-cloud-available="true"` : ""}${initialAttr}></div>
   </div>`;
 }
 const CLIPS_DIALOG = `
@@ -310,7 +321,7 @@ const CLIPS_DIALOG = `
     <div class="rk-card-head">
       <span class="rk-eyebrow">Import source</span>
       <h2>Import a video</h2>
-      <p class="rk-muted">Paste a video URL — TikTok, YouTube, Instagram, X, or a direct link. We'll add it to your raws library.</p>
+      <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>
     </div>
     <div class="rk-field">
       <label class="rk-label" for="rkScanUrl">Video URL</label>
@@ -322,7 +333,7 @@ const CLIPS_DIALOG = `
     </div>
     <label class="rk-clips-toggle" for="rkScanClip">
       <input type="checkbox" id="rkScanClip" name="clip" />
-      <span><b>Clip raws</b> — mine this video into matching moments with AI, instead of importing the whole thing.</span>
+      <span><b>Clip raws with AI</b> — auto-mine this video into matching moments, instead of hand-picking a subrange in the Clipper.</span>
     </label>
     <div class="rk-clips-advanced" id="rkClipsAdvanced" hidden>
       <div class="rk-field">
@@ -343,7 +354,7 @@ const CLIPS_DIALOG = `
     <p class="rk-hint rk-clips-dialog-note" id="rkScanNote">We'll pull the whole video into your raws library.</p>
     <div class="rk-clips-dialog-actions">
       <button type="button" class="rk-btn rk-btn-ghost" id="rkClipsScanCancel">Cancel</button>
-      <button type="submit" class="rk-btn rk-btn-gold" id="rkClipsScanSubmit">Import video <span class="rk-arrow">→</span></button>
+      <button type="submit" class="rk-btn rk-btn-gold" id="rkClipsScanSubmit">Open clipper <span class="rk-arrow">→</span></button>
     </div>
   </form>
 </dialog>`;
@@ -354,24 +365,15 @@ const APPROVED_SCRIPT = `
   var empty=root.querySelector('[data-rk-empty]');
   var search=root.querySelector('[data-rk-search]');
   var grid=root.querySelector('[data-rk-grid]');
+  var foldBar=root.querySelector('[data-rk-approved-bar]');
+  var crumbsEl=root.querySelector('[data-rk-approved-crumbs]');
+  var account=(foldBar&&foldBar.getAttribute('data-rk-account'))||'';
   var cards=Array.prototype.slice.call(root.querySelectorAll('.rk-library-card'));
   var total=cards.length;
   function syncPlaceholder(){
     if(!search)return;
     search.setAttribute('placeholder','Search '+total+' approved post'+(total===1?'':'s')+String.fromCharCode(8230));
   }
-  function apply(){
-    var q=(search&&search.value||'').trim().toLowerCase();
-    var shown=0;
-    cards.forEach(function(card){
-      if(card.getAttribute('data-removed'))return;
-      var visible=!q||(card.getAttribute('data-title')||'').indexOf(q)!==-1;
-      card.hidden=!visible;
-      if(visible)shown++;
-    });
-    if(empty)empty.classList.toggle('is-visible',shown===0);
-  }
-  if(search)search.addEventListener('input',apply);
   // hover-to-play the real MP4 previews on the grid cards
   root.querySelectorAll('video.rk-library-video').forEach(function(v){
     var card=v.closest('.rk-library-card');
@@ -379,6 +381,146 @@ const APPROVED_SCRIPT = `
     card.addEventListener('mouseenter',function(){ if(v.play){var p=v.play(); if(p&&p.catch)p.catch(function(){});} });
     card.addEventListener('mouseleave',function(){ if(v.pause)v.pause(); });
   });
+
+  /* ── folder view (mirrors the Raws tab): group cards by folder_path, fall back
+        to tracer for legacy posts; drill into a folder; search flattens. ─────── */
+  function cssUrl(u){ return "'"+String(u||'').replace(/['")\\\\]/g,'').replace(/\\s/g,'%20')+"'"; }
+  function activeCards(){ return cards.filter(function(c){ return !c.getAttribute('data-removed'); }); }
+  var FOLDERS=[], LOOSE=[], MODE='root', CUR='';
+  function metaOf(card){
+    var fp=(card.getAttribute('data-folder')||'').replace(/^\\/+|\\/+$/g,'');
+    var tr=card.getAttribute('data-tracer')||'';
+    var key = fp ? ('fp:'+fp) : (tr ? ('tr:'+tr) : '');
+    return { card:card, fp:fp, tr:tr, key:key, poster:card.getAttribute('data-poster')||'', postId:card.getAttribute('data-post-id')||'' };
+  }
+  function buildFolders(){
+    var map={}; FOLDERS=[]; LOOSE=[];
+    activeCards().forEach(function(card){
+      var m=metaOf(card);
+      if(!m.key){ LOOSE.push(m); return; }
+      var f=map[m.key];
+      if(!f){
+        f={ id:m.key, folderPath:m.fp||null, tracer:m.tr, name:(m.fp||m.tr||'Untitled'), items:[] };
+        map[m.key]=f; FOLDERS.push(f);
+      }
+      f.items.push(m);
+    });
+  }
+  function folderById(id){ for(var i=0;i<FOLDERS.length;i++){ if(FOLDERS[i].id===id)return FOLDERS[i]; } return null; }
+  function clearTiles(){ Array.prototype.slice.call(grid.querySelectorAll('[data-approved-tile]')).forEach(function(t){ t.parentNode&&t.parentNode.removeChild(t); }); }
+  function folderTileEl(f){
+    var thumbs=f.items.filter(function(m){ return m.poster; }).slice(0,4);
+    var mosaic = thumbs.length
+      ? '<span class="rk-raws-folder-mosaic'+(thumbs.length===1?' is-single':'')+'">'+thumbs.map(function(m){ return '<span class="rk-raws-folder-cell" style="background-image:url('+cssUrl(m.poster)+')"></span>'; }).join('')+'</span>'
+      : '<span class="rk-raws-folder-mosaic is-empty">'+${JSON.stringify(ICON_FOLDER)}+'</span>';
+    var n=f.items.length;
+    var canonPath='/approved'+(f.folderPath?'/'+f.folderPath:(f.tracer?'/'+f.tracer:''));
+    var html='<div class="rk-raws-folder-wrap" data-approved-tile>'
+      + '<button type="button" class="rk-raws-folder rk-card-hover" data-approved-folder="'+attr(f.id)+'">'
+      + mosaic
+      + '<span class="rk-raws-folder-meta"><span class="rk-raws-folder-ic">'+${JSON.stringify(ICON_FOLDER)}+'</span>'
+      + '<span class="rk-raws-folder-txt"><span class="rk-raws-folder-name" title="'+attr(f.name)+'">'+esc(f.name)+'</span>'
+      + '<span class="rk-raws-folder-count">'+n+' post'+(n===1?'':'s')+'</span></span></span>'
+      + '</button>'
+      + '<div class="rk-raws-folder-menu" data-folder-menu>'
+        + '<button type="button" class="rk-raws-folder-kebab" data-approved-fkebab aria-label="Folder actions" aria-haspopup="true" aria-expanded="false">'+${JSON.stringify(ICON_MORE)}+'</button>'
+        + '<div class="rk-raws-folder-pop" data-folder-pop hidden role="menu">'
+          + '<button type="button" role="menuitem" data-approved-frename="'+attr(f.id)+'">Rename folder</button>'
+          + '<button type="button" role="menuitem" data-folder-copy="'+attr(canonPath)+'">Copy path</button>'
+        + '</div></div>'
+      + '</div>';
+    var tmp=document.createElement('div'); tmp.innerHTML=html; return tmp.firstChild;
+  }
+  function renderCrumbs(){
+    if(!crumbsEl)return;
+    if(MODE==='root'){ crumbsEl.innerHTML='<span class="rk-raws-crumb is-current">All posts</span>'; return; }
+    var html='<button type="button" class="rk-raws-crumb rk-raws-crumb-link" data-approved-crumb-root>'+${JSON.stringify(ICON_CHEVLEFT)}+'<span>All posts</span></button>'
+      + '<span class="rk-raws-crumb-sep" aria-hidden="true">/</span>';
+    if(MODE==='folder'){ var f=folderById(CUR); html+='<span class="rk-raws-crumb is-current">'+esc(f?f.name:'Folder')+' <span class="rk-raws-crumb-n">'+(f?f.items.length:0)+'</span></span>'; }
+    else { html+='<span class="rk-raws-crumb is-current">Search</span>'; }
+    crumbsEl.innerHTML=html;
+  }
+  function showBar(show){ if(foldBar)foldBar.hidden=!show; }
+  function setVisible(pred){ var shown=0; activeCards().forEach(function(c){ var v=pred(metaOf(c)); c.hidden=!v; if(v)shown++; }); return shown; }
+  function paintRoot(){
+    MODE='root'; CUR=''; clearTiles(); buildFolders();
+    // folder tiles first (in order, before the cards), then loose cards remain.
+    var frag=document.createDocumentFragment();
+    FOLDERS.forEach(function(f){ frag.appendChild(folderTileEl(f)); });
+    grid.insertBefore(frag,grid.firstChild);
+    var looseShown=setVisible(function(m){ return !m.key; });
+    showBar(FOLDERS.length>0);
+    renderCrumbs();
+    if(empty)empty.classList.toggle('is-visible',FOLDERS.length===0&&looseShown===0);
+  }
+  function paintFolder(id){
+    var f=folderById(id); if(!f){ paintRoot(); return; }
+    MODE='folder'; CUR=id; clearTiles(); showBar(true); renderCrumbs();
+    var shown=setVisible(function(m){ return m.key===id; });
+    if(empty)empty.classList.toggle('is-visible',shown===0);
+  }
+  function paintSearch(q){
+    MODE='search'; clearTiles(); showBar(false);
+    var shown=setVisible(function(m){ return (m.card.getAttribute('data-title')||'').indexOf(q)!==-1; });
+    if(empty)empty.classList.toggle('is-visible',shown===0);
+  }
+  function repaint(){ if(MODE==='folder'&&folderById(CUR))paintFolder(CUR); else paintRoot(); }
+  function apply(){
+    var q=(search&&search.value||'').trim().toLowerCase();
+    if(q)paintSearch(q); else repaint();
+  }
+  if(search)search.addEventListener('input',apply);
+
+  /* ── folder tile clicks: open / rename / copy-path + breadcrumb back ──────── */
+  function closeFolderMenus(except){
+    Array.prototype.slice.call(grid.querySelectorAll('[data-folder-menu]')).forEach(function(mn){
+      if(mn===except)return;
+      var pop=mn.querySelector('[data-folder-pop]'); if(pop)pop.hidden=true;
+      var kb=mn.querySelector('[data-approved-fkebab]'); if(kb)kb.setAttribute('aria-expanded','false');
+    });
+  }
+  function copyText(txt,ok){ try{ if(navigator.clipboard&&navigator.clipboard.writeText){ navigator.clipboard.writeText(txt); } else { var ta=document.createElement('textarea'); ta.value=txt; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); } if(ok)ok(); }catch(e){} }
+  function slugFolder(v){ return String(v||'').toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/^-+|-+$/g,'').slice(0,60); }
+  function renameApprovedFolder(id){
+    var f=folderById(id); if(!f)return;
+    var current=f.folderPath?f.folderPath.split('/').pop():(f.tracer||f.name);
+    var next=(window.prompt('Rename folder',current||'')||'').trim();
+    if(!next||next===current)return;
+    if(f.folderPath){
+      fetch('/api/v1/user/me/directory/rename',{method:'POST',credentials:'same-origin',headers:{'Content-Type':'application/json',Accept:'application/json'},body:JSON.stringify({path:'/approved/'+f.folderPath,new_name:next})})
+        .then(function(r){ return r.ok?r.json():r.json().catch(function(){return{};}).then(function(d){ throw new Error((d&&d.error)||'Rename failed'); }); })
+        .then(function(){ window.location.reload(); })
+        .catch(function(err){ window.alert((err&&err.message)||'Rename failed'); });
+    } else {
+      // synthetic tracer group → materialize a real folder by moving each post.
+      if(!account){ window.alert('Cannot rename this group here.'); return; }
+      var target=slugFolder(next); if(!target){ window.alert('Pick a folder name with letters or numbers.'); return; }
+      Promise.all(f.items.map(function(m){
+        return fetch('/u/'+encodeURIComponent(account)+'/approved/posts/'+encodeURIComponent(m.postId),{method:'PATCH',credentials:'same-origin',headers:{'Content-Type':'application/json',Accept:'application/json'},body:JSON.stringify({folder_path:target})}).then(function(r){ return r.ok; });
+      })).then(function(){ window.location.reload(); }).catch(function(){ window.alert('Rename failed'); });
+    }
+  }
+  if(grid){
+    grid.addEventListener('click',function(e){
+      var t=e.target;
+      var kb=t&&t.closest?t.closest('[data-approved-fkebab]'):null;
+      if(kb){ e.preventDefault(); e.stopPropagation(); var mn=kb.closest('[data-folder-menu]'); var pop=mn&&mn.querySelector('[data-folder-pop]'); var willOpen=pop&&pop.hidden; closeFolderMenus(mn); if(pop){ pop.hidden=!willOpen; kb.setAttribute('aria-expanded',willOpen?'true':'false'); } return; }
+      var rn=t&&t.closest?t.closest('[data-approved-frename]'):null;
+      if(rn){ e.preventDefault(); closeFolderMenus(null); renameApprovedFolder(rn.getAttribute('data-approved-frename')); return; }
+      var cp=t&&t.closest?t.closest('[data-folder-copy]'):null;
+      if(cp){ e.preventDefault(); closeFolderMenus(null); copyText(cp.getAttribute('data-folder-copy')); return; }
+      var fo=t&&t.closest?t.closest('[data-approved-folder]'):null;
+      if(fo){ e.preventDefault(); closeFolderMenus(null); if(search)search.value=''; paintFolder(fo.getAttribute('data-approved-folder')); return; }
+    });
+  }
+  if(crumbsEl){
+    crumbsEl.addEventListener('click',function(e){
+      var r=e.target&&e.target.closest?e.target.closest('[data-approved-crumb-root]'):null;
+      if(!r)return; e.preventDefault(); if(search)search.value=''; paintRoot();
+    });
+  }
+  document.addEventListener('click',function(e){ var t=e.target; if(!(t&&t.closest&&t.closest('[data-folder-menu]')))closeFolderMenus(null); });
+
   apply();
 
   // ── per-card "⋯" overflow menu: Copy ID + Delete (popconfirm) ────────────
@@ -470,7 +612,7 @@ const APPROVED_SCRIPT = `
         ? '<video class="rk-library-viewer-media" data-vsrc="'+attr(t.url)+'"'+(t.poster?' poster="'+attr(t.poster)+'"':'')+' loop playsinline preload="none"></video>'
         : '<img class="rk-library-viewer-media" src="'+attr(t.url||t.poster)+'" alt="'+attr(t.title||'Published cut')+'">';
       var cta=t.editor_href
-        ? '<a class="rk-btn rk-btn-gold rk-btn-sm rk-library-viewer-cta" href="'+attr(t.editor_href)+'">Open in editor</a>'
+        ? '<a class="rk-btn rk-btn-gold rk-btn-sm rk-library-viewer-cta" href="'+attr(t.editor_href)+'" target="_blank" rel="noreferrer">Open in editor</a>'
         : '';
       var view=t.post_href
         ? '<a class="rk-btn rk-btn-ghost-light rk-btn-sm rk-library-viewer-cta" href="'+attr(t.post_href)+'" target="_blank" rel="noreferrer">View post</a>'
@@ -552,9 +694,6 @@ const CLIPS_SCRIPT = `
   var empty=root.getElementById('rkClipsEmpty');
   var form=root.getElementById('rkClipsSearch');
   var query=root.getElementById('rkClipsQuery');
-  var hoverEl=root.getElementById('rkRawsHover');
-  var hoverVid=hoverEl&&hoverEl.querySelector('.rk-raws-hover-vid');
-  var hoverCap=root.getElementById('rkRawsHoverCap');
   var canHover=!(window.matchMedia&&window.matchMedia('(hover:none)').matches);
 
   // ── file-directory state ────────────────────────────────────────────────
@@ -586,16 +725,34 @@ const CLIPS_SCRIPT = `
     query.setAttribute('placeholder','Search '+n+' raw clip'+(n===1?'':'s')+String.fromCharCode(8230));
   }
 
-  // Group raws into folders by their source video (source_video_id, falling back
-  // to source_filename). First-seen order is preserved.
+  function normFp(v){ return (v==null?'':String(v)).replace(/^\\/+|\\/+$/g,''); }
+  function slugFolder(v){ return String(v||'').toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/^-+|-+$/g,'').slice(0,60); }
+
+  // Group raws into REAL directory folders keyed on each clip's folder_path
+  // (canonical /raws/<folder_path>) — the same folders the file directory and the
+  // AI agent see, so a folder can be renamed and clips moved between them. Legacy
+  // clips with no folder_path fall back to a synthetic source-derived group; those
+  // aren't backed by a stored folder yet, so renaming one MATERIALIZES a folder by
+  // moving its clips (see renameFolder). First-seen order is preserved.
   function buildFolders(){
     var map={}; FOLDERS=[];
     ALL.forEach(function(c){
-      var id=String(c.source_video_id||c.source_filename||'ungrouped');
-      var f=map[id];
-      if(!f){ f={id:id,name:c.source_filename||'Untitled source',clips:[]}; map[id]=f; FOLDERS.push(f); }
+      var fp=normFp(c.folder_path);
+      var key,f;
+      if(fp){ key='fp:'+fp; }
+      else { key='src:'+String(c.source_video_id||c.source_filename||'ungrouped'); }
+      f=map[key];
+      if(!f){
+        f={ id:key, folderPath:fp||null, name:fp||(c.source_filename||'Untitled source'), clips:[] };
+        map[key]=f; FOLDERS.push(f);
+      }
       f.clips.push(c);
     });
+    // Float the full-length original video (role:"source") to the top of its
+    // folder so it reads as the reference the mined clips were cut from.
+    FOLDERS.forEach(function(f){
+      f.clips.sort(function(a,b){ return (b.is_source_original?1:0)-(a.is_source_original?1:0); });
+    });
   }
 
   // Optimistic "importing…" placeholder card (spinner, or an error state with a
@@ -628,14 +785,31 @@ const CLIPS_SCRIPT = `
     } else {
       mosaic='<span class="rk-raws-folder-mosaic is-empty">'+${JSON.stringify(ICON_FOLDER)}+'</span>';
     }
-    var n=folder.clips.length;
-    return '<button type="button" class="rk-raws-folder rk-card-hover" data-folder-id="'+attr(folder.id)+'">'
+    // Count MINED clips only — the full-length original is a reference raw, not a
+    // mined scene — and note the presence of a full video alongside the count.
+    var hasFull=folder.clips.some(function(c){ return c.is_source_original; });
+    var n=folder.clips.filter(function(c){ return !c.is_source_original; }).length;
+    var countTxt=n+' clip'+(n===1?'':'s')+(hasFull?' · full video':'');
+    var canonPath='/raws'+(folder.folderPath?'/'+folder.folderPath:'');
+    // Kebab: rename the folder + copy its canonical /raws path. Sits OUTSIDE the
+    // open-folder button (buttons can't nest); its own click is caught before the
+    // tile's navigation handler.
+    var menu='<div class="rk-raws-folder-menu" data-folder-menu>'
+      + '<button type="button" class="rk-raws-folder-kebab" data-folder-kebab aria-label="Folder actions" aria-haspopup="true" aria-expanded="false">'+${JSON.stringify(ICON_MORE)}+'</button>'
+      + '<div class="rk-raws-folder-pop" data-folder-pop hidden role="menu">'
+        + '<button type="button" role="menuitem" data-folder-rename="'+attr(folder.id)+'">Rename folder</button>'
+        + '<button type="button" role="menuitem" data-folder-copy="'+attr(canonPath)+'">Copy path</button>'
+      + '</div></div>';
+    return '<div class="rk-raws-folder-wrap">'
+      + '<button type="button" class="rk-raws-folder rk-card-hover" data-folder-id="'+attr(folder.id)+'">'
       + mosaic
       + '<span class="rk-raws-folder-meta">'
       + '<span class="rk-raws-folder-ic">'+${JSON.stringify(ICON_FOLDER)}+'</span>'
       + '<span class="rk-raws-folder-txt"><span class="rk-raws-folder-name" title="'+attr(folder.name)+'">'+esc(folder.name)+'</span>'
-      + '<span class="rk-raws-folder-count">'+n+' clip'+(n===1?'':'s')+'</span></span>'
-      + '</span></button>';
+      + '<span class="rk-raws-folder-count">'+countTxt+'</span></span>'
+      + '</span></button>'
+      + menu
+      + '</div>';
   }
 
   function card(clip,i){
@@ -647,8 +821,12 @@ const CLIPS_SCRIPT = `
     var tags=topTags(clip.tags).map(function(t){ return '<span class="rk-clips-tag">'+esc(t)+'</span>'; }).join('');
     var desc=clip.description || (clip.tags&&clip.tags.transcript) || '(untagged clip)';
     var dl='/raws/'+encodeURIComponent(clip.clip_id)+'/download';
-    return '<article class="rk-clips-card rk-card-hover">'
+    // The full-length original a hunt was mined from gets a distinct badge.
+    var fullBadge=clip.is_source_original?'<span class="rk-clips-fullbadge">Full video</span>':'';
+    return '<article class="rk-clips-card rk-card-hover'+(clip.is_source_original?' is-source-original':'')+'">'
       + '<button type="button" class="rk-clips-thumb" data-rk-clip-view="'+i+'" aria-label="Open raw">'+media
+      + '<video class="rk-clips-thumb-vid" muted loop playsinline preload="none"'+(clip.thumbnail_url?' poster="'+attr(clip.thumbnail_url)+'"':'')+'></video>'
+      + fullBadge
       + '<span class="rk-clips-dur">'+esc(range+(dur?' · '+dur:''))+'</span>'
       + '<span class="rk-clips-play" aria-hidden="true">'+${JSON.stringify(PLAY)}+'</span>'
       + '</button>'
@@ -660,35 +838,29 @@ const CLIPS_SCRIPT = `
       + '</div></article>';
   }
 
-  /* ── mouseover preview popover ────────────────────────────────────────────── */
+  /* ── mouseover: play the clip in place inside its own card ────────────────── */
   var hoverTimer=null;
+  var playingThumb=null;   // the thumb whose inline <video> is currently active
+  function stopInline(thumb){
+    if(!thumb)return;
+    var vid=thumb.querySelector('.rk-clips-thumb-vid');
+    if(vid){ try{ vid.pause(); }catch(e){} vid.removeAttribute('src'); vid.load&&vid.load(); }
+    thumb.classList.remove('is-playing');
+  }
   function hideHover(){
     if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer=null; }
-    if(!hoverEl)return;
-    hoverEl.hidden=true; hoverEl.classList.remove('is-visible');
-    if(hoverVid){ try{ hoverVid.pause(); }catch(e){} hoverVid.removeAttribute('src'); hoverVid.load&&hoverVid.load(); }
-  }
-  function positionHover(rect){
-    if(!hoverEl)return;
-    var gap=12, bw=hoverEl.offsetWidth||250, bh=hoverEl.offsetHeight||330;
-    var x=rect.right+gap;
-    if(x+bw>window.innerWidth-8) x=rect.left-gap-bw;
-    if(x<8) x=Math.max(8,Math.min(rect.left,window.innerWidth-bw-8));
-    var y=rect.top+rect.height/2-bh/2;
-    y=Math.max(8,Math.min(y,window.innerHeight-bh-8));
-    hoverEl.style.left=Math.round(x)+'px';
-    hoverEl.style.top=Math.round(y)+'px';
+    if(playingThumb){ stopInline(playingThumb); playingThumb=null; }
   }
-  function showHover(clip,rect){
-    if(!hoverEl||!clip||(!clip.view_url&&!clip.thumbnail_url))return;
-    if(hoverCap){ hoverCap.textContent=clip.description||(clip.tags&&clip.tags.transcript)||clip.source_filename||'Raw clip'; }
-    if(hoverVid){
-      hoverVid.poster=clip.thumbnail_url||'';
-      if(clip.view_url){ hoverVid.setAttribute('src',clip.view_url); hoverVid.load&&hoverVid.load(); var p=hoverVid.play&&hoverVid.play(); if(p&&p.catch)p.catch(function(){}); }
-      else { hoverVid.removeAttribute('src'); }
-    }
-    hoverEl.hidden=false; hoverEl.classList.add('is-visible');
-    positionHover(rect);
+  function playInline(thumb,clip){
+    if(!thumb||!clip||!clip.view_url)return;
+    if(playingThumb&&playingThumb!==thumb){ stopInline(playingThumb); }
+    playingThumb=thumb;
+    var vid=thumb.querySelector('.rk-clips-thumb-vid');
+    if(!vid)return;
+    if(clip.thumbnail_url) vid.poster=clip.thumbnail_url;
+    vid.setAttribute('src',clip.view_url); vid.load&&vid.load();
+    thumb.classList.add('is-playing');
+    var p=vid.play&&vid.play(); if(p&&p.catch)p.catch(function(){});
   }
   function bindHover(){
     if(!grid||!canHover)return;
@@ -696,17 +868,17 @@ const CLIPS_SCRIPT = `
       var idx=Number(thumb.getAttribute('data-rk-clip-view'));
       thumb.addEventListener('mouseenter',function(){
         var clip=VIEW[idx]; if(!clip)return;
-        var rect=thumb.getBoundingClientRect();
         if(hoverTimer)clearTimeout(hoverTimer);
-        hoverTimer=setTimeout(function(){ showHover(clip,rect); },90);
+        hoverTimer=setTimeout(function(){ playInline(thumb,clip); },90);
+      });
+      thumb.addEventListener('mouseleave',function(){
+        if(hoverTimer){ clearTimeout(hoverTimer); hoverTimer=null; }
+        stopInline(thumb);
+        if(playingThumb===thumb) playingThumb=null;
       });
-      thumb.addEventListener('mouseleave',hideHover);
     });
   }
-  if(hoverEl){
-    window.addEventListener('scroll',hideHover,true);
-    window.addEventListener('resize',hideHover);
-  }
+  window.addEventListener('scroll',hideHover,true);
 
   /* ── breadcrumb + view rendering ──────────────────────────────────────────── */
   function renderCrumbs(){
@@ -891,13 +1063,67 @@ const CLIPS_SCRIPT = `
     window.addEventListener('resize',function(){ if(vOpen&&vActive>=0)vTrack.scrollTop=vActive*vTrack.clientHeight; });
   }
 
+  /* ── folder rename / copy-path (kebab on each folder tile) ────────────────── */
+  function closeFolderMenus(except){
+    if(!grid)return;
+    Array.prototype.slice.call(grid.querySelectorAll('[data-folder-menu]')).forEach(function(m){
+      if(m===except)return;
+      var pop=m.querySelector('[data-folder-pop]'); if(pop)pop.hidden=true;
+      var kb=m.querySelector('[data-folder-kebab]'); if(kb)kb.setAttribute('aria-expanded','false');
+    });
+  }
+  function copyPath(path){
+    try{
+      if(navigator.clipboard&&navigator.clipboard.writeText){ navigator.clipboard.writeText(path); }
+      else { var ta=document.createElement('textarea'); ta.value=path; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); }
+      if(statusEl)statusEl.textContent='Copied '+path;
+    }catch(e){ if(statusEl)statusEl.textContent=path; }
+  }
+  // Rename a raws folder. Real folders (folder_path set) go through the directory
+  // rename endpoint (re-points every clip + nested subfolders server-side). Legacy
+  // source-groups (no folder_path) have no stored folder to rename, so we
+  // MATERIALIZE one by moving each clip into /raws/<slug> via PATCH /raws/:id.
+  function renameFolder(folderId){
+    var f=folderById(folderId); if(!f)return;
+    var current=f.folderPath?(f.folderPath.split('/').pop()):f.name;
+    var next=(window.prompt('Rename folder',current||'')||'').trim();
+    if(!next||next===current)return;
+    if(statusEl)statusEl.textContent='Renaming…';
+    if(f.folderPath){
+      fetch('/api/v1/user/me/directory/rename',{method:'POST',credentials:'same-origin',headers:{'Content-Type':'application/json',Accept:'application/json'},body:JSON.stringify({path:'/raws/'+f.folderPath,new_name:next})})
+        .then(function(r){ return r.ok?r.json():r.json().catch(function(){return{};}).then(function(d){ throw new Error((d&&d.error)||'Rename failed'); }); })
+        .then(function(){ loadFeed(); })
+        .catch(function(err){ if(statusEl)statusEl.textContent=(err&&err.message)||'Rename failed'; });
+    } else {
+      var target=slugFolder(next); if(!target){ if(statusEl)statusEl.textContent='Pick a folder name with letters or numbers.'; return; }
+      Promise.all(f.clips.map(function(c){
+        return fetch('/raws/'+encodeURIComponent(c.clip_id),{method:'PATCH',credentials:'same-origin',headers:{'Content-Type':'application/json',Accept:'application/json'},body:JSON.stringify({folder_path:target})}).then(function(r){ return r.ok; });
+      })).then(function(oks){
+        if(oks.some(function(ok){ return !ok; })){ if(statusEl)statusEl.textContent='Some clips could not be moved — try again.'; }
+        loadFeed();
+      }).catch(function(){ if(statusEl)statusEl.textContent='Rename failed'; loadFeed(); });
+    }
+  }
+
   // Folder navigation (grid tile) + breadcrumb "All raws" back link.
   if(grid){
     grid.addEventListener('click',function(e){
-      var f=e.target&&e.target.closest?e.target.closest('[data-folder-id]'):null;
-      if(!f)return; e.preventDefault(); hideHover(); if(query)query.value=''; paintFolder(f.getAttribute('data-folder-id'));
+      var tgt=e.target;
+      // kebab toggle
+      var kb=tgt&&tgt.closest?tgt.closest('[data-folder-kebab]'):null;
+      if(kb){ e.preventDefault(); e.stopPropagation(); var menu=kb.closest('[data-folder-menu]'); var pop=menu&&menu.querySelector('[data-folder-pop]'); var willOpen=pop&&pop.hidden; closeFolderMenus(menu); if(pop){ pop.hidden=!willOpen; kb.setAttribute('aria-expanded',willOpen?'true':'false'); } return; }
+      var rn=tgt&&tgt.closest?tgt.closest('[data-folder-rename]'):null;
+      if(rn){ e.preventDefault(); closeFolderMenus(null); renameFolder(rn.getAttribute('data-folder-rename')); return; }
+      var cp=tgt&&tgt.closest?tgt.closest('[data-folder-copy]'):null;
+      if(cp){ e.preventDefault(); closeFolderMenus(null); copyPath(cp.getAttribute('data-folder-copy')); return; }
+      var f=tgt&&tgt.closest?tgt.closest('[data-folder-id]'):null;
+      if(!f)return; e.preventDefault(); closeFolderMenus(null); hideHover(); if(query)query.value=''; paintFolder(f.getAttribute('data-folder-id'));
     });
   }
+  document.addEventListener('click',function(e){
+    var t=e.target;
+    if(!(t&&t.closest&&t.closest('[data-folder-menu]')))closeFolderMenus(null);
+  });
   if(crumbsEl){
     crumbsEl.addEventListener('click',function(e){
       var r=e.target&&e.target.closest?e.target.closest('[data-crumb-root]'):null;
@@ -957,7 +1183,7 @@ const CLIPS_SCRIPT = `
   var scanSubmit=root.getElementById('rkClipsScanSubmit');
   var scanClip=root.getElementById('rkScanClip');
   var scanAdvanced=root.getElementById('rkClipsAdvanced');
-  var IMPORT_NOTE="We'll pull the whole video into your raws library.";
+  var IMPORT_NOTE="We'll open the Clipper so you can preview the video and save an exact subrange (or the whole thing) to your raws.";
   var CLIP_NOTE='AI tagging runs on your own key (BYOK) — vidfarm only bills the clip-scan compute.';
   var SCAN_OPTS=null;  // GET /raws/scan-options: which providers/keys can run a hunt
   function setNote(msg,tone){ if(!scanNote)return; scanNote.textContent=msg; if(tone)scanNote.setAttribute('data-tone',tone); else scanNote.removeAttribute('data-tone'); }
@@ -989,7 +1215,7 @@ const CLIPS_SCRIPT = `
   function syncClipMode(){
     var on=!!(scanClip&&scanClip.checked);
     if(scanAdvanced)scanAdvanced.hidden=!on;
-    if(scanSubmit)scanSubmit.innerHTML=(on?'Start scan':'Import video')+' <span class="rk-arrow">→</span>';
+    if(scanSubmit)scanSubmit.innerHTML=(on?'Start scan':'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 {
@@ -1014,7 +1240,16 @@ const CLIPS_SCRIPT = `
       var prompt=clip?(scanPrompt&&scanPrompt.value||'').trim():'';
       var provider=clip?(scanProvider&&scanProvider.value||'').trim():'';
       if(!url){ setNote('Enter a video URL.','error'); return; }
-      setNote(clip?'Starting scan…':'Importing video…');
+      // 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){
+        var clp=new URL('/tools/clipper', window.location.origin);
+        clp.searchParams.set('source_url', url);
+        if(tracer) clp.searchParams.set('tracer', tracer);
+        window.location.href=clp.pathname+clp.search;
+        return;
+      }
+      setNote('Starting scan…');
       if(scanSubmit){ scanSubmit.disabled=true; scanSubmit.classList.add('is-loading'); }
 
       var payload={source_url:url};
@@ -1080,7 +1315,7 @@ export function renderReskinLibrary(tab = "approved", input = EMPTY_LIBRARY_INPU
     const panel = isLogs
         ? `<div class="rk-library-topbar">${tabs}</div>\n  ${jobRunsPanel(logsBoot)}`
         : isFiles
-            ? filesPanel(tabs)
+            ? filesPanel(tabs, Boolean(input.cloudSpace), input.initialFilesPath)
             : isRaws
                 ? clipsPanel(tabs)
                 : approvedPanel(input, tabs);
@@ -1267,6 +1502,17 @@ video.rk-library-viewer-media{cursor:pointer}
 .rk-raws-explorer.is-folders{grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
 
 /* folder tile — 2×2 thumbnail mosaic + name + count */
+.rk-raws-folder-wrap{position:relative;display:flex}
+.rk-raws-folder-wrap>.rk-raws-folder{flex:1;min-width:0}
+.rk-raws-folder-menu{position:absolute;top:10px;right:10px;z-index:4}
+.rk-raws-folder-kebab{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--rk-r-full);background:rgba(255,255,255,.92);color:var(--rk-ink);cursor:pointer;opacity:0;transform:scale(.85);box-shadow:var(--rk-shadow-sm);transition:opacity var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
+.rk-raws-folder-wrap:hover .rk-raws-folder-kebab,.rk-raws-folder-menu [aria-expanded="true"]{opacity:1;transform:scale(1)}
+.rk-raws-folder-kebab:hover{background:#fff}
+@media(hover:none){.rk-raws-folder-kebab{opacity:1;transform:scale(1)}}
+.rk-raws-folder-pop{position:absolute;top:36px;right:0;min-width:168px;background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);box-shadow:var(--rk-shadow-lg);padding:6px;display:flex;flex-direction:column;gap:2px}
+.rk-raws-folder-pop[hidden]{display:none}
+.rk-raws-folder-pop button{appearance:none;border:0;background:none;font:inherit;text-align:left;padding:8px 10px;border-radius:var(--rk-r-md);color:var(--rk-ink);font-size:13px;font-weight:600;cursor:pointer}
+.rk-raws-folder-pop button:hover{background:var(--rk-n-100)}
 .rk-raws-folder{display:flex;flex-direction:column;overflow:hidden;background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);box-shadow:var(--rk-shadow-card);cursor:pointer;text-align:left;font:inherit;color:inherit;padding:0;transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
 .rk-raws-folder:hover{transform:translateY(-3px);box-shadow:var(--rk-shadow-md);border-color:var(--rk-gold-600)}
 .rk-raws-folder-mosaic{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:2px;aspect-ratio:4/3;background:var(--rk-n-100);overflow:hidden}
@@ -1280,21 +1526,17 @@ video.rk-library-viewer-media{cursor:pointer}
 .rk-raws-folder-name{font-family:var(--rk-font-display);font-size:14px;font-weight:700;color:var(--rk-ink);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .rk-raws-folder-count{font-size:12px;font-weight:600;color:var(--rk-text-muted)}
 
-/* mouseover preview popover (floating enlarged media) */
-.rk-raws-hover{position:fixed;z-index:90;width:250px;pointer-events:none;border-radius:var(--rk-r-2xl);overflow:hidden;background:#0d0d0d;border:1px solid rgba(255,255,255,.12);box-shadow:var(--rk-shadow-xl);opacity:0;transform:scale(.96);transition:opacity .12s var(--rk-ease),transform .12s var(--rk-ease)}
-.rk-raws-hover.is-visible{opacity:1;transform:scale(1)}
-.rk-raws-hover[hidden]{display:none}
-.rk-raws-hover-vid{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:#0d0d0d}
-.rk-raws-hover-cap{padding:9px 12px 11px;font-size:12px;font-weight:600;line-height:1.35;color:rgba(255,255,255,.92);background:linear-gradient(180deg,#171717,#0d0d0d);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
-@media(hover:none){.rk-raws-hover{display:none!important}}
 
 .rk-clips-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
 .rk-clips-card{display:flex;flex-direction:column;overflow:hidden;background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);box-shadow:var(--rk-shadow-card)}
 .rk-clips-thumb{position:relative;aspect-ratio:3/4;overflow:hidden;display:grid;place-items:center;background:linear-gradient(150deg,#2c2c2c,#171717)}
 .rk-clips-thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
-.rk-clips-thumb-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
+.rk-clips-thumb-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;z-index:1}
+.rk-clips-thumb.is-playing .rk-clips-thumb-vid{display:block}
+.rk-clips-thumb.is-playing .rk-clips-play{opacity:0!important}
 .rk-clips-noimg{color:rgba(255,255,255,.68);font-size:12px;font-weight:600;letter-spacing:.01em}
 .rk-clips-dur{position:absolute;left:10px;bottom:10px;padding:3px 9px;border-radius:var(--rk-r-full);background:rgba(255,255,255,.92);color:var(--rk-ink);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;box-shadow:var(--rk-shadow-xs);z-index:2}
+.rk-clips-fullbadge{position:absolute;left:10px;top:10px;padding:3px 9px;border-radius:var(--rk-r-full);background:var(--rk-ink);color:#fff;font-size:11px;font-weight:700;letter-spacing:.01em;box-shadow:var(--rk-shadow-xs);z-index:3}
 .rk-clips-play{position:absolute;right:10px;top:10px;width:34px;height:34px;display:grid;place-items:center;padding:0 0 0 2px;border:0;border-radius:var(--rk-r-full);background:rgba(255,255,255,.92);color:var(--rk-ink);font-size:13px;cursor:pointer;opacity:0;transform:scale(.85);box-shadow:var(--rk-shadow-sm);z-index:2;transition:opacity var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
 .rk-clips-card:hover .rk-clips-play{opacity:1;transform:scale(1)}
 @media(hover:none){.rk-clips-play{opacity:1;transform:scale(1)}}