@mevdragon/vidfarm-devcli 0.16.0 → 0.18.0

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

@@ -0,0 +1,688 @@
+// /reskin/library — the director's own studio, now MIGRATED to real production
+// data (mirrors src/reskin/settings-page.ts). This is ONE page with two
+// server-routed tabs at distinct URLs:
+//   /reskin/library/approved → your REAL published cuts (ready + scheduled)
+//   /reskin/library/clips    → your REAL mined clip library (client-fetched)
+//
+// The renderer accepts the SAME input object the live `/library` route already
+// builds — `Parameters<typeof renderLibraryPage>[0]` from ../account-pages.js —
+// so wiring the route is just "fetch real data + call this". Every action points
+// at a real endpoint:
+//   • Open      → /editor/:templateId (the real editor, account-scoped)
+//   • View post → post.share_url (the real share/preview page)
+//   • Download  → the primary video asset's real MP4 url
+//   • Schedule  → /reskin/calendar (the real scheduling surface)
+//   • Clips tab → GET /clips/feed, POST /clips/search, POST /clips/scan (real)
+//
+// Follow-up: the live library ships an editorChat / chat-dock runtime
+// (buildLibraryEditorChatBoot → editorChat). That is intentionally OMITTED here
+// for now — this pass focuses on real projects + real clip search. `editorChat`
+// is accepted in the input but not yet rendered.
+//
+// Design stays farmville (shared rk-* primitives + a page-scoped rk-library-* /
+// rk-clips-* CSS block); only the data + actions became real.
+import { reskinDocument, rkEscape } from "./document.js";
+import { jobRunsPanel, JOBRUNS_PAGE_CSS, JOBRUNS_SCRIPT } from "./job-runs-page.js";
+// A safe default so the current route (`renderReskinLibrary("approved")`, no
+// input) keeps working until app.ts is updated to pass real data (mirror the
+// live `/library` route). Once wired, the parent passes the real object.
+const EMPTY_LIBRARY_INPUT = {
+    userId: "",
+    currentAccountId: "",
+    name: null,
+    email: "",
+    posts: [],
+    schedule: { channels: [], connectHref: "/settings?tab=channels&connect=flockposter" },
+    editorChat: null
+};
+const PLAY = `<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5.5v13l11-6.5-11-6.5Z"/></svg>`;
+const SEARCH_ICON = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>`;
+/* ──────────────────────────── Approved (projects) tab ─────────────────────── */
+const STATUS = {
+    ready: { short: "Ready", pill: "rk-pill-green" },
+    scheduled: { short: "Scheduled", pill: "rk-pill-violet" }
+};
+function statusInfo(status) {
+    return STATUS[status] || { short: status ? status.charAt(0).toUpperCase() + status.slice(1) : "Ready", pill: "rk-pill" };
+}
+function fmtDate(iso) {
+    const t = Date.parse(iso);
+    if (Number.isNaN(t))
+        return iso || "";
+    return new Date(t).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" });
+}
+function isVideoAsset(a) {
+    return a.kind === "video" || String(a.content_type || "").startsWith("video");
+}
+function isImageAsset(a) {
+    return a.kind === "image" || String(a.content_type || "").startsWith("image");
+}
+// primaryAsset mirrors the live library: role="primary" → first video → media[0].
+function primaryAsset(post) {
+    return post.media.find((a) => a.role === "primary")
+        || post.media.find((a) => isVideoAsset(a))
+        || post.media[0]
+        || null;
+}
+function downloadAsset(post) {
+    const v = post.media.find((a) => isVideoAsset(a));
+    return v || primaryAsset(post);
+}
+function shareHref(post) {
+    return post.share_url && post.share_url.length
+        ? post.share_url
+        : `/approved/posts/${encodeURIComponent(post.post_id)}`;
+}
+function editorHref(post, accountId) {
+    if (!post.template_id)
+        return null;
+    const q = accountId ? `?account=${encodeURIComponent(accountId)}` : "";
+    return `/editor/${encodeURIComponent(post.template_id)}${q}`;
+}
+function posterMedia(post) {
+    const asset = post.media.find((a) => isVideoAsset(a)) || post.media.find((a) => isImageAsset(a)) || primaryAsset(post);
+    if (asset && isVideoAsset(asset)) {
+        return `<video class="rk-library-video" muted loop playsinline preload="metadata" src="${rkEscape(asset.url)}#t=0.1"></video>`;
+    }
+    if (asset && isImageAsset(asset)) {
+        return `<img class="rk-library-video" loading="lazy" src="${rkEscape(asset.url)}" alt="${rkEscape(post.title || "Published render")}" />`;
+    }
+    return `<span class="rk-library-noprev">No preview</span>`;
+}
+function projectCard(post, accountId) {
+    const s = statusInfo(post.status);
+    const href = editorHref(post, accountId) || shareHref(post);
+    const dl = downloadAsset(post);
+    const canDownload = dl && isVideoAsset(dl);
+    const title = post.title || "Published render";
+    const subLine = post.tracer
+        ? post.tracer
+        : post.template_id
+            ? `Composition ${post.template_id}`
+            : "Ready-to-post cut";
+    const searchHay = [title, post.caption, post.tracer, post.template_id].filter(Boolean).join(" ").toLowerCase();
+    const editHref = editorHref(post, accountId);
+    const primaryAction = post.status === "scheduled"
+        ? `<a class="rk-btn rk-btn-ghost rk-btn-sm" href="/calendar">Reschedule</a>`
+        : `<a class="rk-btn rk-btn-gold rk-btn-sm" href="/calendar">Schedule <span class="rk-arrow">→</span></a>`;
+    const actions = [
+        editHref ? `<a class="rk-btn rk-btn-ghost rk-btn-sm" href="${rkEscape(editHref)}">Open in editor</a>` : "",
+        `<a class="rk-btn rk-btn-ghost rk-btn-sm" href="${rkEscape(shareHref(post))}" target="_blank" rel="noreferrer">View post</a>`,
+        canDownload ? `<a class="rk-btn rk-btn-ghost rk-btn-sm" href="${rkEscape(dl.url)}" download="${rkEscape(dl.file_name || "render.mp4")}">Download</a>` : ""
+    ].filter(Boolean).join("");
+    return `<article class="rk-library-card rk-card-hover" data-status="${rkEscape(post.status)}" data-title="${rkEscape(searchHay)}">
+    <a class="rk-library-poster" href="${rkEscape(href)}" aria-label="${rkEscape(title)}">
+      ${posterMedia(post)}
+      <span class="rk-pill ${s.pill} rk-library-pstatus"><span class="rk-library-dot"></span>${rkEscape(s.short)}</span>
+      <span class="rk-library-dur">9:16</span>
+      <span class="rk-library-play">${PLAY}</span>
+    </a>
+    <div class="rk-library-meta">
+      <h3 class="rk-library-title">${rkEscape(title)}</h3>
+      <div class="rk-library-origin"><span class="rk-library-origin-txt">${rkEscape(subLine)}</span></div>
+      <div class="rk-spread rk-library-foot">
+        <span class="rk-library-time">${rkEscape(fmtDate(post.created_at))}</span>
+        ${primaryAction}
+      </div>
+      <div class="rk-library-actions">${actions}</div>
+    </div>
+  </article>`;
+}
+function approvedPanel(input, tabs) {
+    const posts = input.posts;
+    const accountId = input.currentAccountId;
+    // The quickfilter searchbar mirrors the Clips tab's pill search — always
+    // rendered so the topbar reads the same on both tabs (disabled when empty).
+    const searchBar = `<label class="rk-clips-search rk-library-qsearch">
+      <span class="rk-clips-search-ic">${SEARCH_ICON}</span>
+      <input class="rk-input rk-clips-search-input" data-rk-search type="search"
+        placeholder="Search cuts — title, caption, or tracer…" autocomplete="off" aria-label="Search cuts"${posts.length ? "" : " disabled"} />
+    </label>`;
+    if (posts.length === 0) {
+        return `
+  <div class="rk-library-topbar">
+    ${tabs}
+    ${searchBar}
+  </div>
+
+  <div class="rk-library-empty is-visible">
+    <h3>No published cuts yet</h3>
+    <p class="rk-muted">Approve a finished render and it lands here — ready to schedule, share, or download. Start from a template or a prompt.</p>
+    <a class="rk-btn rk-btn-gold" href="/discover">Start a project <span class="rk-arrow">→</span></a>
+  </div>`;
+    }
+    const readyCount = posts.filter((p) => p.status === "ready").length;
+    const scheduledCount = posts.filter((p) => p.status === "scheduled").length;
+    const chipDefs = [
+        ["", "All"],
+        ["ready", "Ready to post"],
+        ["scheduled", "Scheduled"]
+    ];
+    const chips = chipDefs
+        .map(([value, label], i) => `<button type="button" class="rk-library-chip${i === 0 ? " is-active" : ""}" data-rk-filter="${value}">${rkEscape(label)}</button>`)
+        .join("");
+    const newTile = `<a class="rk-library-new" data-rk-newtile href="/discover">
+    <span class="rk-tile rk-tile-lg rk-tile-gold rk-library-new-plus">+</span>
+    <div>
+      <div class="rk-library-new-title">New project</div>
+      <div class="rk-library-new-sub">Fork a template or start from a prompt</div>
+    </div>
+  </a>`;
+    const cards = posts.map((p) => projectCard(p, accountId)).join("");
+    return `
+  <div class="rk-library-topbar">
+    ${tabs}
+    ${searchBar}
+  </div>
+
+  <div class="rk-library-toolbar">
+    <div class="rk-library-chips" role="tablist" aria-label="Filter by status">${chips}</div>
+    <div class="rk-library-summary"><b>${posts.length}</b> published cut${posts.length === 1 ? "" : "s"}&nbsp;·&nbsp;<b>${readyCount}</b> ready to post&nbsp;·&nbsp;<b>${scheduledCount}</b> scheduled</div>
+  </div>
+
+  <div class="rk-library-grid" data-rk-grid>
+    ${newTile}
+    ${cards}
+  </div>
+
+  <div class="rk-library-empty" data-rk-empty>
+    <h3>Nothing here yet</h3>
+    <p class="rk-muted">No cuts match this filter. Try another status or spin up a fresh render.</p>
+    <a class="rk-btn rk-btn-gold" href="/discover">Start a project <span class="rk-arrow">→</span></a>
+  </div>`;
+}
+/* ──────────────────────────────── Clips tab ───────────────────────────────── */
+// The clip library is NOT part of the library route's input — the client fetches
+// the REAL endpoints on load: GET /clips/feed (library), POST /clips/search
+// (hybrid semantic search), POST /clips/scan + GET /clips/scan/:id (mine a
+// source), download via /clips/:clipId/download.
+// Filter chips double as real one-tap semantic searches (each hits /clips/search
+// with its phrase); "All clips" reloads the feed.
+const CLIP_PRESETS = [
+    { slug: "all", label: "All raws", q: "" },
+    { slug: "reactions", label: "Reactions", q: "someone reacting, a surprised or emotional reaction close-up" },
+    { slug: "hooks", label: "Hooks & hot takes", q: "a strong opening hook or hot take, talking to camera" },
+    { slug: "money", label: "Money shots", q: "money, cash, coins or payment in close-up" },
+    { slug: "talking", label: "Talking head", q: "a person talking to the camera, medium shot" },
+    { slug: "broll", label: "B-roll", q: "b-roll cutaway footage with no one talking" },
+    { slug: "establishing", label: "Establishing", q: "a wide establishing shot of a place" }
+];
+function clipsPanel(tabs) {
+    const filterChips = CLIP_PRESETS
+        .map((f, i) => `<button type="button" class="rk-clips-chip${i === 0 ? " is-active" : ""}" data-filter="${rkEscape(f.slug)}" data-q="${rkEscape(f.q)}">${rkEscape(f.label)}</button>`)
+        .join("");
+    return `
+  <div class="rk-library-topbar">
+    ${tabs}
+    <form class="rk-clips-search" id="rkClipsSearch">
+      <span class="rk-clips-search-ic">${SEARCH_ICON}</span>
+      <input class="rk-input rk-clips-search-input" id="rkClipsQuery" type="search"
+        placeholder="Search raws — e.g. &quot;someone looks confused after reading a message&quot;" autocomplete="off" />
+      <button class="rk-btn rk-btn-ink rk-btn-sm rk-clips-search-btn" type="submit">Search</button>
+    </form>
+  </div>
+
+  <div class="rk-clips-toolbar">
+    <div class="rk-clips-chipsrow">
+      <div class="rk-clips-chips" id="rkClipsChips">${filterChips}</div>
+      <div class="rk-library-summary" id="rkClipsSummary">Loading your raws library…</div>
+    </div>
+    <div class="rk-clips-status" id="rkClipsStatus">Loading your raws…</div>
+  </div>
+
+  <div class="rk-clips-grid" id="rkClipsGrid"></div>
+
+  <div class="rk-clips-empty" id="rkClipsEmpty" hidden>
+    <h3>No clips yet</h3>
+    <p class="rk-muted">Click <b>Import source</b> to mine a long video into tagged, searchable short clips.</p>
+  </div>`;
+}
+const CLIPS_DIALOG = `
+<dialog class="rk-clips-dialog" id="rkClipsDialog">
+  <form class="rk-clips-dialog-form" id="rkClipsScanForm" method="dialog">
+    <div class="rk-card-head">
+      <span class="rk-eyebrow">Import source</span>
+      <h2>Mine a video into clips</h2>
+      <p class="rk-muted">Paste a video URL — TikTok, YouTube, Instagram, X, or a direct link. We'll scan it and add the matching moments to your raws library.</p>
+    </div>
+    <div class="rk-field">
+      <label class="rk-label" for="rkScanUrl">Video URL</label>
+      <input class="rk-input" id="rkScanUrl" name="url" type="url" placeholder="https://youtube.com/watch?v=… or https://…/video.mp4" autocomplete="off" />
+    </div>
+    <div class="rk-field">
+      <label class="rk-label" for="rkScanPrompt">What to clip for</label>
+      <textarea class="rk-textarea" id="rkScanPrompt" name="prompt" placeholder="Clip scenes of people reacting, no text on screen, vertical, between 5–10 secs long"></textarea>
+      <span class="rk-hint">Guides the AI tagger toward the moments you actually want.</span>
+    </div>
+    <div class="rk-grid rk-grid-2 rk-clips-dialog-grid">
+      <div class="rk-field">
+        <label class="rk-label" for="rkScanProvider">AI provider</label>
+        <select class="rk-select" id="rkScanProvider" name="provider">
+          <option value="">Auto — use my saved keys</option>
+          <option value="gemini">Gemini</option>
+          <option value="openai">OpenAI</option>
+          <option value="openrouter">OpenRouter</option>
+        </select>
+      </div>
+      <div class="rk-field">
+        <label class="rk-label" for="rkScanTracer">Tracer <span class="rk-hint">optional</span></label>
+        <input class="rk-input" id="rkScanTracer" name="tracer" type="text" placeholder="my-campaign-001" autocomplete="off" />
+      </div>
+    </div>
+    <p class="rk-hint rk-clips-dialog-note" id="rkScanNote">AI tagging runs on your own key (BYOK) — vidfarm only bills the clip-scan compute.</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">Start scan <span class="rk-arrow">→</span></button>
+    </div>
+  </form>
+</dialog>`;
+/* ──────────────────────────────── Page shell ──────────────────────────────── */
+const APPROVED_SCRIPT = `
+(function(){
+  var root=document;
+  var grid=root.querySelector('[data-rk-grid]');
+  var empty=root.querySelector('[data-rk-empty]');
+  var chips=Array.prototype.slice.call(root.querySelectorAll('[data-rk-filter]'));
+  var newTile=root.querySelector('[data-rk-newtile]');
+  var search=root.querySelector('[data-rk-search]');
+  var cards=Array.prototype.slice.call(root.querySelectorAll('.rk-library-card'));
+  var activeFilter='';
+  function apply(){
+    var q=(search&&search.value||'').trim().toLowerCase();
+    var shown=0;
+    cards.forEach(function(card){
+      var okStatus=activeFilter===''||card.getAttribute('data-status')===activeFilter;
+      var okSearch=!q||(card.getAttribute('data-title')||'').indexOf(q)!==-1;
+      var visible=okStatus&&okSearch;
+      card.hidden=!visible;
+      if(visible)shown++;
+    });
+    if(newTile)newTile.hidden=!(activeFilter===''&&!q);
+    if(empty)empty.classList.toggle('is-visible',shown===0);
+  }
+  chips.forEach(function(btn){
+    btn.addEventListener('click',function(){
+      activeFilter=btn.getAttribute('data-rk-filter')||'';
+      chips.forEach(function(b){b.classList.toggle('is-active',b===btn)});
+      apply();
+    });
+  });
+  if(search)search.addEventListener('input',apply);
+  // hover-to-play the real MP4 previews
+  root.querySelectorAll('video.rk-library-video').forEach(function(v){
+    var card=v.closest('.rk-library-card');
+    if(!card)return;
+    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(); });
+  });
+  apply();
+})();`;
+const CLIPS_SCRIPT = `
+(function(){
+  var root=document;
+  var grid=root.getElementById('rkClipsGrid');
+  var statusEl=root.getElementById('rkClipsStatus');
+  var summaryEl=root.getElementById('rkClipsSummary');
+  var empty=root.getElementById('rkClipsEmpty');
+  var chips=root.getElementById('rkClipsChips');
+  var form=root.getElementById('rkClipsSearch');
+  var query=root.getElementById('rkClipsQuery');
+
+  function esc(t){ var d=document.createElement('div'); d.textContent=(t==null?'':String(t)); return d.innerHTML; }
+  function fmtClock(sec){ sec=Number(sec)||0; var m=Math.floor(sec/60), s=Math.floor(sec%60); return m+':'+(s<10?'0':'')+s; }
+  function topTags(tags){
+    if(!tags||typeof tags!=='object') return [];
+    var out=[];
+    ['subject','action','emotion','composition'].forEach(function(k){ (tags[k]||[]).slice(0,1).forEach(function(v){ out.push(v); }); });
+    if(tags.energy) out.push('energy:'+tags.energy);
+    return out.slice(0,4);
+  }
+  function setGridEmpty(show){ if(empty)empty.hidden=!show; if(grid)grid.style.display=show?'none':''; }
+
+  function card(clip){
+    var range=fmtClock(clip.start_time_sec)+'–'+fmtClock(clip.end_time_sec);
+    var dur=(clip.duration_sec!=null)?(Number(clip.duration_sec).toFixed(1)+'s'):'';
+    var media=clip.thumbnail_url
+      ? '<img class="rk-clips-thumb-img" loading="lazy" src="'+esc(clip.thumbnail_url)+'" alt="" />'
+      : '<span class="rk-clips-noimg">No preview</span>';
+    var vid=clip.view_url ? '<video class="rk-clips-thumb-vid" muted loop playsinline preload="none" src="'+esc(clip.view_url)+'"></video>' : '';
+    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">'
+      + '<div class="rk-clips-thumb">'+media+vid
+      + '<span class="rk-clips-dur">'+esc(range+(dur?' · '+dur:''))+'</span>'
+      + '<button type="button" class="rk-clips-play" aria-label="Preview clip">'+String.fromCharCode(9654)+'</button>'
+      + '</div>'
+      + '<div class="rk-clips-body">'
+      + '<h3 class="rk-clips-title">'+esc(desc)+'</h3>'
+      + (tags?'<div class="rk-clips-tags">'+tags+'</div>':'')
+      + '<div class="rk-clips-foot"><span class="rk-clips-src" title="'+esc(clip.source_filename)+'">'+esc(clip.source_filename||'')+'</span>'
+      + '<a class="rk-clips-dl" href="'+dl+'">Download</a></div>'
+      + '</div></article>';
+  }
+
+  function bindHover(){
+    if(!grid)return;
+    Array.prototype.slice.call(grid.querySelectorAll('.rk-clips-thumb')).forEach(function(thumb){
+      var v=thumb.querySelector('.rk-clips-thumb-vid');
+      if(!v)return;
+      thumb.addEventListener('mouseenter',function(){ v.style.display='block'; var p=v.play&&v.play(); if(p&&p.catch)p.catch(function(){}); });
+      thumb.addEventListener('mouseleave',function(){ if(v.pause)v.pause(); v.style.display='none'; });
+    });
+  }
+
+  function render(clips,label){
+    clips=clips||[];
+    if(clips.length===0){
+      if(statusEl)statusEl.textContent=label||'';
+      if(summaryEl)summaryEl.innerHTML='<b>0</b> clips in your library';
+      if(grid)grid.innerHTML='';
+      setGridEmpty(true);
+      return;
+    }
+    setGridEmpty(false);
+    if(statusEl)statusEl.textContent=(label||'')+clips.length+' clip'+(clips.length===1?'':'s');
+    if(summaryEl)summaryEl.innerHTML='<b>'+clips.length+'</b> clip'+(clips.length===1?'':'s')+' shown';
+    if(grid)grid.innerHTML=clips.map(card).join('');
+    bindHover();
+  }
+
+  function handleAuth(res){
+    if(res.status===401||res.status===403){
+      if(grid)grid.innerHTML='';
+      setGridEmpty(false);
+      if(statusEl)statusEl.innerHTML='Sign in to vidfarm to see your raws, then build a library with the Import source button or <code>vidfarm raws scan</code>.';
+      if(summaryEl)summaryEl.textContent='Sign in to view your raws library';
+      throw new Error('unauthorized');
+    }
+    return res.json();
+  }
+
+  function loadFeed(){
+    if(statusEl)statusEl.textContent='Loading your raws…';
+    fetch('/raws/feed?limit=120',{credentials:'same-origin',headers:{Accept:'application/json'}})
+      .then(handleAuth).then(function(d){ render(d.clips,''); }).catch(function(){});
+  }
+
+  function search(q,label){
+    if(statusEl)statusEl.textContent='Searching…';
+    fetch('/raws/search',{method:'POST',credentials:'same-origin',headers:{'Content-Type':'application/json',Accept:'application/json'},body:JSON.stringify({query:q,limit:60})})
+      .then(handleAuth).then(function(d){
+        var lbl=(d.semantic?'semantic ':'')+'results for '+String.fromCharCode(8220)+(label||q)+String.fromCharCode(8221)+' — ';
+        render(d.results,lbl);
+      }).catch(function(){});
+  }
+
+  if(form){
+    form.addEventListener('submit',function(e){
+      e.preventDefault();
+      var q=(query&&query.value||'').trim();
+      if(chips)chips.querySelectorAll('.rk-clips-chip').forEach(function(b){b.classList.remove('is-active');});
+      if(q)search(q,null); else { var all=chips&&chips.querySelector('[data-filter="all"]'); if(all)all.classList.add('is-active'); loadFeed(); }
+    });
+  }
+  if(chips){
+    chips.addEventListener('click',function(e){
+      var btn=e.target.closest('.rk-clips-chip');
+      if(!btn)return;
+      chips.querySelectorAll('.rk-clips-chip').forEach(function(b){b.classList.toggle('is-active',b===btn);});
+      var slug=btn.getAttribute('data-filter');
+      var q=btn.getAttribute('data-q')||'';
+      if(query)query.value='';
+      if(slug==='all'||!q)loadFeed(); else search(q,btn.textContent.trim());
+    });
+  }
+
+  // ── Scan a source (real clip hunt) ─────────────────────────────────────
+  var dialog=root.getElementById('rkClipsDialog');
+  var openBtns=Array.prototype.slice.call(root.querySelectorAll('[data-rk-open-scan]'));
+  var cancelBtn=root.getElementById('rkClipsScanCancel');
+  var scanForm=root.getElementById('rkClipsScanForm');
+  var scanUrl=root.getElementById('rkScanUrl');
+  var scanPrompt=root.getElementById('rkScanPrompt');
+  var scanProvider=root.getElementById('rkScanProvider');
+  var scanTracer=root.getElementById('rkScanTracer');
+  var scanNote=root.getElementById('rkScanNote');
+  var scanSubmit=root.getElementById('rkClipsScanSubmit');
+  var scanPoll=null;
+  function setNote(msg,tone){ if(!scanNote)return; scanNote.textContent=msg; if(tone)scanNote.setAttribute('data-tone',tone); else scanNote.removeAttribute('data-tone'); }
+  if(dialog){ openBtns.forEach(function(openBtn){ openBtn.addEventListener('click',function(){ setNote('AI tagging runs on your own key (BYOK) — vidfarm only bills the clip-scan compute.'); if(typeof dialog.showModal==='function'&&!dialog.open)dialog.showModal(); }); }); }
+  if(cancelBtn&&dialog){ cancelBtn.addEventListener('click',function(){ if(dialog.open)dialog.close(); }); }
+  if(dialog){
+    dialog.addEventListener('click',function(e){
+      var r=dialog.getBoundingClientRect();
+      if(e.clientX<r.left||e.clientX>r.right||e.clientY<r.top||e.clientY>r.bottom)dialog.close();
+    });
+  }
+  function pollScan(scanId){
+    if(scanPoll)clearInterval(scanPoll);
+    var tries=0;
+    scanPoll=setInterval(function(){
+      tries++;
+      if(tries>200){ clearInterval(scanPoll); scanPoll=null; if(statusEl)statusEl.textContent='Still scanning in the background — check back shortly.'; return; }
+      fetch('/raws/scan/'+encodeURIComponent(scanId),{credentials:'same-origin',headers:{Accept:'application/json'}})
+        .then(function(r){ return r.ok?r.json():null; })
+        .then(function(d){
+          if(!d)return;
+          var src=d.source||{};
+          var status=src.status||(d.scan&&d.scan.status)||'running';
+          if(status==='complete'){ clearInterval(scanPoll); scanPoll=null; if(statusEl)statusEl.textContent='Import complete — refreshing your raws…'; loadFeed(); }
+          else if(status==='failed'||status==='error'){ clearInterval(scanPoll); scanPoll=null; if(statusEl)statusEl.textContent='Import failed: '+(src.error||(d.scan&&d.scan.error)||'the source could not be scanned.'); }
+          else if(statusEl){ statusEl.textContent='Scanning source… ('+status+')'; }
+        }).catch(function(){});
+    },4000);
+  }
+  if(scanForm){
+    scanForm.addEventListener('submit',function(e){
+      e.preventDefault();
+      var url=(scanUrl&&scanUrl.value||'').trim();
+      var prompt=(scanPrompt&&scanPrompt.value||'').trim();
+      var tracer=(scanTracer&&scanTracer.value||'').trim();
+      var provider=(scanProvider&&scanProvider.value||'').trim();
+      if(!url){ setNote('Enter a video URL.','error'); return; }
+      setNote('Starting scan…');
+      if(scanSubmit)scanSubmit.disabled=true;
+      var payload={source_url:url,prompt:prompt};
+      if(tracer)payload.tracer=tracer;
+      if(provider)payload.provider=provider;
+      fetch('/raws/scan',{method:'POST',credentials:'same-origin',headers:{'Content-Type':'application/json',Accept:'application/json'},body:JSON.stringify(payload)})
+        .then(function(r){ return r.json().then(function(d){ return {ok:r.ok,data:d}; }); })
+        .then(function(res){
+          if(scanSubmit)scanSubmit.disabled=false;
+          if(!res.ok){ setNote((res.data&&res.data.error)||'Could not start the scan.','error'); return; }
+          setNote('Scan started — this can take a few minutes.','success');
+          if(statusEl)statusEl.textContent='Scanning source…'+(res.data&&res.data.tracer?' (tracer '+res.data.tracer+')':'');
+          if(dialog&&dialog.open)dialog.close();
+          if(scanForm.reset)scanForm.reset();
+          if(res.data&&res.data.scan_id)pollScan(res.data.scan_id);
+        })
+        .catch(function(){ if(scanSubmit)scanSubmit.disabled=false; setNote('Network error — please try again.','error'); });
+    });
+  }
+
+  loadFeed();
+})();`;
+export function renderReskinLibrary(tab = "approved", input = EMPTY_LIBRARY_INPUT) {
+    const isRaws = tab === "raws";
+    const isLogs = tab === "logs";
+    const tabDef = [
+        { key: "approved", label: "Approved", href: "/library/approved" },
+        { key: "raws", label: "Raws", href: "/library/raws" },
+        { key: "logs", label: "Logs", href: "/library/logs" }
+    ];
+    const tabs = `<div class="rk-library-tabs" role="tablist" aria-label="Library view">
+    ${tabDef.map((t) => `<a class="rk-library-tab${t.key === tab ? " is-active" : ""}" role="tab"${t.key === tab ? ` aria-current="page"` : ""} href="${t.href}">${t.label}</a>`).join("\n    ")}
+  </div>`;
+    // Logs tab reuses the real /job-runs history endpoint (client-fetched by the
+    // folded-in job-runs script); the seed is empty so it loads live.
+    const logsBoot = {
+        loadEndpoint: "/job-runs/history?limit=250",
+        accountId: input.currentAccountId || "",
+        storageDriver: "s3",
+        entries: []
+    };
+    const headSub = isLogs
+        ? "Every render, clip scan, decompose and primitive job — with status, timing, and the compute it cost."
+        : isRaws
+            ? "Long-form videos mined into tagged, searchable short clips — every reaction, hook, and money shot, ready to drop into an edit."
+            : "Every published cut you own — ready-to-post renders and scheduled drops. Open in the editor, share, download, or schedule.";
+    const headCta = isRaws
+        ? `<button type="button" class="rk-btn rk-btn-gold rk-btn-sm rk-library-new-btn" data-rk-open-scan>Import source <span class="rk-arrow">→</span></button>`
+        : isLogs
+            ? ""
+            : `<a class="rk-btn rk-btn-gold rk-btn-sm rk-library-new-btn" href="/discover">New project <span class="rk-arrow">→</span></a>`;
+    const panel = isLogs
+        ? `<div class="rk-library-topbar">${tabs}</div>\n  ${jobRunsPanel(logsBoot)}`
+        : isRaws
+            ? clipsPanel(tabs)
+            : approvedPanel(input, tabs);
+    const body = `
+<main class="rk-container-wide rk-page rk-library-page">
+  <div class="rk-spread rk-page-head rk-library-head">
+    <div class="rk-stack rk-library-head-copy">
+      <h1 class="rk-h1">Library</h1>
+      <p class="rk-sub">${headSub}</p>
+    </div>
+    ${headCta}
+  </div>
+
+  ${panel}
+</main>
+${isRaws ? CLIPS_DIALOG : ""}`;
+    const pageCss = `
+/* .rk-page zeroes horizontal padding; the wide container == viewport at 1280 so
+   margin:auto adds no gutter. Restore side gutters (longhand beats the shorthand). */
+.rk-library-page{padding-left:var(--rk-gutter);padding-right:var(--rk-gutter)}
+/* compact head: title + sub left, small New project pinned top-right on the same row */
+.rk-library-head{align-items:flex-start}
+.rk-library-head-copy{gap:4px;margin:0;flex:1 1 auto;min-width:0}
+.rk-library-new-btn{flex:none;margin-top:2px}
+
+/* topbar row: primary tab toggle + the tab's quick search share one line */
+.rk-library-topbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:22px}
+
+/* primary tab toggle (Approved | Clips) */
+.rk-library-tabs{display:inline-flex;flex:none;padding:5px;gap:3px;background:var(--rk-n-100);border:1px solid var(--rk-border);border-radius:var(--rk-r-full)}
+.rk-library-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;border-radius:var(--rk-r-full);font-size:14px;font-weight:600;color:var(--rk-n-600);transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-library-tab span{font-size:15px}
+.rk-library-tab:hover{color:var(--rk-ink)}
+.rk-library-tab.is-active{background:var(--rk-ink);color:#fff;box-shadow:var(--rk-shadow-sm)}
+
+/* stats — sits right-aligned in the chips row */
+.rk-library-summary{font-size:13.5px;color:var(--rk-text-muted);font-weight:500;line-height:1.7}
+.rk-library-summary b{color:var(--rk-ink);font-weight:800;font-family:var(--rk-font-display);font-size:15px;letter-spacing:-.01em}
+.rk-library-toolbar .rk-library-summary,.rk-clips-chipsrow .rk-library-summary{margin-left:auto}
+
+/* toolbar (filter chips + count) */
+.rk-library-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:24px}
+.rk-library-chips{display:flex;flex-wrap:wrap;gap:4px}
+.rk-library-chip{display:inline-flex;align-items:center;padding:6px 13px;border-radius:var(--rk-r-full);border:1px solid transparent;background:transparent;color:var(--rk-text-muted);font-size:13px;font-weight:600;cursor:pointer;transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-library-chip:hover{background:var(--rk-n-100);color:var(--rk-ink)}
+.rk-library-chip.is-active{background:var(--rk-ink);color:#fff}
+/* approved quickfilter — same pill search as the Clips tab, right-aligned */
+.rk-library-qsearch{flex:1 1 220px;max-width:360px;margin-left:auto}
+.rk-library-qsearch .rk-clips-search-input:disabled{background:var(--rk-n-100);cursor:not-allowed}
+@media(max-width:720px){.rk-library-qsearch{max-width:none;margin-left:0;width:100%}}
+
+/* grid + cards */
+.rk-library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
+.rk-library-card{display:flex;flex-direction:column;background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);overflow:hidden;box-shadow:var(--rk-shadow-card)}
+.rk-library-card[hidden]{display:none}
+.rk-library-poster{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:linear-gradient(158deg,#2c2c2c,#171717)}
+.rk-library-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 58%,rgba(0,0,0,.22));pointer-events:none}
+.rk-library-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#050505}
+.rk-library-noprev{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.72);font-size:12px;font-weight:600;letter-spacing:.01em}
+.rk-library-pstatus{position:absolute;top:12px;left:12px;z-index:2;box-shadow:var(--rk-shadow-sm)}
+.rk-library-dot{width:6px;height:6px;border-radius:var(--rk-r-full);background:currentColor;opacity:.9}
+.rk-library-dur{position:absolute;bottom:12px;right:12px;z-index:2;padding:4px 9px;border-radius:var(--rk-r-full);background:rgba(23,23,23,.72);color:#fff;font-size:11px;font-weight:600;letter-spacing:.01em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
+.rk-library-play{position:absolute;top:50%;left:50%;z-index:2;width:52px;height:52px;border-radius:var(--rk-r-full);background:rgba(255,255,255,.94);display:grid;place-items:center;color:var(--rk-ink);box-shadow:var(--rk-shadow-md);opacity:0;transform:translate(-50%,-50%) scale(.82);transition:opacity var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease)}
+.rk-library-card:hover .rk-library-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
+.rk-library-play svg{margin-left:2px}
+.rk-library-meta{display:grid;gap:10px;padding:16px 16px 18px}
+.rk-library-title{font-family:var(--rk-font-display);font-size:15px;font-weight:700;color:var(--rk-ink);line-height:1.24;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.48em}
+.rk-library-origin{display:flex;align-items:center;gap:8px;min-width:0;font-size:12.5px;font-weight:500;color:var(--rk-text-muted)}
+.rk-library-origin-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
+.rk-library-foot{margin-top:2px;gap:10px}
+.rk-library-foot .rk-btn{flex:none}
+.rk-library-time{font-size:12px;font-weight:500;color:var(--rk-text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
+.rk-library-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
+.rk-library-actions .rk-btn{flex:none}
+
+/* new-project tile */
+.rk-library-new{display:grid;grid-auto-flow:row;place-content:center;justify-items:center;gap:14px;text-align:center;padding:28px 22px;border:1.5px dashed var(--rk-border-strong);border-radius:var(--rk-r-3xl);background:var(--rk-n-50);color:var(--rk-text-muted);transition:border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease)}
+.rk-library-new:hover{border-color:var(--rk-gold-600);background:var(--rk-gold-tint);transform:translateY(-2px)}
+.rk-library-new-plus{font-family:var(--rk-font-display);font-weight:800}
+.rk-library-new-title{font-family:var(--rk-font-display);font-weight:800;font-size:var(--rk-text-lg);color:var(--rk-ink);letter-spacing:-.01em}
+.rk-library-new-sub{font-size:12.5px;color:var(--rk-text-muted);margin-top:3px;max-width:15ch}
+.rk-library-new[hidden]{display:none}
+
+/* empty state */
+.rk-library-empty{display:none;place-items:center;gap:12px;text-align:center;padding:64px 24px;border:1.5px dashed var(--rk-border-strong);border-radius:var(--rk-r-3xl);background:var(--rk-n-50)}
+.rk-library-empty.is-visible{display:grid}
+.rk-library-empty h3{font-size:var(--rk-text-xl)}
+.rk-library-empty p{max-width:42ch}
+
+@media(prefers-reduced-motion:reduce){.rk-library-video{}}
+
+/* ── clips tab ── */
+.rk-clips-toolbar{display:grid;gap:16px;margin-bottom:24px}
+.rk-clips-chipsrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
+.rk-clips-search{position:relative;display:flex;align-items:center;gap:8px;flex:1 1 300px;min-width:240px;margin:0}
+.rk-clips-search-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--rk-n-400);pointer-events:none;display:flex}
+.rk-clips-search-input{flex:1;padding-left:40px;border-radius:var(--rk-r-full)}
+.rk-clips-search-btn{flex:none}
+.rk-clips-scan{flex:none}
+.rk-clips-chips{display:flex;flex-wrap:wrap;gap:4px}
+.rk-clips-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:var(--rk-r-full);border:1px solid transparent;background:transparent;font-family:var(--rk-font-body);font-size:13px;font-weight:600;color:var(--rk-text-muted);cursor:pointer;white-space:nowrap;transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-clips-chip:hover{background:var(--rk-n-100);color:var(--rk-ink)}
+.rk-clips-chip.is-active{background:var(--rk-ink);color:#fff}
+.rk-clips-status{font-size:13px;color:var(--rk-text-muted);font-weight:500}
+.rk-clips-status code{font-family:var(--rk-font-mono,monospace);font-size:12px;background:var(--rk-n-100);padding:1px 5px;border-radius:6px}
+.rk-clips-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:22px}
+.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-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-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)}
+.rk-clips-play:hover{background:var(--rk-gold-500)}
+.rk-clips-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:16px}
+.rk-clips-title{font-family:var(--rk-font-display);font-size:14px;font-weight:700;line-height:1.34;color:var(--rk-ink);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.rk-clips-tags{display:flex;flex-wrap:wrap;gap:5px}
+.rk-clips-tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--rk-r-full);background:var(--rk-gold-tint);color:var(--rk-n-700);font-size:11px;font-weight:600;white-space:nowrap}
+.rk-clips-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;border-top:1px solid var(--rk-border);padding-top:12px}
+.rk-clips-src{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--rk-text-muted);font-size:12px;font-weight:500}
+.rk-clips-dl{flex:none;color:var(--rk-gold-700);font-size:12px;font-weight:700}
+.rk-clips-dl:hover{color:var(--rk-gold-500)}
+.rk-clips-empty{display:grid;place-items:center;gap:10px;text-align:center;padding:64px 20px;background:#fff;border:1.5px dashed var(--rk-border-strong);border-radius:var(--rk-r-3xl)}
+.rk-clips-empty[hidden]{display:none}
+.rk-clips-empty h3{font-size:var(--rk-text-xl)}
+.rk-clips-dialog{width:min(34rem,calc(100vw - 2rem));padding:0;border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);background:var(--rk-surface);box-shadow:var(--rk-shadow-xl)}
+.rk-clips-dialog::backdrop{background:rgba(23,23,23,.34);backdrop-filter:blur(6px)}
+.rk-clips-dialog-form{display:grid;gap:16px;margin:0;padding:28px}
+.rk-clips-dialog-grid{gap:14px}
+.rk-clips-dialog-note{background:var(--rk-gold-tint);border-radius:var(--rk-r-xl);padding:10px 13px;color:var(--rk-n-700)}
+.rk-clips-dialog-note[data-tone="error"]{background:#fdecea;color:#8d3b2f}
+.rk-clips-dialog-note[data-tone="success"]{background:#e8f7ee;color:#1f7a44}
+.rk-clips-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
+@media(max-width:620px){
+  .rk-clips-search{flex:1 1 100%}
+  .rk-clips-scan{flex:1 1 100%}
+  .rk-clips-search-input{font-size:16px}
+  .rk-clips-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
+}
+`;
+    const tabTitle = isRaws ? " · Raws" : isLogs ? " · Logs" : "";
+    return reskinDocument({
+        title: `vidfarm reskin — Library${tabTitle}`,
+        description: "Reskinned vidfarm library: your published cuts, mined raws library, and job run history.",
+        activeSlug: "library",
+        pageCss: pageCss + (isLogs ? "\n" + JOBRUNS_PAGE_CSS : ""),
+        body,
+        script: isLogs ? JOBRUNS_SCRIPT : isRaws ? CLIPS_SCRIPT : APPROVED_SCRIPT
+    });
+}
+//# sourceMappingURL=library-page.js.map