@mevdragon/vidfarm-devcli 0.17.0 → 0.18.0

package/dist/src/reskin/document.js

@@ -22,38 +22,627 @@ export function rkEscape(value) {
         .replace(/"/g, """)
         .replace(/'/g, "'");
 }
+/** The sidebar shows only the core app pages (not every reskinned page).
+ *  Other pages stay reachable from the /reskin gallery (brand link). */
+const SIDEBAR_NAV = [
+    { slug: "discover", label: "Discover" },
+    { slug: "chat", label: "Chat" },
+    { slug: "library", label: "Library" },
+    { slug: "calendar", label: "Calendar" },
+    { slug: "help", label: "Guides" },
+    { slug: "settings", label: "Settings" }
+];
 function renderSidebar(activeSlug) {
-    const items = RESKIN_PAGES.map((p) => {
+    const items = SIDEBAR_NAV.map((p) => {
         const active = p.slug === activeSlug ? " is-active" : "";
-        return `<a class="rk-sidebar-item${active}" href="/reskin/${p.slug}"${p.slug === activeSlug ? ` aria-current="page"` : ""}>${p.label}</a>`;
+        return `<a class="rk-sidebar-item${active}" href="/${p.slug}"${p.slug === activeSlug ? ` aria-current="page"` : ""}>${p.label}</a>`;
     }).join("");
-    const live = RESKIN_PAGES.find((p) => p.slug === activeSlug)?.live ?? "/";
-    const homeActive = activeSlug === null ? " is-active" : "";
     return `<aside class="rk-sidebar">
-  <a class="rk-sidebar-brand" href="/reskin"><span class="rk-brand-mark">V</span>vidfarm<span class="rk-brand-tag">reskin</span></a>
+  <a class="rk-sidebar-brand" href="/discover"><span class="rk-brand-mark">V</span>vidfarm</a>
   <nav class="rk-sidebar-nav" aria-label="Reskin pages">
-    <a class="rk-sidebar-item${homeActive}" href="/reskin">Gallery</a>
-    <div class="rk-sidebar-sep"></div>
     ${items}
   </nav>
-  <div class="rk-sidebar-foot">
-    <a class="rk-sidebar-foot-link" href="${rkEscape(live)}">↗ Compare with live page</a>
-    <a class="rk-btn rk-btn-ink rk-btn-sm rk-sidebar-cta" href="/">Live site <span class="rk-arrow">→</span></a>
+</aside>`;
+}
+/** Draggable chat FAB (defaults to the old sidebar-foot spot, bottom-left) +
+ *  the popup AI chat panel it toggles. Sample chat only — this is the design
+ *  sandbox, so the panel demos the UI rather than hitting a live agent. The
+ *  old "compare with live page" link survives as the ↗ tool in the panel head. */
+function renderChatDock(activeSlug) {
+    const page = RESKIN_PAGES.find((p) => p.slug === activeSlug);
+    const label = rkEscape(page?.label ?? "vidfarm");
+    return `<button class="rk-fab" id="rkFab" type="button" aria-label="Open AI chat" aria-expanded="false" aria-controls="rkAichat" title="Chat with vidfarm AI — drag to move">
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
+</button>
+<aside class="rk-aichat has-files" id="rkAichat" hidden aria-label="AI chat panel">
+  <div class="rk-aichat-files" id="rkAichatFiles" aria-label="Files">
+    <div class="rk-aichat-crumbs" id="rkAichatCrumbs" aria-label="Current folder"></div>
+    <div class="rk-aichat-files-body" id="rkAichatFilesBody"></div>
+    <div class="rk-aichat-drop" id="rkAichatDrop" hidden>
+      <input type="file" id="rkAichatUploadInput" multiple hidden>
+      <div class="rk-aichat-drop-text" id="rkAichatDropText">Drop files to upload</div>
+      <button type="button" class="rk-aichat-drop-btn" id="rkAichatUploadBtn">Upload files</button>
+    </div>
+  </div>
+  <div class="rk-aichat-main">
+    <header class="rk-aichat-head">
+      <span class="rk-brand-mark">V</span>
+      <div class="rk-aichat-head-main">
+        <div class="rk-aichat-title">Vidfarm AI</div>
+        <div class="rk-aichat-sub">sample chat</div>
+      </div>
+      <button class="rk-aichat-tool is-on" id="rkFilesToggle" type="button" title="Toggle My Files" aria-label="Toggle My Files" aria-pressed="true">
+        <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 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>
+      </button>
+      <button class="rk-aichat-tool" id="rkAichatMin" type="button" title="Minimize" aria-label="Minimize chat">—</button>
+    </header>
+    <div class="rk-aichat-log" id="rkAichatLog">
+      <div class="rk-aichat-msg is-ai">Hi! I'm the vidfarm assistant. Ask me anything about the ${label} page — or attach a file from the Files panel on the left.</div>
+      <div class="rk-aichat-msg is-user">What changed in this reskin?</div>
+      <div class="rk-aichat-msg is-ai">This page was ported into the farmville design system — honey-gold accent, soft rounded cards, the shared rk- primitives — while keeping the layout one-to-one with the live page.</div>
+    </div>
+    <div class="rk-aichat-chips" id="rkAichatChips"></div>
+    <form class="rk-aichat-composer" id="rkAichatForm">
+      <input class="rk-input" id="rkAichatInput" placeholder="Ask the vidfarm AI…" autocomplete="off">
+      <button class="rk-btn rk-btn-gold rk-btn-sm" type="submit">Send</button>
+    </form>
   </div>
 </aside>`;
 }
+/** Chrome behavior: FAB drag (click-vs-drag threshold, viewport clamp, position
+ *  persisted in localStorage) + panel toggle. The panel anchors to whichever
+ *  half of the viewport the FAB sits in so it is never cut off; when it opens
+ *  on the left it replaces the sidebar nav (body.rk-chat-left). Open state
+ *  survives page navigation via sessionStorage. Plain IIFE — no backticks or
+ *  dollar-brace inside (it is embedded in a template literal). */
+const RESKIN_CHROME_SCRIPT = `(() => {
+  var fab = document.getElementById('rkFab');
+  var panel = document.getElementById('rkAichat');
+  if (!fab || !panel) return;
+  var minBtn = document.getElementById('rkAichatMin');
+  var form = document.getElementById('rkAichatForm');
+  var input = document.getElementById('rkAichatInput');
+  var log = document.getElementById('rkAichatLog');
+  var MARGIN = 10;
+
+  function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
+
+  // offsetWidth/offsetLeft (not getBoundingClientRect) so the hover/drag/open
+  // transforms never skew the clamp math
+  function placeFab(x, y) {
+    x = clamp(x, MARGIN, window.innerWidth - fab.offsetWidth - MARGIN);
+    y = clamp(y, MARGIN, window.innerHeight - fab.offsetHeight - MARGIN);
+    fab.style.left = x + 'px';
+    fab.style.top = y + 'px';
+    fab.style.bottom = 'auto';
+    return { x: x, y: y };
+  }
+
+  try {
+    var saved = JSON.parse(localStorage.getItem('rk-fab-pos') || 'null');
+    if (saved && typeof saved.x === 'number') placeFab(saved.x, saved.y);
+  } catch (e) {}
+
+  function anchorPanel() {
+    var r = fab.getBoundingClientRect();
+    var onRight = r.left + r.width / 2 > window.innerWidth / 2;
+    panel.classList.toggle('is-right', onRight);
+    document.body.classList.toggle('rk-chat-left', !panel.hidden && !onRight);
+  }
+
+  function openPanel() {
+    panel.hidden = false;
+    fab.classList.add('is-open');
+    fab.setAttribute('aria-expanded', 'true');
+    anchorPanel();
+    try { sessionStorage.setItem('rk-chat-open', '1'); } catch (e) {}
+    refreshFilesOnOpen();
+    if (input) input.focus();
+  }
+
+  function closePanel() {
+    panel.hidden = true;
+    fab.classList.remove('is-open');
+    fab.setAttribute('aria-expanded', 'false');
+    document.body.classList.remove('rk-chat-left');
+    try { sessionStorage.removeItem('rk-chat-open'); } catch (e) {}
+  }
+
+  var drag = null;
+  fab.addEventListener('pointerdown', function (e) {
+    drag = { sx: e.clientX, sy: e.clientY, ox: fab.offsetLeft, oy: fab.offsetTop, moved: false, last: null };
+    fab.setPointerCapture(e.pointerId);
+  });
+  fab.addEventListener('pointermove', function (e) {
+    if (!drag) return;
+    var dx = e.clientX - drag.sx;
+    var dy = e.clientY - drag.sy;
+    if (!drag.moved && Math.hypot(dx, dy) < 6) return;
+    drag.moved = true;
+    fab.classList.add('is-dragging');
+    drag.last = placeFab(drag.ox + dx, drag.oy + dy);
+  });
+  fab.addEventListener('pointerup', function () {
+    if (!drag) return;
+    var moved = drag.moved;
+    if (drag.last) {
+      try { localStorage.setItem('rk-fab-pos', JSON.stringify(drag.last)); } catch (e) {}
+    }
+    fab.classList.remove('is-dragging');
+    drag = null;
+    if (!moved) openPanel();
+  });
+  fab.addEventListener('pointercancel', function () {
+    fab.classList.remove('is-dragging');
+    drag = null;
+  });
+  fab.addEventListener('click', function (e) {
+    if (e.detail === 0 && panel.hidden) openPanel();
+  });
+
+  if (minBtn) minBtn.addEventListener('click', closePanel);
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape' && !panel.hidden) closePanel();
+  });
+  window.addEventListener('resize', function () {
+    if (fab.style.top) {
+      var pos = placeFab(fab.offsetLeft, fab.offsetTop);
+      try { localStorage.setItem('rk-fab-pos', JSON.stringify(pos)); } catch (e) {}
+    }
+    if (!panel.hidden) anchorPanel();
+  });
+
+  function bubble(kind, text) {
+    var el = document.createElement('div');
+    el.className = 'rk-aichat-msg ' + kind;
+    el.textContent = text;
+    log.appendChild(el);
+    log.scrollTop = log.scrollHeight;
+  }
+  if (form) form.addEventListener('submit', function (e) {
+    e.preventDefault();
+    var v = (input.value || '').trim();
+    var picked = selected.slice();
+    if (!v && !picked.length) return;
+    var line = v;
+    if (picked.length) {
+      var names = picked.map(function (f) { return f.name; }).join(', ');
+      line = (v ? v + '  ' : '') + '(attached: ' + names + ')';
+    }
+    bubble('is-user', line);
+    input.value = '';
+    clearChips();
+    setTimeout(function () {
+      bubble('is-ai', picked.length
+        ? 'Got the ' + picked.length + ' file' + (picked.length > 1 ? 's' : '') + ' from your ' + rootLabel(fstate.root) + ' — on the live app I would use ' + (picked.length > 1 ? 'them' : 'it') + ' in the conversation. This reskin panel is a sample, so replies are canned.'
+        : "I'm the sample chat in the reskin sandbox, so replies here are canned — on the live app this panel wires up to the vidfarm agent.");
+    }, 450);
+  });
+
+  // ─── My Files drawer: real directory navigation over my_files/ + temp/ ───
+  var filesPane = document.getElementById('rkAichatFiles');
+  var crumbsEl = document.getElementById('rkAichatCrumbs');
+  var filesBody = document.getElementById('rkAichatFilesBody');
+  var chipsEl = document.getElementById('rkAichatChips');
+  var filesToggle = document.getElementById('rkFilesToggle');
+  var dropEl = document.getElementById('rkAichatDrop');
+  var dropText = document.getElementById('rkAichatDropText');
+  var uploadInput = document.getElementById('rkAichatUploadInput');
+  var uploadBtn = document.getElementById('rkAichatUploadBtn');
+  var selected = [];
+  var uploading = false, uploadMsg = '';
+
+  var ROOTS = {
+    my_files: { url: '/api/v1/user/me/attachments', key: 'attachments', label: 'My Files' },
+    temp: { url: '/api/v1/user/me/temporary-files', key: 'files', label: 'Temp' },
+    // Raws = the reusable clip/source library (renamed clips→raws). Flat list
+    // (no folders); items have a clip shape, so they get their own normalizer.
+    raws: { url: '/raws/feed', key: 'clips', label: 'Raws', norm: normRaw }
+  };
+  // The sources are surfaced as top-level FOLDERS of one virtual root (no source
+  // tabs) — navigate into them natively like any folder.
+  var VROOTS = [{ key: 'my_files', label: 'My Files' }, { key: 'temp', label: 'Temp' }, { key: 'raws', label: 'Raws' }];
+  var fstate = {
+    root: '', // '' = virtual root (lists My Files + Temp + Raws); else a ROOTS key
+    path: { my_files: '', temp: '', raws: '' },
+    data: { my_files: null, temp: null, raws: null },
+    status: { my_files: 'idle', temp: 'idle', raws: 'idle' } // idle|loading|ready|auth|error
+  };
+
+  function rootLabel(root) { return ROOTS[root] ? ROOTS[root].label : 'Files'; }
+  function normFolder(v) {
+    return String(v || '').split('/').map(function (s) { return s.trim(); }).filter(Boolean).join('/');
+  }
+  function normItem(raw) {
+    var id = raw.id || raw.attachment_id || raw.file_id || '';
+    var name = raw.fileName || raw.file_name || '';
+    if (!id || !name) return null;
+    return {
+      id: id, name: name,
+      contentType: raw.contentType || raw.content_type || '',
+      viewUrl: raw.viewUrl || raw.view_url || '',
+      sizeBytes: typeof raw.sizeBytes === 'number' ? raw.sizeBytes : raw.size_bytes,
+      folderPath: normFolder(raw.folderPath || raw.folder_path || '')
+    };
+  }
+  function fmtBytes(b) {
+    if (!b || b <= 0) return '';
+    var u = ['B', 'KB', 'MB', 'GB'], v = b, i = 0;
+    while (v >= 1024 && i < u.length - 1) { v /= 1024; i++; }
+    return (v >= 10 || i === 0 ? Math.round(v) : v.toFixed(1)) + ' ' + u[i];
+  }
+  function fmtDur(s) {
+    if (typeof s !== 'number' || !(s > 0)) return '';
+    s = Math.round(s); var m = Math.floor(s / 60), r = s % 60;
+    return m + ':' + (r < 10 ? '0' + r : r);
+  }
+  // Raws feed items are clips (clip_id / source_filename / view_url / duration),
+  // a different shape than attachments — map them onto the file-row model.
+  function normRaw(raw) {
+    var id = raw.clip_id || raw.id || '';
+    if (!id) return null;
+    return {
+      id: id,
+      name: raw.source_filename || raw.description || 'clip',
+      contentType: 'video/mp4',
+      viewUrl: raw.view_url || raw.viewUrl || '',
+      thumbUrl: raw.thumbnail_url || raw.thumbnailUrl || '',
+      metaText: fmtDur(raw.duration_sec),
+      sizeBytes: undefined,
+      folderPath: ''
+    };
+  }
+  function immediateFolders(data, current) {
+    var cur = normFolder(current);
+    var prefix = cur ? cur + '/' : '';
+    var names = {};
+    function consider(fp) {
+      var n = normFolder(fp);
+      if (!n || (cur && n === cur) || n.indexOf(prefix) !== 0) return;
+      var child = n.slice(prefix.length).split('/')[0];
+      if (child) names[child] = prefix + child;
+    }
+    (data.folders || []).forEach(consider);
+    (data.items || []).forEach(function (it) { consider(it.folderPath); });
+    return Object.keys(names).sort().map(function (n) { return { name: n, path: names[n] }; });
+  }
+
+  function loadRoot(root, force) {
+    if (!ROOTS[root]) return;
+    if (!force && fstate.status[root] === 'ready') { renderFiles(); return; }
+    fstate.status[root] = 'loading';
+    renderFiles();
+    fetch(ROOTS[root].url, { credentials: 'same-origin', headers: { accept: 'application/json' } })
+      .then(function (r) {
+        if (r.status === 401 || r.status === 403) { fstate.status[root] = 'auth'; return null; }
+        if (!r.ok) throw new Error('http ' + r.status);
+        return r.json();
+      })
+      .then(function (j) {
+        if (!j) { renderFiles(); return; }
+        var raw = j[ROOTS[root].key] || [];
+        var norm = ROOTS[root].norm || normItem;
+        var items = [];
+        for (var i = 0; i < raw.length; i++) { var n = norm(raw[i]); if (n) items.push(n); }
+        fstate.data[root] = { items: items, folders: j.folders || [] };
+        fstate.status[root] = 'ready';
+        renderFiles();
+      })
+      .catch(function () { fstate.status[root] = 'error'; renderFiles(); });
+  }
+
+  function fstateNode(text, opts) {
+    var wrap = document.createElement('div');
+    wrap.className = 'rk-aichat-fstate';
+    var p = document.createElement('div');
+    p.textContent = text;
+    wrap.appendChild(p);
+    if (opts && opts.href) {
+      var a = document.createElement('a');
+      a.href = opts.href;
+      a.textContent = opts.linkText || 'Open';
+      wrap.appendChild(a);
+    }
+    if (opts && opts.retry) {
+      var btn = document.createElement('button');
+      btn.type = 'button';
+      btn.textContent = 'Try again';
+      btn.addEventListener('click', function () { loadRoot(fstate.root, true); });
+      wrap.appendChild(btn);
+    }
+    return wrap;
+  }
+
+  // Generic folder row. onOpen is called on click; sub is an optional caption
+  // under the name (used for the virtual roots to show their file count / hint).
+  function folderRow(label, onOpen, sub) {
+    var b = document.createElement('button');
+    b.type = 'button';
+    b.className = 'rk-aichat-frow';
+    var ic = document.createElement('span');
+    ic.className = 'rk-aichat-fic rk-aichat-fic-folder';
+    ic.textContent = '/';
+    var main = document.createElement('span');
+    main.className = 'rk-aichat-fmain';
+    var name = document.createElement('span');
+    name.className = 'rk-aichat-fname';
+    name.textContent = label;
+    main.appendChild(name);
+    if (sub) {
+      var meta = document.createElement('span');
+      meta.className = 'rk-aichat-fmeta';
+      meta.textContent = sub;
+      main.appendChild(meta);
+    }
+    var chev = document.createElement('span');
+    chev.className = 'rk-aichat-fadd';
+    chev.textContent = 'Open ›';
+    b.appendChild(ic); b.appendChild(main); b.appendChild(chev);
+    b.addEventListener('click', onOpen);
+    return b;
+  }
+  // A virtual-root entry (My Files / Temp) — shows a live count once loaded.
+  function vrootRow(v) {
+    var sub = '';
+    var st = fstate.status[v.key];
+    var d = fstate.data[v.key];
+    if (st === 'ready' && d) sub = d.items.length + (d.items.length === 1 ? ' file' : ' files');
+    else if (st === 'loading') sub = 'Loading…';
+    else if (st === 'auth') sub = 'Sign in to view';
+    return folderRow(v.label, function () { enterRoot(v.key); }, sub);
+  }
+
+  function fileRow(it) {
+    var b = document.createElement('button');
+    b.type = 'button';
+    b.className = 'rk-aichat-frow';
+    var ic = document.createElement('span');
+    ic.className = 'rk-aichat-fic rk-aichat-fic-file';
+    if (it.thumbUrl) {
+      var thumb = document.createElement('img'); thumb.src = it.thumbUrl; thumb.alt = ''; thumb.loading = 'lazy'; ic.appendChild(thumb);
+    } else if (it.viewUrl && it.contentType.indexOf('image/') === 0) {
+      var img = document.createElement('img'); img.src = it.viewUrl; img.alt = ''; img.loading = 'lazy'; ic.appendChild(img);
+    } else if (it.viewUrl && it.contentType.indexOf('video/') === 0) {
+      var vid = document.createElement('video'); vid.src = it.viewUrl; vid.muted = true; vid.playsInline = true; ic.appendChild(vid);
+    } else {
+      ic.textContent = (it.name.split('.').pop() || it.name.slice(0, 1)).slice(0, 3).toUpperCase();
+    }
+    var main = document.createElement('span');
+    main.className = 'rk-aichat-fmain';
+    var name = document.createElement('span');
+    name.className = 'rk-aichat-fname';
+    name.textContent = it.name;
+    var meta = document.createElement('span');
+    meta.className = 'rk-aichat-fmeta';
+    meta.textContent = it.metaText || fmtBytes(it.sizeBytes) || it.contentType || 'file';
+    main.appendChild(name); main.appendChild(meta);
+    var add = document.createElement('span');
+    add.className = 'rk-aichat-fadd';
+    add.textContent = '+ Attach';
+    b.appendChild(ic); b.appendChild(main); b.appendChild(add);
+    b.addEventListener('click', function () { attachFile(it); });
+    return b;
+  }
+
+  function crumb(label, current, onClick) {
+    var b = document.createElement('button');
+    b.type = 'button';
+    b.className = 'rk-aichat-crumb' + (current ? ' is-current' : '');
+    b.textContent = label;
+    b.addEventListener('click', onClick);
+    return b;
+  }
+  function crumbSep() {
+    var s = document.createElement('span');
+    s.className = 'rk-aichat-crumb-sep';
+    s.textContent = '/';
+    return s;
+  }
+  function renderCrumbs() {
+    crumbsEl.innerHTML = '';
+    // "Files" (virtual root) is always the first crumb
+    var atVirtual = !fstate.root;
+    crumbsEl.appendChild(crumb('Files', atVirtual, goVirtualRoot));
+    if (atVirtual) return;
+    if (fstate.status[fstate.root] !== 'ready') return;
+    var cur = normFolder(fstate.path[fstate.root]);
+    crumbsEl.appendChild(crumbSep());
+    crumbsEl.appendChild(crumb(ROOTS[fstate.root].label, !cur, function () { goPath(''); }));
+    var parts = cur.split('/').filter(Boolean);
+    var acc = '';
+    parts.forEach(function (part, idx) {
+      crumbsEl.appendChild(crumbSep());
+      acc = acc ? acc + '/' + part : part;
+      var pth = acc;
+      crumbsEl.appendChild(crumb(part, idx === parts.length - 1, function () { goPath(pth); }));
+    });
+  }
+
+  var rendering = false;
+  function renderFiles() {
+    if (!filesPane) return;
+    // loadRoot() calls renderFiles() synchronously to show a loading state; a
+    // guard stops that re-entrant call from duplicating rows mid-render.
+    if (rendering) return;
+    rendering = true;
+    try { renderFilesInner(); } finally { rendering = false; }
+  }
+  function renderFilesInner() {
+    renderCrumbs();
+    updateDropzone();
+    filesBody.innerHTML = '';
+    // Virtual root: the two sources appear as folders. Kick off a background
+    // load of each so the counts fill in, but render the folders immediately.
+    if (!fstate.root) {
+      VROOTS.forEach(function (v) { if (fstate.status[v.key] === 'idle') loadRoot(v.key, false); });
+      VROOTS.forEach(function (v) { filesBody.appendChild(vrootRow(v)); });
+      return;
+    }
+    var st = fstate.status[fstate.root];
+    if (st === 'idle') { loadRoot(fstate.root, false); return; }
+    if (st === 'loading') { filesBody.appendChild(fstateNode('Loading your files…')); return; }
+    if (st === 'auth') { filesBody.appendChild(fstateNode('Sign in to browse your files.', { href: '/login', linkText: 'Sign in' })); return; }
+    if (st === 'error') { filesBody.appendChild(fstateNode('Couldn’t reach your files.', { retry: true })); return; }
+    var data = fstate.data[fstate.root] || { items: [], folders: [] };
+    var cur = normFolder(fstate.path[fstate.root]);
+    var folders = immediateFolders(data, cur);
+    var here = data.items.filter(function (it) { return normFolder(it.folderPath) === cur; });
+    if (!folders.length && !here.length) {
+      filesBody.appendChild(fstateNode(cur ? 'This folder is empty.' : 'No files in ' + ROOTS[fstate.root].label + ' yet.'));
+      return;
+    }
+    folders.forEach(function (f) { filesBody.appendChild(folderRow(f.name, function () { goPath(f.path); })); });
+    here.forEach(function (it) { filesBody.appendChild(fileRow(it)); });
+  }
+
+  function goPath(p) { uploadMsg = ''; fstate.path[fstate.root] = normFolder(p); renderFiles(); }
+  function goVirtualRoot() { uploadMsg = ''; fstate.root = ''; renderFiles(); }
+  function enterRoot(root) {
+    if (!ROOTS[root]) return;
+    uploadMsg = '';
+    fstate.root = root;
+    fstate.path[root] = '';
+    loadRoot(root, false);
+    renderFiles();
+  }
+
+  // ── upload: drop files or click the button; posts to the current source +
+  // folder's real upload endpoint (attachments/upload or temporary-files/upload).
+  function dropCaption() {
+    if (!fstate.root) return '';
+    var f = normFolder(fstate.path[fstate.root]);
+    return 'Drop files into ' + ROOTS[fstate.root].label + (f ? ' / ' + f : '');
+  }
+  function updateDropzone() {
+    if (!dropEl) return;
+    // Raws are imported/scanned, not plain-uploaded — no dropzone in that root.
+    var show = !!fstate.root && fstate.root !== 'raws' && fstate.status[fstate.root] !== 'auth';
+    dropEl.hidden = !show;
+    if (show && dropText && !uploading) { dropText.textContent = uploadMsg || dropCaption(); }
+  }
+  function uploadFiles(fileList) {
+    if (!fstate.root || fstate.root === 'raws' || uploading) return;
+    var files = [];
+    for (var i = 0; i < fileList.length; i++) files.push(fileList[i]);
+    if (!files.length) return;
+    uploading = true; uploadMsg = '';
+    var root = fstate.root;
+    var folder = normFolder(fstate.path[root]);
+    var url = ROOTS[root].url + '/upload';
+    if (dropEl) dropEl.classList.remove('is-drag');
+    if (uploadBtn) uploadBtn.disabled = true;
+    var total = files.length, failed = 0;
+    if (dropText) dropText.textContent = 'Uploading ' + total + ' file' + (total > 1 ? 's' : '') + '…';
+    function next(idx) {
+      if (idx >= files.length) {
+        uploading = false;
+        if (uploadBtn) uploadBtn.disabled = false;
+        uploadMsg = failed ? (failed + ' of ' + total + ' failed to upload') : '';
+        loadRoot(root, true); // refresh listing; its re-render resets the caption
+        return;
+      }
+      var fd = new FormData();
+      fd.append('file', files[idx]);
+      fd.append('folder_path', folder);
+      fetch(url, { method: 'POST', credentials: 'same-origin', body: fd })
+        .then(function (r) { if (!r.ok) throw new Error('http ' + r.status); })
+        .catch(function () { failed++; })
+        .then(function () { next(idx + 1); });
+    }
+    next(0);
+  }
+  if (uploadBtn) uploadBtn.addEventListener('click', function () { if (uploadInput) uploadInput.click(); });
+  if (uploadInput) uploadInput.addEventListener('change', function () { uploadFiles(uploadInput.files); uploadInput.value = ''; });
+  if (dropEl) {
+    dropEl.addEventListener('dragover', function (e) { e.preventDefault(); dropEl.classList.add('is-drag'); });
+    dropEl.addEventListener('dragleave', function (e) { if (e.target === dropEl) dropEl.classList.remove('is-drag'); });
+    dropEl.addEventListener('drop', function (e) {
+      e.preventDefault(); dropEl.classList.remove('is-drag');
+      if (e.dataTransfer && e.dataTransfer.files) uploadFiles(e.dataTransfer.files);
+    });
+  }
+
+  function attachFile(it) {
+    if (selected.some(function (f) { return f.id === it.id; })) { flashChip(it.id); return; }
+    selected.push(it);
+    renderChips();
+    if (input) input.focus();
+  }
+  function renderChips() {
+    if (!chipsEl) return;
+    chipsEl.innerHTML = '';
+    selected.forEach(function (f) {
+      var chip = document.createElement('span');
+      chip.className = 'rk-aichat-chip';
+      chip.setAttribute('data-id', f.id);
+      var label = document.createElement('span');
+      label.textContent = f.name;
+      var x = document.createElement('button');
+      x.type = 'button';
+      x.setAttribute('aria-label', 'Remove ' + f.name);
+      x.textContent = '×';
+      x.addEventListener('click', function () {
+        selected = selected.filter(function (s) { return s.id !== f.id; });
+        renderChips();
+      });
+      chip.appendChild(label); chip.appendChild(x);
+      chipsEl.appendChild(chip);
+    });
+  }
+  function flashChip(id) {
+    var chip = chipsEl && chipsEl.querySelector('[data-id="' + id + '"]');
+    if (!chip) return;
+    chip.style.transition = 'none';
+    chip.style.transform = 'scale(1.08)';
+    setTimeout(function () { chip.style.transition = 'transform .18s'; chip.style.transform = 'none'; }, 20);
+  }
+  function clearChips() { selected = []; renderChips(); }
+
+  function filesOpen() { return panel.classList.contains('has-files'); }
+  function setFilesOpen(open) {
+    panel.classList.toggle('has-files', open);
+    if (filesToggle) {
+      filesToggle.classList.toggle('is-on', open);
+      filesToggle.setAttribute('aria-pressed', open ? 'true' : 'false');
+    }
+    try { localStorage.setItem('rk-files-open', open ? '1' : '0'); } catch (e) {}
+    if (open) renderFiles();
+    if (!panel.hidden) anchorPanel();
+  }
+  function refreshFilesOnOpen() {
+    if (filesOpen()) {
+      // re-fetch whichever source(s) are in view so counts/listings are fresh
+      if (fstate.root) loadRoot(fstate.root, true);
+      else VROOTS.forEach(function (v) { loadRoot(v.key, true); });
+      renderFiles();
+    }
+  }
+
+  if (filesToggle) {
+    filesToggle.addEventListener('click', function () { setFilesOpen(!filesOpen()); });
+  }
+  // Honor the saved visibility preference (default: open).
+  try {
+    setFilesOpen(localStorage.getItem('rk-files-open') !== '0');
+  } catch (e) { setFilesOpen(true); }
+  renderFiles();
+
+  try { if (sessionStorage.getItem('rk-chat-open') === '1') openPanel(); } catch (e) {}
+})();`;
 /** Wrap page content in a complete standalone reskin HTML document. */
 export function reskinDocument(input) {
     const chrome = input.chrome ?? "full";
     const active = input.activeSlug ?? null;
     const pageCss = input.pageCss ? `\n/* page-scoped */\n${input.pageCss}\n` : "";
-    const script = input.script ? `\n<script>${input.script}</script>` : "";
+    const chromeScript = chrome === "full" ? `\n<script>${RESKIN_CHROME_SCRIPT}</script>` : "";
+    const script = (input.script ? `\n<script>${input.script}</script>` : "") + chromeScript;
     const shell = chrome === "full"
         ? `<div class="rk-app">
 ${renderSidebar(active)}
 <div class="rk-content">
 ${input.body}
 </div>
+${renderChatDock(active)}
 </div>`
         : input.body;
     return `<!doctype html>
@@ -61,8 +650,8 @@ ${input.body}
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>${rkEscape(input.title)}</title>
-<meta name="description" content="${rkEscape(input.description ?? input.title)}">
+<title>${rkEscape(input.title.replace("vidfarm reskin", "vidfarm"))}</title>
+<meta name="description" content="${rkEscape((input.description ?? input.title).replace("vidfarm reskin", "vidfarm"))}">
 ${RESKIN_FONT_LINKS}
 <style>${RESKIN_CSS}${pageCss}</style>
 </head>