@mevdragon/vidfarm-devcli 0.18.0 → 0.19.0

package/dist/src/reskin/document.js

@@ -12,7 +12,7 @@
 //
 // NOTE: the sidebar uses `.rk-sidebar*` class names — deliberately NOT `.rk-side*`
 // (that belongs to the settings page's own inner tab rail) so the two never clash.
-import { RESKIN_CSS, RESKIN_FONT_LINKS, RESKIN_PAGES } from "./theme.js";
+import { RESKIN_CSS, RESKIN_FONT_LINKS } from "./theme.js";
 /** Minimal HTML escaper so reskin modules don't need to import app helpers. */
 export function rkEscape(value) {
     return String(value ?? "")
@@ -22,69 +22,131 @@ export function rkEscape(value) {
         .replace(/"/g, """)
         .replace(/'/g, "'");
 }
+/** Canonical brand name + origin, used for <title>, meta tags, and social cards. */
+export const BRAND_NAME = "VidFarm";
+export const BRAND_ORIGIN = "https://vidfarm.cc";
+export const BRAND_OG_IMAGE = `${BRAND_ORIGIN}/assets/logo-vidfarm.png`;
+/** Normalize any page title to the canonical "VidFarm" branding. Older reskin
+ *  modules pass "vidfarm reskin — X" / "vidfarm — X"; both collapse to "VidFarm — X". */
+export function rkBrandTitle(raw) {
+    return String(raw ?? "")
+        .replace(/vidfarm reskin/gi, BRAND_NAME)
+        .replace(/\bvidfarm\b/gi, BRAND_NAME);
+}
 /** 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: "chat", label: "Create" },
     { slug: "library", label: "Library" },
     { slug: "calendar", label: "Calendar" },
     { slug: "help", label: "Guides" },
     { slug: "settings", label: "Settings" }
 ];
-function renderSidebar(activeSlug) {
+/** Title-case the local-part of an email as a display-name fallback. Kept inline
+ *  so this module stays free of app-side imports (see file header). */
+function rkNameFromEmail(email) {
+    const local = email.trim().toLowerCase().split("@", 1)[0] || email.trim().toLowerCase();
+    const words = local
+        .split(/[^a-z0-9]+/i)
+        .filter(Boolean)
+        .map((w) => w.charAt(0).toUpperCase() + w.slice(1));
+    return words.join(" ") || email.trim();
+}
+/** The subtle name + email block pinned to the sidebar foot. Renders nothing
+ *  when signed out (no email), so the sidebar is unchanged for visitors. */
+function renderSidebarAccount(account) {
+    const email = account?.email?.trim() || "";
+    if (!email)
+        return "";
+    const name = account?.name?.trim() || rkNameFromEmail(email);
+    return `<div class="rk-sidebar-account" title="Signed in as ${rkEscape(email)}">
+    <div class="rk-sidebar-account-name">${rkEscape(name)}</div>
+    <div class="rk-sidebar-account-email">${rkEscape(email)}</div>
+  </div>`;
+}
+function renderSidebar(activeSlug, account) {
     const items = SIDEBAR_NAV.map((p) => {
         const active = p.slug === activeSlug ? " is-active" : "";
         return `<a class="rk-sidebar-item${active}" href="/${p.slug}"${p.slug === activeSlug ? ` aria-current="page"` : ""}>${p.label}</a>`;
     }).join("");
+    // Phone nav: a CSS checkbox-hack hamburger (no JS). At ≤640px the horizontal
+    // strip hides the nav behind the burger and drops it into a vertical dropdown
+    // when the box is checked — the sibling `~` combinator needs the checkbox to
+    // precede both the nav and the account block, hence the order below.
     return `<aside class="rk-sidebar">
-  <a class="rk-sidebar-brand" href="/discover"><span class="rk-brand-mark">V</span>vidfarm</a>
+  <a class="rk-sidebar-brand" href="/discover"><span class="rk-brand-mark">V</span>VidFarm</a>
+  <input type="checkbox" id="rk-navtoggle" class="rk-nav-toggle-cb" hidden>
+  <label for="rk-navtoggle" class="rk-nav-burger" aria-label="Toggle navigation" aria-controls="rk-navtoggle">
+    <svg viewBox="0 0 20 20" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M3 6h14M3 10h14M3 14h14"/></svg>
+  </label>
   <nav class="rk-sidebar-nav" aria-label="Reskin pages">
     ${items}
   </nav>
+  ${renderSidebarAccount(account)}
 </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");
+export function renderChatDock(activeSlug) {
+    // In the /editor left-dock, the brand block is replaced by an obvious
+    // "Back to Library" button — the editor is a focused workspace, so its
+    // primary chrome affordance is getting back out, not re-stating the brand.
+    const head = activeSlug === "editor"
+        ? `<a class="rk-aichat-back" id="rkAichatBack" href="/library" title="Back to your library">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg>
+        <span>Back to Library</span>
+      </a>`
+        : `<span class="rk-brand-mark">V</span>
+      <div class="rk-aichat-head-main">
+        <div class="rk-aichat-title">VidFarm AI</div>
+        <div class="rk-aichat-sub">on your own AI keys</div>
+      </div>`;
     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 class="rk-aichat-files-head">
+      <span class="rk-aichat-files-title">Your files</span>
+      <button class="rk-aichat-tool" id="rkFilesClose" type="button" title="Minimize files" aria-label="Minimize files">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18"/><path d="m16 15-3-3 3-3"/></svg>
+      </button>
     </div>
+    <div class="rk-aichat-files-mount" id="rkAichatFilesMount" data-rk-directory data-mode="attach" data-primary-click="preview"></div>
+  </div>
+  <div class="rk-aichat-history" id="rkAichatHistory" aria-label="Chat history">
+    <div class="rk-aichat-hist-head">Chat history</div>
+    <div class="rk-aichat-hist-body" id="rkAichatHistBody"></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>
+      ${head}
+      <button class="rk-aichat-tool" id="rkHistoryToggle" type="button" title="Chat history" aria-label="Toggle chat history" aria-pressed="false">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 3v5h5"/><path d="M12 7v5l3 2"/></svg>
+      </button>
+      <button class="rk-aichat-tool" id="rkCopyThread" type="button" title="Copy chat ID" aria-label="Copy chat ID">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+      </button>
+      <button class="rk-aichat-tool" id="rkNewChat" type="button" title="New chat" aria-label="Start a new chat">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>
       </button>
       <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 class="rk-aichat-msg is-ai">Hi! I'm the vidfarm assistant. I can take real actions on your account — browse your files, hit vidfarm APIs, kick off renders. Ask me anything, or attach a file from the panel on the left.</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>
+      <textarea class="rk-aichat-field" id="rkAichatInput" rows="3" placeholder="Ask the vidfarm AI…" autocomplete="off"></textarea>
+      <div class="rk-aichat-composer-actions">
+        <button class="rk-aichat-attach" id="rkAichatAttach" type="button" title="Attach a file" aria-label="Attach a file">
+          <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.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg>
+        </button>
+        <button class="rk-btn rk-btn-gold rk-btn-sm" type="submit">Send</button>
+      </div>
     </form>
   </div>
 </aside>`;
@@ -95,15 +157,26 @@ function renderChatDock(activeSlug) {
  *  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 = `(() => {
+export const RESKIN_CHROME_SCRIPT = `(() => {
   var fab = document.getElementById('rkFab');
   var panel = document.getElementById('rkAichat');
   if (!fab || !panel) return;
+  // Editor dock mode: the /editor shell mounts this chat as a permanent, always-
+  // open LEFT column (no floating FAB) — reusing the exact same agentic dock. On
+  // narrow screens it degrades back to the floating FAB.
+  var isEditorDock = !!document.querySelector('[data-rk-editor-dock]');
+  var editorDockWide = isEditorDock && (typeof window.matchMedia !== 'function' || window.matchMedia('(min-width: 1025px)').matches);
+  if (isEditorDock) fab.hidden = true;
   var minBtn = document.getElementById('rkAichatMin');
   var form = document.getElementById('rkAichatForm');
   var input = document.getElementById('rkAichatInput');
   var log = document.getElementById('rkAichatLog');
   var MARGIN = 10;
+  // On the dedicated /chat page the panel's chat column is redundant (the page
+  // IS the chat), so we hide the floating FAB and instead let the composer's
+  // attach button open the panel in FILES-ONLY mode (just the file explorer).
+  var isChatPage = !!document.querySelector('.rk-chat-page');
+  if (isChatPage) fab.hidden = true;
 
   function clamp(v, lo, hi) { return Math.max(lo, Math.min(hi, v)); }
 
@@ -130,18 +203,37 @@ const RESKIN_CHROME_SCRIPT = `(() => {
     document.body.classList.toggle('rk-chat-left', !panel.hidden && !onRight);
   }
 
-  function openPanel() {
+  function openPanel(filesOnly) {
     panel.hidden = false;
+    panel.classList.toggle('is-files-only', !!filesOnly);
     fab.classList.add('is-open');
     fab.setAttribute('aria-expanded', 'true');
-    anchorPanel();
-    try { sessionStorage.setItem('rk-chat-open', '1'); } catch (e) {}
+    if (filesOnly) {
+      // slim left-hand drawer that replaces the sidebar (like the normal dock),
+      // so it never covers the centered chat column's composer / Send button
+      setLeftMode('files');
+      panel.classList.remove('is-right');
+      document.body.classList.add('rk-chat-left');
+    } else {
+      anchorPanel();
+      // On short / narrow screens the left drawer stacks ABOVE the chat and
+      // crushes the log + composer. Start collapsed to the chat column there;
+      // the user can still open Files/History from the header toggles.
+      try {
+        if (window.matchMedia && window.matchMedia('(max-width:700px)').matches) setLeftMode('');
+      } catch (e) {}
+    }
+    try { sessionStorage.setItem('rk-chat-open', filesOnly ? 'files' : '1'); } catch (e) {}
+    if (!filesOnly) loadBoot();
     refreshFilesOnOpen();
-    if (input) input.focus();
+    if (!filesOnly && input) input.focus();
   }
 
   function closePanel() {
+    // Editor dock (wide) is a permanent column — minimize / Escape can't close it.
+    if (editorDockWide) return;
     panel.hidden = true;
+    panel.classList.remove('is-files-only');
     fab.classList.remove('is-open');
     fab.setAttribute('aria-expanded', 'false');
     document.body.classList.remove('rk-chat-left');
@@ -198,371 +290,864 @@ const RESKIN_CHROME_SCRIPT = `(() => {
     el.textContent = text;
     log.appendChild(el);
     log.scrollTop = log.scrollHeight;
+    return el;
   }
-  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);
-  });
+  function logBottom() { if (log) log.scrollTop = log.scrollHeight; }
 
-  // ─── 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
-  };
+  // Remember the opening greeting so "New chat" can restore a fresh thread.
+  var GREETING = (function () {
+    var first = log && log.querySelector('.rk-aichat-msg.is-ai');
+    return first ? first.textContent : "Hi! I'm the vidfarm assistant — ask me anything about your videos, clips, and posts.";
+  })();
+
+  // ─── real agentic chat: wired to the live editor-chat backend ──────────────
+  // Boot (endpoint + api key + brainstorm template) is fetched lazily on first
+  // open from /chat-dock/boot (cookie-authed). Tool calls surface as first-class
+  // actions: every http_request becomes a clickable card that opens a modal with
+  // the exact request + response, exactly like the /editor chat.
+  var BOOT = null, BOOT_STATE = 'idle'; // idle|loading|ready|anon|error
+  var ENDPOINT = '/api/v1/editor-chat', API_KEY = null, TEMPLATE = null, CACHED = null;
+  var THREADS_URL = '/api/v1/editor-chat/threads', TEMPLATE_ID = 'chat-brainstorm';
+  var convo = [];      // [{role,text}] running conversation
+  // Minted up-front so the "Copy chat ID" tool always has something to copy
+  // (even before the first message) and so the id we copy is the SAME one the
+  // first send persists under. Reset to a fresh id on New chat, replaced by the
+  // real id when a saved thread is opened.
+  var threadId = genId('thread');
 
-  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('/');
+  // Cross-page hand-off: /chat (or a future AI-driven page nav) can pass
+  // ?rk_chat=<threadId> to continue that EXACT conversation in this dock. Read it
+  // once, strip it from the URL (so reload / back-button doesn't re-trigger), and
+  // replay the thread as soon as boot is ready (see consumeHandoff, called from
+  // loadBoot's ready path). Also opens the panel below so the jump is seamless.
+  var handoffThread = null;
+  try {
+    var _hq = new URLSearchParams(window.location.search);
+    handoffThread = _hq.get('rk_chat') || null;
+    if (handoffThread) {
+      _hq.delete('rk_chat');
+      var _hqs = _hq.toString();
+      window.history.replaceState(window.history.state, '', window.location.pathname + (_hqs ? '?' + _hqs : '') + window.location.hash);
+    }
+  } catch (e) { handoffThread = null; }
+  // Replay a handed-off thread once the dock is authed + booted. openThread needs
+  // API_KEY (set by loadBoot), so this only fires from the boot-ready path.
+  function consumeHandoff() {
+    if (!handoffThread || BOOT_STATE !== 'ready') return;
+    var id = handoffThread; handoffThread = null;
+    setLeftMode('');   // show the conversation, not the Files/History drawer
+    openThread(id);
   }
-  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 || '')
-    };
+  var busy = false;
+  var pendingAbort = null; // AbortController for the in-flight reply (Stop button)
+
+  // On the /editor dock the chat MUST be scoped to the OPEN composition, not the
+  // generic brainstorm boot — otherwise the agent has no fork id and can't run
+  // video_context / editor_action (it guesses "chat-brainstorm" and gives up).
+  // The editor page already embeds the composition identity in #hf-boot; use it
+  // as the template context (exactly like the SPA chat's body.template) so
+  // thread_template_id is the real template_… id and create_video is dropped in
+  // favor of the edit tools. Set eagerly so the very first send is correct even
+  // before /chat-dock/boot resolves (that fetch still supplies the api key).
+  var EDITOR_TEMPLATE = null;
+  if (isEditorDock) {
+    try {
+      var hfBootEl = document.getElementById('hf-boot');
+      var hfBoot = hfBootEl ? JSON.parse(hfBootEl.textContent || '{}') : null;
+      var editorTplId = hfBoot && (hfBoot.templateId || hfBoot.compositionId);
+      if (editorTplId) {
+        EDITOR_TEMPLATE = {
+          page: 'docs', tracerId: null, tracers: [], defaultRequestTracer: null,
+          templateId: editorTplId,
+          templateSlug: (hfBoot && (hfBoot.slugId || hfBoot.templateId)) || editorTplId,
+          templateTitle: (hfBoot && hfBoot.title) || 'Studio',
+          templateDescription: '', docsRoutes: []
+        };
+        TEMPLATE = EDITOR_TEMPLATE;
+        TEMPLATE_ID = editorTplId;
+      }
+    } catch (e) {}
   }
-  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 genId(p) { return p + '-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8); }
+  function setBusy(v) {
+    busy = v;
+    // While a reply streams, the Send button becomes an interruptive Stop
+    // (stays clickable so the user can abort); it flips back to Send when done.
+    if (form) { var b = form.querySelector('button[type=submit]'); if (b) { b.textContent = v ? 'Stop' : 'Send'; b.classList.toggle('is-stop', v); } }
+    if (newChatBtn) newChatBtn.disabled = v;
   }
-  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 clientContext() {
+    var now = new Date(), local = null, tz = null;
+    try { local = new Intl.DateTimeFormat(undefined, { dateStyle: 'full', timeStyle: 'long' }).format(now); } catch (e) { local = now.toString(); }
+    try { tz = (Intl.DateTimeFormat().resolvedOptions().timeZone) || null; } catch (e) { tz = null; }
+    return { currentDateTime: now.toISOString(), localDateTime: local, timeZone: tz };
   }
-
-  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();
-      })
+  // The live composition snapshot (fork id, layers, DNA) the SPA editor bundle
+  // exposes on window.__vidfarmEditorAction.getSnapshot(). Injected into the
+  // outgoing user turn — verbatim to what the SPA's own chat sends — so the agent
+  // knows which fork to read (video_context) and mutate (editor_action). Only the
+  // /editor dock has this bridge; elsewhere it returns ''.
+  function editorContextBlock() {
+    if (!isEditorDock) return '';
+    var bridge = (typeof window !== 'undefined') ? window.__vidfarmEditorAction : null;
+    if (!bridge || typeof bridge.getSnapshot !== 'function') return '';
+    var snap; try { snap = bridge.getSnapshot(); } catch (e) { snap = null; }
+    if (!snap) return '';
+    try { return '\\n\\n<editor_context>\\n' + JSON.stringify(snap, null, 2) + '\\n</editor_context>'; }
+    catch (e) { return ''; }
+  }
+  function loadBoot() {
+    if (BOOT_STATE === 'ready' || BOOT_STATE === 'loading') return;
+    BOOT_STATE = 'loading';
+    fetch('/chat-dock/boot', { credentials: 'same-origin', headers: { accept: 'application/json' } })
+      .then(function (r) { return r.ok ? r.json() : null; })
       .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();
+        var b = j && j.editorChat;
+        if (!b) { BOOT_STATE = 'anon'; return; }
+        BOOT = b;
+        ENDPOINT = b.apiUrl || ENDPOINT;
+        API_KEY = b.vidfarmApiKey || null;
+        // On the editor dock keep the composition-scoped template from #hf-boot —
+        // the generic brainstorm boot would strand the agent without a fork id.
+        if (EDITOR_TEMPLATE) { TEMPLATE = EDITOR_TEMPLATE; TEMPLATE_ID = EDITOR_TEMPLATE.templateId; }
+        else { TEMPLATE = b.template || null; TEMPLATE_ID = (TEMPLATE && TEMPLATE.templateId) || TEMPLATE_ID; }
+        CACHED = b.cachedContext || null;
+        THREADS_URL = b.threadsUrl || THREADS_URL;
+        BOOT_STATE = 'ready';
+        loadThreads();
+        consumeHandoff();
       })
-      .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);
+      .catch(function () { BOOT_STATE = 'error'; });
+  }
+
+  // ── first-class HTTP action card + request/response modal ──
+  function fmtBody(v) {
+    if (v === null || v === undefined) return '';
+    if (typeof v === 'string') { try { return JSON.stringify(JSON.parse(v), null, 2); } catch (e) { return v; } }
+    try { return JSON.stringify(v, null, 2); } catch (e) { return String(v); }
+  }
+  function copyText(t) {
+    try { if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(t); return; } } catch (e) {}
+    try { var ta = document.createElement('textarea'); ta.value = t; ta.style.position = 'fixed'; ta.style.opacity = '0'; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); } catch (e) {}
+  }
+  var COPY_SVG = '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
+  var CARET_SVG = '<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m7 4 6 6-6 6"/></svg>';
+
+  // Expandable/collapsible JSON tree — a recursive walk of the value with a
+  // per-path collapsed set (re-rendered on toggle). Mirrors the /editor chat's
+  // JsonViewer: indent depth*16+10px, quoted-key + colon, [ … ]/{ … } collapsed
+  // previews, per-line hover copy button.
+  function jsonViewer(value) {
+    var collapsed = {};
+    var wrap = document.createElement('div'); wrap.className = 'rk-aichat-json';
+    var bar = document.createElement('div'); bar.className = 'rk-aichat-json-bar';
+    var expand = document.createElement('button'); expand.type = 'button'; expand.className = 'rk-aichat-json-all'; expand.textContent = 'Collapse all';
+    var copyAll = document.createElement('button'); copyAll.type = 'button'; copyAll.className = 'rk-aichat-json-all'; copyAll.textContent = 'Copy all';
+    bar.appendChild(expand); bar.appendChild(copyAll);
+    var scroll = document.createElement('div'); scroll.className = 'rk-aichat-json-scroll';
+    wrap.appendChild(bar); wrap.appendChild(scroll);
+    function fmt(v) { if (typeof v === 'string') return JSON.stringify(v); if (typeof v === 'number' || typeof v === 'boolean') return String(v); if (v === null) return 'null'; return JSON.stringify(v); }
+    function lineRow(text, depth) {
+      var row = document.createElement('div'); row.className = 'rk-aichat-json-line'; row.style.paddingLeft = (depth * 16 + 10) + 'px';
+      var cp = document.createElement('button'); cp.type = 'button'; cp.className = 'rk-aichat-json-copy'; cp.setAttribute('aria-label', 'Copy line'); cp.innerHTML = COPY_SVG;
+      cp.addEventListener('click', function () { copyText(text); });
+      var sp = document.createElement('span'); sp.className = 'rk-aichat-json-text'; sp.textContent = text;
+      row.appendChild(cp); row.appendChild(sp); return row;
+    }
+    function toggleRow(text, depth, path, open) {
+      var row = document.createElement('div'); row.className = 'rk-aichat-json-line is-toggle'; row.style.paddingLeft = (depth * 16 + 10) + 'px';
+      var t = document.createElement('button'); t.type = 'button'; t.className = 'rk-aichat-json-caret'; t.setAttribute('data-open', open ? 'true' : 'false'); t.innerHTML = CARET_SVG;
+      t.addEventListener('click', function () { if (open) collapsed[path] = true; else delete collapsed[path]; render(); });
+      var sp = document.createElement('span'); sp.className = 'rk-aichat-json-text'; sp.textContent = text;
+      row.appendChild(t); row.appendChild(sp); return row;
+    }
+    function walk(v, depth, prefix, isLast, path) {
+      var comma = isLast ? '' : ',';
+      if (Array.isArray(v)) {
+        if (!v.length) { scroll.appendChild(lineRow(prefix + '[]' + comma, depth)); return; }
+        if (collapsed[path]) { scroll.appendChild(toggleRow(prefix + '[ … ]' + comma, depth, path, false)); return; }
+        scroll.appendChild(toggleRow(prefix + '[', depth, path, true));
+        for (var i = 0; i < v.length; i++) walk(v[i], depth + 1, '', i === v.length - 1, path + '.' + i);
+        scroll.appendChild(lineRow(']' + comma, depth));
+      } else if (v && typeof v === 'object') {
+        var keys = Object.keys(v);
+        if (!keys.length) { scroll.appendChild(lineRow(prefix + '{}' + comma, depth)); return; }
+        if (collapsed[path]) { scroll.appendChild(toggleRow(prefix + '{ … }' + comma, depth, path, false)); return; }
+        scroll.appendChild(toggleRow(prefix + '{', depth, path, true));
+        for (var k = 0; k < keys.length; k++) {
+          var key = keys[k], cp = JSON.stringify(key) + ': ', last = k === keys.length - 1, child = v[key];
+          if (child && typeof child === 'object') walk(child, depth + 1, cp, last, path + '.' + key);
+          else scroll.appendChild(lineRow(cp + fmt(child) + (last ? '' : ','), depth + 1));
+        }
+        scroll.appendChild(lineRow('}' + comma, depth));
+      } else {
+        scroll.appendChild(lineRow(prefix + fmt(v) + comma, depth));
+      }
     }
-    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);
+    function render() { scroll.innerHTML = ''; walk(value, 0, '', true, 'root'); }
+    var allCollapsed = false;
+    function markAll(v, path) {
+      if (Array.isArray(v)) { if (v.length) { collapsed[path] = true; for (var i = 0; i < v.length; i++) markAll(v[i], path + '.' + i); } }
+      else if (v && typeof v === 'object') { var ks = Object.keys(v); if (ks.length) { collapsed[path] = true; for (var k = 0; k < ks.length; k++) markAll(v[ks[k]], path + '.' + ks[k]); } }
     }
+    expand.addEventListener('click', function () {
+      allCollapsed = !allCollapsed;
+      if (allCollapsed) { markAll(value, 'root'); delete collapsed['root']; expand.textContent = 'Expand all'; }
+      else { collapsed = {}; expand.textContent = 'Collapse all'; }
+      render();
+    });
+    copyAll.addEventListener('click', function () { copyText(fmtBody(value)); });
+    render();
     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) {
+  function escapeHtml(s) { return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
+  // Render inline markdown in assistant text: bold, italic, markdown links and
+  // bare absolute URLs → HTML (mirrors the /editor chat's renderInlineMarkdown).
+  // Order matters: **bold** before *italic*; links before bare-URL autolinking
+  // (an href="…" is never preceded by whitespace/'(' so it won't double-link).
+  function linkify(text) {
+    var html = escapeHtml(text);
+    html = html.replace(/\\*\\*([^*]+)\\*\\*/g, '<strong>$1</strong>');
+    html = html.replace(/(^|[^\\w*])\\*([^*\\n]+)\\*/g, '$1<em>$2</em>');
+    html = html.replace(/(^|[^\\w_])_([^_\\n]+)_/g, '$1<em>$2</em>');
+    html = html.replace(/\\[([^\\]]+)\\]\\((https?:\\/\\/[^\\s)]+)\\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+    html = html.replace(/(^|[\\s(])(https?:\\/\\/[^\\s<]+[^<.,:;"')\\]\\s])/g, '$1<a href="$2" target="_blank" rel="noopener noreferrer">$2</a>');
+    return html;
+  }
+  function openHttpModal(ex) {
+    var req = ex.request || {}, res = ex.response || {};
+    var status = typeof res.status === 'number' ? res.status : 0;
+    var isErr = status >= 400 || res.error;
+    var back = document.createElement('div');
+    back.className = 'rk-aichat-modal-back';
+    var modal = document.createElement('div');
+    modal.className = 'rk-aichat-modal';
+    var head = document.createElement('div');
+    head.className = 'rk-aichat-modal-head';
+    head.innerHTML = '<span class="rk-aichat-http-method">' + (req.method || 'GET') + '</span>'
+      + '<span class="rk-aichat-http-url"></span>'
+      + '<span class="rk-aichat-http-status" data-error="' + (isErr ? 'true' : 'false') + '">' + (status || '—') + (res.statusText ? ' ' + res.statusText : '') + '</span>'
+      + '<button type="button" class="rk-aichat-modal-x" aria-label="Close">&times;</button>';
+    head.querySelector('.rk-aichat-http-url').textContent = req.url || req.path || '';
+    var body = document.createElement('div');
+    body.className = 'rk-aichat-modal-body';
+    // A raw string block (URL, error text). Always plain <pre>.
+    function textBlock(label, text) {
+      if (!text) return;
+      var wrap = document.createElement('div'); wrap.className = 'rk-aichat-http-block';
+      var l = document.createElement('div'); l.className = 'rk-aichat-http-blabel'; l.textContent = label;
+      var pre = document.createElement('pre'); pre.className = 'rk-aichat-http-pre'; pre.textContent = text;
+      wrap.appendChild(l); wrap.appendChild(pre); body.appendChild(wrap);
+    }
+    // A body/headers block: collapsible JSON tree when structured, else <pre>.
+    function dataBlock(label, value) {
+      if (value === null || value === undefined || value === '') return;
+      var data = value;
+      if (typeof value === 'string') { try { var p = JSON.parse(value); if (p && typeof p === 'object') data = p; } catch (e) {} }
+      var wrap = document.createElement('div'); wrap.className = 'rk-aichat-http-block';
+      var l = document.createElement('div'); l.className = 'rk-aichat-http-blabel'; l.textContent = label;
+      wrap.appendChild(l);
+      if (data && typeof data === 'object') { wrap.appendChild(jsonViewer(data)); }
+      else { var pre = document.createElement('pre'); pre.className = 'rk-aichat-http-pre'; pre.textContent = (typeof value === 'string') ? value : fmtBody(value); wrap.appendChild(pre); }
+      body.appendChild(wrap);
+    }
+    function hasKeys(o) { return o && typeof o === 'object' && Object.keys(o).length > 0; }
+    if (ex.explanation) { var note = document.createElement('div'); note.className = 'rk-aichat-http-note'; note.textContent = ex.explanation; body.appendChild(note); }
+    textBlock('URL', req.url || req.path || '');
+    if (req.body !== undefined && req.body !== null && req.body !== '') dataBlock('Request', req.body);
+    if (res.error) textBlock('Response', res.error);
+    else dataBlock('Response', (res.body === undefined || res.body === null || res.body === '') ? '(empty)' : res.body);
+    if (hasKeys(res.headers)) dataBlock('Response headers', res.headers);
+    modal.appendChild(head); modal.appendChild(body); back.appendChild(modal);
+    function close() { if (back.parentNode) back.parentNode.removeChild(back); document.removeEventListener('keydown', onKey); }
+    function onKey(e) { if (e.key === 'Escape') { e.stopPropagation(); close(); } }
+    back.addEventListener('click', function (e) { if (e.target === back) close(); });
+    head.querySelector('.rk-aichat-modal-x').addEventListener('click', close);
+    document.addEventListener('keydown', onKey);
+    document.body.appendChild(back);
+  }
+  function httpCard(ex) {
+    var req = ex.request || {}, res = ex.response || {};
+    var status = typeof res.status === 'number' ? res.status : 0;
+    var isErr = status >= 400 || res.error;
     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);
+    b.className = 'rk-aichat-http';
+    var m = document.createElement('span'); m.className = 'rk-aichat-http-method'; m.textContent = req.method || 'GET';
+    var u = document.createElement('span'); u.className = 'rk-aichat-http-url';
+    var url = req.url || req.path || '';
+    u.textContent = url.replace(/^https?:\\/\\/[^/]+/, ''); u.title = url;
+    var s = document.createElement('span'); s.className = 'rk-aichat-http-status';
+    s.setAttribute('data-error', isErr ? 'true' : 'false'); s.textContent = status || '—';
+    b.appendChild(m); b.appendChild(u); b.appendChild(s);
+    b.addEventListener('click', function () { openHttpModal(ex); });
     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);
+
+  // ── file preview: classify a file by content-type + extension ──
+  function fileKind(name, ct) {
+    ct = (ct || '').toLowerCase();
+    var ext = ((name || '').split('.').pop() || '').toLowerCase();
+    if (ct.indexOf('image/') === 0 || /^(png|jpe?g|gif|webp|svg|avif|bmp|heic|ico)$/.test(ext)) return 'image';
+    if (ct.indexOf('video/') === 0 || /^(mp4|mov|webm|m4v|mkv|ogv)$/.test(ext)) return 'video';
+    if (ct.indexOf('audio/') === 0 || /^(mp3|wav|m4a|aac|ogg|oga|flac|opus)$/.test(ext)) return 'audio';
+    if (ct.indexOf('application/pdf') === 0 || ext === 'pdf') return 'pdf';
+    if (ct.indexOf('json') >= 0 || ext === 'json') return 'json';
+    if (ext === 'md' || ext === 'markdown' || ct.indexOf('markdown') >= 0) return 'markdown';
+    if (ct.indexOf('text/') === 0 || /^(txt|csv|tsv|srt|vtt|log|xml|yaml|yml|ini|conf|html?)$/.test(ext)) return 'text';
+    return 'other';
   }
 
-  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();
+  // Compact markdown → HTML for .md previews (headings, lists, quotes, rules,
+  // fenced + inline code, bold/italic/links). Escapes first, then injects tags
+  // (same order as linkify). Backticks are built via char codes to avoid
+  // escaping issues inside this template literal.
+  function renderMarkdown(src) {
+    var BT = String.fromCharCode(96), FENCE = BT + BT + BT;
+    function inline(s) {
+      s = escapeHtml(s);
+      s = s.replace(new RegExp(BT + '([^' + BT + ']+)' + BT, 'g'), '<code>$1</code>');
+      s = s.replace(/\\*\\*([^*]+)\\*\\*/g, '<strong>$1</strong>');
+      s = s.replace(/(^|[^\\w*])\\*([^*\\n]+)\\*/g, '$1<em>$2</em>');
+      s = s.replace(/\\[([^\\]]+)\\]\\((https?:\\/\\/[^\\s)]+)\\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+      s = s.replace(/(^|[\\s(])(https?:\\/\\/[^\\s<]+[^<.,:;"')\\]\\s])/g, '$1<a href="$2" target="_blank" rel="noopener noreferrer">$2</a>');
+      return s;
     }
-    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;
+    var lines = String(src).replace(/\\r\\n?/g, '\\n').split('\\n');
+    var out = [], inCode = false, code = [], listType = null, listItems = [];
+    function flushList() { if (!listType) return; out.push('<' + listType + '>' + listItems.join('') + '</' + listType + '>'); listType = null; listItems = []; }
+    function flushCode() { out.push('<pre class="rk-aichat-preview-code"><code>' + escapeHtml(code.join('\\n')) + '</code></pre>'); code = []; }
+    for (var i = 0; i < lines.length; i++) {
+      var ln = lines[i];
+      if (ln.trim().indexOf(FENCE) === 0) { if (inCode) { flushCode(); inCode = false; } else { flushList(); inCode = true; } continue; }
+      if (inCode) { code.push(ln); continue; }
+      var h = ln.match(/^(#{1,6})\\s+(.*)$/);
+      if (h) { flushList(); var lvl = h[1].length; out.push('<h' + lvl + '>' + inline(h[2]) + '</h' + lvl + '>'); continue; }
+      if (/^\\s*([-*+])\\s+/.test(ln)) { if (listType !== 'ul') { flushList(); listType = 'ul'; } listItems.push('<li>' + inline(ln.replace(/^\\s*[-*+]\\s+/, '')) + '</li>'); continue; }
+      var om = ln.match(/^\\s*\\d+\\.\\s+(.*)$/);
+      if (om) { if (listType !== 'ol') { flushList(); listType = 'ol'; } listItems.push('<li>' + inline(om[1]) + '</li>'); continue; }
+      if (/^\\s*>\\s?/.test(ln)) { flushList(); out.push('<blockquote>' + inline(ln.replace(/^\\s*>\\s?/, '')) + '</blockquote>'); continue; }
+      if (/^\\s*(-{3,}|\\*{3,}|_{3,})\\s*$/.test(ln)) { flushList(); out.push('<hr>'); continue; }
+      if (!ln.trim()) { flushList(); continue; }
+      flushList();
+      out.push('<p>' + inline(ln) + '</p>');
+    }
+    if (inCode) flushCode();
+    flushList();
+    return out.join('');
   }
 
-  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;
+  // ── file preview modal: images (carousel), video, audio, pdf, and text
+  // (json → collapsible tree, md → rendered, txt/csv/srt/vtt → <pre>) ──
+  function openFilePreview(items, index) {
+    items = (items || []).filter(function (f) { return f && f.viewUrl; });
+    if (!items.length) return;
+    var idx = Math.max(0, Math.min(index || 0, items.length - 1));
+
+    var back = document.createElement('div'); back.className = 'rk-aichat-modal-back';
+    var modal = document.createElement('div'); modal.className = 'rk-aichat-modal rk-aichat-preview';
+    var head = document.createElement('div'); head.className = 'rk-aichat-modal-head';
+    var nameEl = document.createElement('span'); nameEl.className = 'rk-aichat-http-url rk-aichat-preview-name';
+    var openLink = document.createElement('a'); openLink.className = 'rk-aichat-preview-open'; openLink.target = '_blank'; openLink.rel = 'noopener noreferrer'; openLink.textContent = 'Open ↗';
+    var xBtn = document.createElement('button'); xBtn.type = 'button'; xBtn.className = 'rk-aichat-modal-x'; xBtn.setAttribute('aria-label', 'Close'); xBtn.innerHTML = '&times;';
+    head.appendChild(nameEl); head.appendChild(openLink); head.appendChild(xBtn);
+
+    var body = document.createElement('div'); body.className = 'rk-aichat-modal-body rk-aichat-preview-body';
+
+    var nav = document.createElement('div'); nav.className = 'rk-aichat-preview-nav';
+    var prev = document.createElement('button'); prev.type = 'button'; prev.className = 'rk-aichat-preview-btn'; prev.innerHTML = '‹ Prev';
+    var counter = document.createElement('span'); counter.className = 'rk-aichat-preview-count';
+    var next = document.createElement('button'); next.type = 'button'; next.className = 'rk-aichat-preview-btn'; next.innerHTML = 'Next ›';
+    nav.appendChild(prev); nav.appendChild(counter); nav.appendChild(next);
+
+    function renderUnknown(container, it, msg) {
+      var wrap = document.createElement('div'); wrap.className = 'rk-aichat-preview-empty';
+      var p = document.createElement('div'); p.textContent = msg || 'No inline preview for this file type.'; wrap.appendChild(p);
+      var a = document.createElement('a'); a.href = it.viewUrl; a.target = '_blank'; a.rel = 'noopener noreferrer'; a.className = 'rk-aichat-preview-dl'; a.textContent = 'Open / download ↗'; wrap.appendChild(a);
+      container.appendChild(wrap);
+    }
+    function renderText(container, it, kind) {
+      var loading = document.createElement('div'); loading.className = 'rk-aichat-preview-loading'; loading.textContent = 'Loading…'; container.appendChild(loading);
+      fetch(it.viewUrl, { credentials: 'same-origin' })
+        .then(function (r) { if (!r.ok) throw new Error('http ' + r.status); return r.text(); })
+        .then(function (txt) {
+          container.innerHTML = '';
+          if (kind === 'json') {
+            var parsed; try { parsed = JSON.parse(txt); } catch (e) { parsed = undefined; }
+            if (parsed && typeof parsed === 'object') { container.appendChild(jsonViewer(parsed)); return; }
+            var pj = document.createElement('pre'); pj.className = 'rk-aichat-http-pre rk-aichat-preview-text'; pj.textContent = txt; container.appendChild(pj); return;
+          }
+          if (kind === 'markdown') { var md = document.createElement('div'); md.className = 'rk-aichat-preview-md'; md.innerHTML = renderMarkdown(txt); container.appendChild(md); return; }
+          var pre = document.createElement('pre'); pre.className = 'rk-aichat-http-pre rk-aichat-preview-text'; pre.textContent = txt; container.appendChild(pre);
+        })
+        .catch(function () { container.innerHTML = ''; renderUnknown(container, it, 'Couldn’t load this file.'); });
+    }
+    function render() {
+      var it = items[idx];
+      nameEl.textContent = it.name || 'file'; nameEl.title = it.name || '';
+      openLink.href = it.viewUrl;
+      body.innerHTML = '';
+      var kind = fileKind(it.name, it.contentType);
+      if (kind === 'image') { var im = document.createElement('img'); im.className = 'rk-aichat-preview-img'; im.src = it.viewUrl; im.alt = it.name || ''; body.appendChild(im); }
+      else if (kind === 'video') { var v = document.createElement('video'); v.className = 'rk-aichat-preview-media'; v.src = it.viewUrl; v.controls = true; v.playsInline = true; body.appendChild(v); }
+      else if (kind === 'audio') { var wrap = document.createElement('div'); wrap.className = 'rk-aichat-preview-audiowrap'; var a = document.createElement('audio'); a.className = 'rk-aichat-preview-audio'; a.src = it.viewUrl; a.controls = true; wrap.appendChild(a); body.appendChild(wrap); }
+      else if (kind === 'pdf') { var f = document.createElement('iframe'); f.className = 'rk-aichat-preview-frame'; f.src = it.viewUrl; body.appendChild(f); }
+      else if (kind === 'json' || kind === 'markdown' || kind === 'text') { renderText(body, it, kind); }
+      else { renderUnknown(body, it); }
+      counter.textContent = (idx + 1) + ' / ' + items.length;
+      prev.disabled = idx <= 0; next.disabled = idx >= items.length - 1;
+      nav.hidden = items.length < 2;
+    }
+    prev.addEventListener('click', function () { if (idx > 0) { idx--; render(); } });
+    next.addEventListener('click', function () { if (idx < items.length - 1) { idx++; render(); } });
+
+    modal.appendChild(head); modal.appendChild(body); modal.appendChild(nav); back.appendChild(modal);
+    function close() { if (back.parentNode) back.parentNode.removeChild(back); document.removeEventListener('keydown', onKey); }
+    function onKey(e) { if (e.key === 'Escape') { e.stopPropagation(); close(); } else if (e.key === 'ArrowLeft') { if (idx > 0) { idx--; render(); } } else if (e.key === 'ArrowRight') { if (idx < items.length - 1) { idx++; render(); } } }
+    back.addEventListener('click', function (e) { if (e.target === back) close(); });
+    xBtn.addEventListener('click', close);
+    document.addEventListener('keydown', onKey);
+    document.body.appendChild(back);
+    render();
   }
-  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); }));
-    });
+
+  // ── assistant turn controller (status → actions → streamed text) ──
+  function appendAssistant() {
+    var turn = document.createElement('div'); turn.className = 'rk-aichat-turn';
+    var actions = document.createElement('div'); actions.className = 'rk-aichat-actions';
+    var status = document.createElement('div'); status.className = 'rk-aichat-status';
+    status.innerHTML = '<span class="rk-aichat-typing"><span></span><span></span><span></span></span>';
+    var textEl = document.createElement('div'); textEl.className = 'rk-aichat-msg is-ai rk-aichat-stream'; textEl.hidden = true;
+    turn.appendChild(actions); turn.appendChild(status); turn.appendChild(textEl);
+    log.appendChild(turn); logBottom();
+    var lastText = '', flowEl = null;
+    return {
+      hideStatus: function () { status.hidden = true; },
+      showText: function () { status.hidden = true; textEl.hidden = false; },
+      setText: function (t) { lastText = t; textEl.textContent = t; },
+      // After streaming completes, re-render the text as markdown (bold/italic/links).
+      renderMd: function () { if (lastText) textEl.innerHTML = linkify(lastText); },
+      addNote: function (name) {
+        var n = document.createElement('div'); n.className = 'rk-aichat-toolnote';
+        n.textContent = 'Running ' + name + '…'; actions.appendChild(n); logBottom();
+        return n;
+      },
+      // Terminal one-line note (kind 'ok' | 'err' | undefined) — e.g. the real
+      // browser-side outcome of an editor_action apply.
+      note: function (text, kind) {
+        var n = document.createElement('div');
+        n.className = 'rk-aichat-toolnote' + (kind === 'err' ? ' is-err' : (kind === 'ok' ? ' is-ok' : ''));
+        n.textContent = text; actions.appendChild(n); logBottom();
+        return n;
+      },
+      addHttp: function (ex) { actions.appendChild(httpCard(ex)); logBottom(); },
+      // create_video pipeline progress (persistent status row, distinct from the
+      // thinking dots which hide once agent text streams).
+      flowStatus: function (s) {
+        if (!flowEl) { flowEl = document.createElement('div'); flowEl.className = 'rk-aichat-flow'; flowEl.innerHTML = '<span class="rk-aichat-typing"><span></span><span></span><span></span></span><span class="rk-aichat-flow-label"></span>'; turn.appendChild(flowEl); }
+        flowEl.hidden = false; flowEl.querySelector('.rk-aichat-flow-label').textContent = s || ''; logBottom();
+      },
+      // Final pipeline message (markdown-linkified, e.g. "Open it in the editor").
+      flowResult: function (md) {
+        if (flowEl) flowEl.hidden = true;
+        var b = document.createElement('div'); b.className = 'rk-aichat-msg is-ai'; b.innerHTML = linkify(md); turn.appendChild(b); logBottom();
+      },
+      fail: function (msg) {
+        status.hidden = true;
+        var er = document.createElement('div'); er.className = 'rk-aichat-err';
+        er.textContent = msg || 'Something went wrong.'; turn.appendChild(er); logBottom();
+      }
+    };
   }
 
-  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)); });
+  // ── SSE reader (mirrors the live editor-chat client) ──
+  function handleEvent(raw, h) {
+    var lines = raw.split('\\n'), dataLine = null;
+    for (var j = 0; j < lines.length; j++) { var t = lines[j].trim(); if (t.indexOf('data:') === 0) { dataLine = t; break; } }
+    if (!dataLine) return;
+    var payload = dataLine.slice(5).trim();
+    if (payload === '[DONE]' || !payload) return;
+    var chunk; try { chunk = JSON.parse(payload); } catch (e) { return; }
+    if (!chunk || typeof chunk !== 'object') return;
+    if (chunk.type === 'text-delta' && typeof chunk.delta === 'string') h.onDelta(chunk.delta);
+    else if (chunk.type === 'tool-call' && typeof chunk.toolName === 'string') h.onToolCall(chunk.toolName, chunk.toolCallId);
+    else if (chunk.type === 'tool-result') h.onToolResult(chunk.toolName, chunk.result, chunk.toolCallId);
+    else if (chunk.type === 'error') h.onError((typeof chunk.errorText === 'string') ? chunk.errorText : ((chunk.error && chunk.error.message) || 'Unable to read assistant response.'));
+  }
+  function readStream(response, h) {
+    if (!response.body || !response.body.getReader) return response.text().then(function (t) { t.split('\\n\\n').forEach(function (ev) { handleEvent(ev, h); }); });
+    var reader = response.body.getReader(), decoder = new TextDecoder(), buffer = '';
+    function pump() {
+      return reader.read().then(function (res) {
+        if (res.done) { if (buffer) handleEvent(buffer, h); return; }
+        buffer += decoder.decode(res.value, { stream: true });
+        var events = buffer.split('\\n\\n');
+        buffer = events.pop() || '';
+        for (var i = 0; i < events.length; i++) handleEvent(events[i], h);
+        return pump();
+      });
+    }
+    return pump();
+  }
+
+  // Turn this turn's attachments into a text line the model can quote back as
+  // REST payload URLs (prompt_attachments / source_image_url / media_url), in
+  // addition to the binary file content parts. Mirrors the /editor React dock
+  // (buildAttachmentTransportText). Double-backslash-n = a browser-side newline
+  // (we live inside a script template literal, so a bare newline escape breaks it).
+  function buildAttachmentUrlText(atts) {
+    if (!atts || !atts.length) return '';
+    var lines = atts.map(function (a) { return '- ' + (a.fileName || 'file') + ' (' + (a.contentType || '') + '): ' + a.viewUrl; });
+    return '\\n\\nAttached file URLs for REST payloads:\\n' + lines.join('\\n') + '\\nUse these exact URLs as prompt_attachments for image generation, source_image_url for image edits, media_url for video slides, or reference attachment URLs when calling template routes.';
+  }
+
+  function sendMessage(text) {
+    if (busy) return;
+    text = (text || '').trim();
+    var picked = (typeof selected !== 'undefined' ? selected : []).slice();
+    // A pasted file may still be uploading to /temp — wait for it rather than
+    // silently dropping the attachment. Flash the in-flight chips as a hint.
+    if (picked.some(function (f) { return f && f.pending; })) {
+      picked.forEach(function (f) { if (f.pending) flashChip(f.id); });
       return;
     }
-    var 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.'));
+    var atts = picked.filter(function (f) { return f && f.viewUrl; }).map(function (f) {
+      return { id: String(f.id), fileName: f.name || 'file', contentType: f.contentType || 'application/octet-stream', viewUrl: f.viewUrl };
+    });
+    if (!text && !atts.length) return;
+    if (BOOT_STATE === 'idle' || BOOT_STATE === 'error') loadBoot();
+
+    var line = text;
+    if (picked.length) { line = (text ? text + '  ' : '') + '(attached: ' + picked.map(function (f) { return f.name; }).join(', ') + ')'; }
+    bubble('is-user', line);
+    convo.push({ role: 'user', text: text || line });
+    if (input) { input.value = ''; if (typeof autosizeInput === 'function') autosizeInput(); }
+    if (typeof clearChips === 'function') clearChips();
+
+    if (BOOT_STATE === 'anon') {
+      var v = appendAssistant(); v.showText();
+      v.setText('Sign in to chat with the vidfarm AI on your own provider keys.');
       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
+
+    var view = appendAssistant();
+    setBusy(true);
+    if (!threadId) threadId = genId('thread');
+    // Attach a fresh <editor_context> to the current (last) user turn only, so the
+    // model sees the composition state without bloating persisted history.
+    var ctxBlock = editorContextBlock();
+    // Attachments (pasted files OR files picked from the directory explorer) must
+    // ride in the model messages as file content parts + a URL text line — the
+    // backend only feeds the model messages[].content, NOT user_message.attachments
+    // (which is persistence-only). Without this the AI never saw attached files.
+    var attUrlText = atts.length ? buildAttachmentUrlText(atts) : '';
+    var outMessages = convo.map(function (m, i) {
+      var isLast = i === convo.length - 1;
+      var isLastUser = isLast && m.role === 'user';
+      var t = m.text;
+      if (isLastUser && attUrlText) t = t + attUrlText;
+      if (ctxBlock && isLastUser) t = t + ctxBlock;
+      var content = [{ type: 'text', text: t }];
+      if (isLastUser && atts.length) {
+        atts.forEach(function (a) { content.push({ type: 'file', data: a.viewUrl, mediaType: a.contentType || 'application/octet-stream' }); });
+      }
+      return { role: m.role, content: content };
+    });
+    var body = {
+      messages: outMessages,
+      thread_id: threadId,
+      thread_template_id: TEMPLATE_ID,
+      thread_title: (text || line).slice(0, 42),
+      thread_tracers: (TEMPLATE && TEMPLATE.tracers) || [],
+      client_context: clientContext(),
+      user_message: { id: genId('user'), role: 'user', text: text || line, attachments: atts },
+      assistant_message: { id: genId('assistant') }
+    };
+    if (TEMPLATE) body.template = TEMPLATE;
+    if (CACHED) body.cached_context = CACHED;
+    var headers = { 'content-type': 'application/json' };
+    if (API_KEY) headers['vidfarm-api-key'] = API_KEY;
+
+    var acc = '', sawText = false, errored = false;
+    var handlers = {
+      onDelta: function (d) { if (!sawText) { sawText = true; view.showText(); } acc += d; view.setText(acc); logBottom(); },
+      onToolCall: function (name) { if (name !== 'http_request' && name !== 'create_video') view.addNote(name); },
+      onToolResult: function (name, result) {
+        if (name === 'create_video') { runCreateVideoFlow(view, result); return; }
+        // editor_action only mutates the composition browser-side. On /editor the
+        // SPA bundle exposes window.__vidfarmEditorAction; apply the tool result
+        // through it and surface the REAL outcome. Without this the dock ignored
+        // editor_action entirely, so the model's edits were pure no-ops even
+        // though its reply claimed success. (Only wired on the editor dock — the
+        // bridge is absent on /discover, /library, etc.)
+        if (name === 'editor_action') { applyEditorActionFromChat(view, result); return; }
+        if (result && result.request && result.response) view.addHttp(result);
+      },
+      onError: function (m) { errored = true; view.fail(m); }
+    };
+
+    var controller = (typeof AbortController !== 'undefined') ? new AbortController() : null;
+    pendingAbort = controller;
+    var req;
+    try { req = fetch(ENDPOINT, { method: 'POST', headers: headers, credentials: 'same-origin', body: JSON.stringify(body), signal: controller ? controller.signal : undefined }); }
+    catch (err) { req = Promise.reject(err); }
+    req.then(function (resp) {
+      if (!resp.ok) return resp.json().catch(function () { return {}; }).then(function (j) { throw new Error((j && j.error) || ('Chat request failed (' + resp.status + ').')); });
+      return readStream(resp, handlers);
+    }).then(function () {
+      pendingAbort = null;
+      view.hideStatus();
+      if (sawText) { convo.push({ role: 'assistant', text: acc }); view.renderMd(); }
+      else if (!errored) { view.showText(); view.setText('Done.'); }
+      setBusy(false);
+      if (input) input.focus();
+      loadThreads();
+    }).catch(function (err) {
+      pendingAbort = null;
+      // User hit Stop mid-reply — keep whatever streamed so far, no error.
+      if (err && (err.name === 'AbortError' || (controller && controller.signal && controller.signal.aborted))) {
+        view.hideStatus();
+        if (sawText) { convo.push({ role: 'assistant', text: acc }); view.renderMd(); }
+        else { view.showText(); view.setText('Stopped.'); }
+        setBusy(false); if (input) input.focus();
         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);
+      var msg = (err && err.message) ? err.message : String(err);
+      if (!API_KEY) msg = msg + '\\n\\nAdd an AI provider key in Settings to chat on your own keys.';
+      view.fail(msg); setBusy(false); if (input) input.focus();
+    });
+  }
+
+  function resetConversation() {
+    convo = []; threadId = genId('thread');
+    if (log) { log.innerHTML = ''; bubble('is-ai', GREETING); }
+    if (typeof clearChips === 'function') clearChips();
+  }
+  function newChat() {
+    resetConversation();
+    setActiveThread(null);
+    if (input) { input.value = ''; if (typeof autosizeInput === 'function') autosizeInput(); input.focus(); }
+  }
+  // NOTE: the New-chat button element (rkNewChat) is resolved later (see the
+  // var block below), so bind its click handler there — binding here would run
+  // against an undefined newChatBtn (var hoisting) and silently never attach.
+  if (form) form.addEventListener('submit', function (e) {
+    e.preventDefault();
+    if (busy) { if (pendingAbort) pendingAbort.abort(); return; }
+    sendMessage(input ? input.value : '');
+  });
+
+  // The composer is now a multi-row textarea: grow with content (capped) and let
+  // Enter send (Shift+Enter inserts a newline, like every modern chat box).
+  function autosizeInput() {
+    if (!input || input.tagName !== 'TEXTAREA') return;
+    input.style.height = 'auto';
+    input.style.height = Math.min(input.scrollHeight, 210) + 'px';
+  }
+  if (input) {
+    input.addEventListener('input', autosizeInput);
+    input.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        if (form && form.requestSubmit) form.requestSubmit();
+        else { if (busy) { if (pendingAbort) pendingAbort.abort(); } else sendMessage(input.value); }
+      }
     });
   }
 
+  // ─── editor_action: apply a composition mutation through the SPA bridge that
+  // the editor bundle exposes on window (__vidfarmEditorAction). Only present on
+  // the /editor dock; elsewhere there is no composition to mutate. ───
+  function applyEditorActionFromChat(view, result) {
+    var label = (result && result.action_type) ? String(result.action_type) : 'editor_action';
+    var bridge = (typeof window !== 'undefined') ? window.__vidfarmEditorAction : null;
+    if (!bridge || typeof bridge.apply !== 'function') {
+      view.note('⚠ Editor not ready — reload the page, then ask again (' + label + ' was not applied).', 'err');
+      return;
+    }
+    var outcome;
+    try { outcome = bridge.apply(result); }
+    catch (e) { outcome = { ok: false, error: (e && e.message) ? e.message : String(e) }; }
+    if (outcome && outcome.ok) {
+      view.note('✓ ' + (outcome.summary || ('Applied ' + label + '.')), 'ok');
+    } else {
+      view.note('⚠ Couldn’t apply ' + label + ((outcome && outcome.error) ? ': ' + outcome.error : '.'), 'err');
+    }
+  }
+
+  // ─── create_video: the browser-side pipeline behind the agent's create_video
+  // tool. The backend tool is a passthrough (returns the intent only); the
+  // frontend runs ingest → decompose → fork and posts a clickable "Open in the
+  // editor" link. Ported 1:1 from the /editor chat's runCreateVideoFlow. ───
+  function ivHeaders(json) { var h = { accept: 'application/json' }; if (json) h['content-type'] = 'application/json'; if (API_KEY) h['vidfarm-api-key'] = API_KEY; return h; }
+  function ivSleep(ms) { return new Promise(function (r) { setTimeout(r, ms); }); }
+  function ivJson(res) { return res.text().then(function (t) { try { return t ? JSON.parse(t) : null; } catch (e) { return null; } }); }
+  async function runCreateVideoFlow(view, intentRaw) {
+    var intent = intentRaw || {};
+    if (!API_KEY) { view.flowResult('⚠️ You need to be logged in to create a video.'); return; }
+    var origin = window.location.origin;
+
+    function pollInspirationReady(id) {
+      var deadline = Date.now() + 5 * 60 * 1000;
+      function step() {
+        return fetch(origin + '/api/v1/videos/' + encodeURIComponent(id), { headers: ivHeaders(false) }).then(ivJson).then(function (j) {
+          var st = String((j && j.status) || '');
+          if (st === 'ready') return j;
+          if (st === 'failed') throw new Error('source video download failed' + ((j && j.error) ? ': ' + j.error : '') + '.');
+          if (Date.now() > deadline) throw new Error('source video download timed out.');
+          return ivSleep(5000).then(step);
+        });
+      }
+      return step();
+    }
+    function jobMediaUrl(job) {
+      function s(v) { return (typeof v === 'string' && v.trim()) ? v.trim() : null; }
+      var result = (job && job.result && typeof job.result === 'object') ? job.result : {};
+      var out = (result.output && typeof result.output === 'object') ? result.output : result;
+      var direct = s(out.primary_file_url) || s(out.video && out.video.file_url) || s(out.image && out.image.file_url) || s(out.render && out.render.output_url);
+      if (direct) return direct;
+      if (out.files && out.files.length) { for (var i = 0; i < out.files.length; i++) { var f = out.files[i]; var u = s(typeof f === 'string' ? f : (f && (f.file_url || f.url))); if (u) return u; } }
+      if (job && job.artifacts && job.artifacts.length) { for (var k = 0; k < job.artifacts.length; k++) { var u2 = s(job.artifacts[k] && job.artifacts[k].public_url); if (u2) return u2; } }
+      return null;
+    }
+    function pollJobMedia(jobId) {
+      var deadline = Date.now() + 8 * 60 * 1000;
+      function step() {
+        return ivSleep(5000).then(function () {
+          return fetch(origin + '/api/v1/user/me/jobs/' + encodeURIComponent(jobId), { headers: ivHeaders(false) }).then(ivJson).then(function (j) {
+            var st = String((j && j.status) || '');
+            var url = jobMediaUrl(j);
+            if (url) return url;
+            if (st === 'failed' || st === 'cancelled') throw new Error('generation ' + st + '.');
+            if (Date.now() > deadline) throw new Error('generation timed out.');
+            return step();
+          });
+        });
+      }
+      return step();
+    }
+    async function ingestGeneratedVideo(mediaUrl, title) {
+      var blob = await (await fetch(mediaUrl)).blob();
+      var presignRes = await fetch(origin + '/discover/templates/upload/presign', { method: 'POST', headers: ivHeaders(true), body: JSON.stringify({ file_name: 'generated.mp4', content_type: 'video/mp4', size_bytes: blob.size }) });
+      var presign = await ivJson(presignRes);
+      if (!presignRes.ok) throw new Error((presign && presign.error) || ('upload presign failed (' + presignRes.status + ')'));
+      var storageKey = presign && presign.storage_key;
+      var uploadedName = (presign && presign.file_name) || 'generated.mp4';
+      if (presign && presign.transport === 'presigned' && presign.upload && presign.upload.url) {
+        var put = await fetch(presign.upload.url, { method: (presign.upload.method || 'PUT'), headers: presign.upload.headers || {}, body: blob });
+        if (!put.ok) throw new Error('upload failed (' + put.status + ')');
+      } else {
+        var form = new FormData(); form.append('file', blob, 'generated.mp4');
+        var up = await fetch(origin + ((presign && presign.upload && presign.upload.url) || '/discover/templates/upload'), { method: 'POST', headers: ivHeaders(false), body: form });
+        var upJson = await ivJson(up);
+        if (!up.ok || !upJson || !upJson.storage_key) throw new Error((upJson && upJson.error) || ('upload failed (' + up.status + ')'));
+        storageKey = upJson.storage_key; uploadedName = upJson.file_name || 'generated.mp4';
+      }
+      if (!storageKey) throw new Error('upload did not return a storage key.');
+      var addRes = await fetch(origin + '/discover/templates', { method: 'POST', headers: ivHeaders(true), body: JSON.stringify({ upload: { storage_key: storageKey, file_name: uploadedName }, title: title, origin: 'raw' }) });
+      var add = await ivJson(addRes);
+      if (!addRes.ok) throw new Error((add && add.error) || ('ingest failed (' + addRes.status + ')'));
+      return add;
+    }
+
+    try {
+      var mode = intent.mode === 'replicate' ? 'replicate' : (intent.mode === 'generate' ? 'generate' : null);
+      var inspiration, userPrompt;
+      if (mode === 'replicate') {
+        var sourceUrl = String(intent.source_url || '').trim();
+        if (!/^https?:\\/\\//i.test(sourceUrl)) { view.flowResult('⚠️ I need a video URL (TikTok/YouTube/Instagram/X) to replicate.'); return; }
+        userPrompt = String(intent.instructions || '').trim() || null;
+        view.flowStatus('Fetching the source video…');
+        var addRes = await fetch(origin + '/discover/templates', { method: 'POST', headers: ivHeaders(true), body: JSON.stringify({ source_url: sourceUrl }) });
+        var add = await ivJson(addRes);
+        if (!addRes.ok) throw new Error((add && add.error) || ("couldn't fetch that URL (" + addRes.status + ')'));
+        inspiration = (add && add.status === 'ready') ? add : await pollInspirationReady(add && add.inspiration_id);
+      } else if (mode === 'generate') {
+        var prompt = String(intent.prompt || '').trim();
+        if (!prompt) { view.flowResult("⚠️ Tell me what the video should be about and I'll create it."); return; }
+        userPrompt = prompt;
+        view.flowStatus('Generating your video… (this can take a couple of minutes)');
+        var genRes = await fetch(origin + '/api/v1/primitives/videos/generate', { method: 'POST', headers: ivHeaders(true), body: JSON.stringify({ tracer: 'chat-create-' + Date.now().toString(36), payload: { prompt: prompt } }) });
+        var gen = await ivJson(genRes);
+        if (!genRes.ok) throw new Error((gen && gen.error) || ("couldn't start generation (" + genRes.status + ')'));
+        var mediaUrl = await pollJobMedia(gen && gen.job_id);
+        view.flowStatus('Building an editable template from the generated video…');
+        var add2 = await ingestGeneratedVideo(mediaUrl, prompt.slice(0, 80));
+        inspiration = (add2 && add2.status === 'ready') ? add2 : await pollInspirationReady(add2 && add2.inspiration_id);
+      } else {
+        view.flowResult("⚠️ I couldn't tell whether to generate a new video or replicate a URL — try rephrasing.");
+        return;
+      }
+      var templateId = inspiration && inspiration.template_id;
+      var inspirationId = inspiration && inspiration.inspiration_id;
+      if (!templateId || !inspirationId) throw new Error("the template wasn't created from the video.");
+      view.flowStatus(mode === 'replicate' ? 'Recreating the scenes… (about a minute)' : 'Analyzing into an editable timeline…');
+      var decRes = await fetch(origin + '/api/v1/inspirations/' + encodeURIComponent(inspirationId) + '/decompose', { method: 'POST', headers: ivHeaders(true), body: JSON.stringify({ user_prompt: userPrompt }) });
+      if (!decRes.ok) { var dec = await ivJson(decRes); throw new Error((dec && dec.error) || ('scene analysis failed (' + decRes.status + ')')); }
+      view.flowStatus('Finalizing your editable copy…');
+      var forkRes = await fetch(origin + '/api/v1/compositions', { method: 'POST', headers: ivHeaders(true), body: JSON.stringify({ template_id: templateId }) });
+      var fork = await ivJson(forkRes);
+      if (!forkRes.ok) throw new Error((fork && fork.error) || ("couldn't create an editable copy (" + forkRes.status + ')'));
+      var forkId = fork && fork.fork_id;
+      var editorUrl = origin + '/editor/' + encodeURIComponent(templateId) + (forkId ? '/fork/' + encodeURIComponent(forkId) : '');
+      view.flowResult('✅ Your video is ready — [Open it in the editor](' + editorUrl + ').');
+    } catch (error) {
+      view.flowResult('⚠️ I couldn’t finish creating the video: ' + ((error && error.message) ? error.message : String(error)));
+    }
+  }
+
+  // ─── Files drawer ───
+  // Directory browsing lives in the reusable component (src/frontend/file-directory.ts),
+  // auto-mounted into #rkAichatFilesMount by /assets/file-directory-app.js. This
+  // inline script only owns the chat-side glue: the attach chips + preview modal.
+  // We expose those to the component as host hooks BEFORE the deferred module runs
+  // (this classic <script> executes during parse, ahead of the module).
+  var chipsEl = document.getElementById('rkAichatChips');
+  var filesToggle = document.getElementById('rkFilesToggle');
+  var historyToggle = document.getElementById('rkHistoryToggle');
+  var newChatBtn = document.getElementById('rkNewChat');
+  if (newChatBtn) newChatBtn.addEventListener('click', function () { if (!busy) newChat(); });
+  // Copy the current chat thread id (handy for support / linking a conversation).
+  // threadId is minted up-front, so this always has a real id to copy.
+  var copyThreadBtn = document.getElementById('rkCopyThread');
+  if (copyThreadBtn) copyThreadBtn.addEventListener('click', function () {
+    var prevTitle = copyThreadBtn.title;
+    copyText(String(threadId));
+    copyThreadBtn.title = 'Copied chat ID';
+    copyThreadBtn.classList.add('is-on');
+    setTimeout(function () { copyThreadBtn.title = prevTitle; copyThreadBtn.classList.remove('is-on'); }, 1400);
+  });
+  var histBody = document.getElementById('rkAichatHistBody');
+  var selected = [];
+  window.__rkDirectoryHost = {
+    onAttach: function (items) { (items || []).forEach(function (it) { attachFile(it); }); },
+    onPreview: function (items, i) { openFilePreview(items || [], i || 0); }
+  };
+  function refreshFiles() { if (window.__rkDirectoryInstance) window.__rkDirectoryInstance.refresh(); }
+
+  // Editor dock "Back to Library": leave the editor cleanly — clear the persisted
+  // open-state so the destination page loads with the chat panel closed and on a
+  // fresh chat, then navigate. (Real anchor href="/library" is the fallback.)
+  var backBtn = document.getElementById('rkAichatBack');
+  if (backBtn) backBtn.addEventListener('click', function (e) {
+    try { sessionStorage.removeItem('rk-chat-open'); } catch (err) {}
+    e.preventDefault();
+    window.location.assign('/library');
+  });
+
   function attachFile(it) {
+    // Files-only drawer (opened from the /chat page) has no chat composer of its
+    // own — hand the picked file to the /chat page's composer via a DOM event.
+    if (panel.classList.contains('is-files-only')) {
+      try {
+        document.dispatchEvent(new CustomEvent('rk-chat-attach-file', { detail: {
+          id: String(it.id), name: it.name || 'file',
+          contentType: it.contentType || 'application/octet-stream', viewUrl: it.viewUrl || ''
+        } }));
+      } catch (e) {}
+      return;
+    }
     if (selected.some(function (f) { return f.id === it.id; })) { flashChip(it.id); return; }
     selected.push(it);
     renderChips();
@@ -571,12 +1156,17 @@ const RESKIN_CHROME_SCRIPT = `(() => {
   function renderChips() {
     if (!chipsEl) return;
     chipsEl.innerHTML = '';
-    selected.forEach(function (f) {
+    selected.forEach(function (f, i) {
       var chip = document.createElement('span');
-      chip.className = 'rk-aichat-chip';
+      chip.className = 'rk-aichat-chip' + (f.pending ? ' is-pending' : '');
       chip.setAttribute('data-id', f.id);
-      var label = document.createElement('span');
+      if (f.pending) { var sp = document.createElement('span'); sp.className = 'rk-aichat-chip-spin'; sp.setAttribute('aria-hidden', 'true'); chip.appendChild(sp); }
+      var label = document.createElement('button');
+      label.type = 'button';
+      label.className = 'rk-aichat-chip-label';
+      label.title = f.pending ? 'Uploading ' + f.name + '…' : 'Preview ' + f.name;
       label.textContent = f.name;
+      if (f.viewUrl && !f.pending) label.addEventListener('click', function () { openFilePreview(selected.filter(function (s) { return !s.pending; }), selected.filter(function (s) { return !s.pending; }).indexOf(f)); });
       var x = document.createElement('button');
       x.type = 'button';
       x.setAttribute('aria-label', 'Remove ' + f.name);
@@ -598,36 +1188,347 @@ const RESKIN_CHROME_SCRIPT = `(() => {
   }
   function clearChips() { selected = []; renderChips(); }
 
-  function filesOpen() { return panel.classList.contains('has-files'); }
-  function setFilesOpen(open) {
-    panel.classList.toggle('has-files', open);
+  // ─── left drawer mode: 'files' | 'history' | '' (closed) ───────────────────
+  // Files and Chat history share the one left slot, so only one shows at a time.
+  function leftMode() {
+    if (panel.classList.contains('has-history')) return 'history';
+    if (panel.classList.contains('has-files')) return 'files';
+    return '';
+  }
+  function filesOpen() { return leftMode() === 'files'; }
+  function setLeftMode(mode) {
+    panel.classList.toggle('has-files', mode === 'files');
+    panel.classList.toggle('has-history', mode === 'history');
     if (filesToggle) {
-      filesToggle.classList.toggle('is-on', open);
-      filesToggle.setAttribute('aria-pressed', open ? 'true' : 'false');
+      filesToggle.classList.toggle('is-on', mode === 'files');
+      filesToggle.setAttribute('aria-pressed', mode === 'files' ? 'true' : 'false');
     }
-    try { localStorage.setItem('rk-files-open', open ? '1' : '0'); } catch (e) {}
-    if (open) renderFiles();
+    if (historyToggle) {
+      historyToggle.classList.toggle('is-on', mode === 'history');
+      historyToggle.setAttribute('aria-pressed', mode === 'history' ? 'true' : 'false');
+    }
+    var caBtn = document.getElementById('rkAichatAttach');
+    if (caBtn) {
+      caBtn.classList.toggle('is-on', mode === 'files');
+      caBtn.setAttribute('aria-pressed', mode === 'files' ? 'true' : 'false');
+    }
+    try { localStorage.setItem('rk-left-mode', mode); } catch (e) {}
+    if (mode === 'files') refreshFiles();
+    if (mode === 'history') loadThreads();
     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();
-    }
+    // Re-fetch the current folder so listings are fresh when the drawer opens.
+    if (filesOpen()) refreshFiles();
+  }
+
+  // ─── Chat history — REAL editor-chat threads (past conversations) ──────────
+  var threads = [], threadsState = 'idle', loadingThread = false;
+  function authHeaders() { var h = { accept: 'application/json' }; if (API_KEY) h['vidfarm-api-key'] = API_KEY; return h; }
+  function relTime(iso) {
+    if (!iso) return '';
+    var t = Date.parse(iso); if (isNaN(t)) return '';
+    var s = Math.max(0, (Date.now() - t) / 1000);
+    if (s < 60) return 'just now';
+    if (s < 3600) return Math.floor(s / 60) + 'm ago';
+    if (s < 86400) return Math.floor(s / 3600) + 'h ago';
+    if (s < 604800) return Math.floor(s / 86400) + 'd ago';
+    try { return new Date(t).toLocaleDateString([], { month: 'short', day: 'numeric' }); } catch (e) { return ''; }
+  }
+  function histNote(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 b = document.createElement('button'); b.type = 'button'; b.textContent = 'Try again'; b.addEventListener('click', function () { loadThreads(); }); wrap.appendChild(b); }
+    return wrap;
+  }
+  function setActiveThread(id) {
+    threadId = id;
+    if (!histBody) return;
+    var rows = histBody.querySelectorAll('.rk-aichat-frow');
+    for (var i = 0; i < rows.length; i++) rows[i].classList.toggle('is-active', rows[i].getAttribute('data-id') === id);
+  }
+  function threadRow(t) {
+    var b = document.createElement('button');
+    b.type = 'button';
+    b.className = 'rk-aichat-frow' + (t.id === threadId ? ' is-active' : '');
+    b.setAttribute('data-id', t.id);
+    var ic = document.createElement('span');
+    ic.className = 'rk-aichat-fic rk-aichat-fic-file';
+    ic.innerHTML = '<svg viewBox="0 0 24 24" width="16" height="16" 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>';
+    var main = document.createElement('span'); main.className = 'rk-aichat-fmain';
+    var name = document.createElement('span'); name.className = 'rk-aichat-fname'; name.textContent = t.title || 'Untitled chat';
+    var count = (typeof t.messageCount === 'number') ? t.messageCount : 0;
+    var when = relTime(t.lastMessageAt || t.updatedAt);
+    var meta = document.createElement('span'); meta.className = 'rk-aichat-fmeta';
+    meta.textContent = (count ? count + ' message' + (count === 1 ? '' : 's') : '') + ((count && when) ? ' · ' : '') + (when || '');
+    main.appendChild(name); main.appendChild(meta);
+    var del = document.createElement('button');
+    del.type = 'button'; del.className = 'rk-aichat-fadd'; del.setAttribute('aria-label', 'Delete chat'); del.textContent = '×';
+    del.addEventListener('click', function (ev) { ev.stopPropagation(); deleteThread(t.id, b); });
+    b.appendChild(ic); b.appendChild(main); b.appendChild(del);
+    b.addEventListener('click', function () { openThread(t.id); });
+    return b;
+  }
+  function renderHistory() {
+    if (!histBody) return;
+    histBody.innerHTML = '';
+    if (BOOT_STATE === 'anon') { histBody.appendChild(histNote('Sign in to sync your saved chats.', { href: '/login', linkText: 'Sign in' })); return; }
+    if (threadsState === 'loading' && !threads.length) { histBody.appendChild(histNote('Loading your chats…')); return; }
+    if (threadsState === 'auth') { histBody.appendChild(histNote('Sign in to sync your saved chats.', { href: '/login', linkText: 'Sign in' })); return; }
+    if (threadsState === 'error') { histBody.appendChild(histNote('Couldn’t load your chats.', { retry: true })); return; }
+    if (!threads.length) { histBody.appendChild(histNote('No conversations yet. Start one below — it saves automatically.')); return; }
+    for (var i = 0; i < threads.length; i++) histBody.appendChild(threadRow(threads[i]));
+  }
+  function loadThreads() {
+    if (!histBody) return;
+    if (BOOT_STATE === 'anon') { renderHistory(); return; }
+    if (BOOT_STATE !== 'ready') { loadBoot(); return; } // loadBoot() calls back into loadThreads() when ready
+    threadsState = 'loading'; renderHistory();
+    var url = THREADS_URL + '?template_id=' + encodeURIComponent(TEMPLATE_ID) + '&limit=30&include_messages=false';
+    fetch(url, { headers: authHeaders(), credentials: 'same-origin' })
+      .then(function (r) {
+        if (r.status === 401 || r.status === 403) { threadsState = 'auth'; return null; }
+        if (!r.ok) throw new Error('http ' + r.status);
+        return r.json();
+      })
+      .then(function (j) {
+        if (!j) { renderHistory(); return; }
+        threads = (j && j.threads) || []; threadsState = 'ready'; renderHistory();
+      })
+      .catch(function () { threadsState = 'error'; renderHistory(); });
+  }
+  function openThread(id) {
+    if (busy || loadingThread) return;
+    loadingThread = true;
+    fetch(THREADS_URL + '/' + encodeURIComponent(id), { headers: authHeaders(), credentials: 'same-origin' })
+      .then(function (r) { if (!r.ok) throw new Error('http ' + r.status); return r.json(); })
+      .then(function (j) {
+        var t = j && j.thread; if (!t) throw new Error('missing thread');
+        convo = []; if (log) log.innerHTML = '';
+        var msgs = t.messages || [];
+        for (var i = 0; i < msgs.length; i++) {
+          var m = msgs[i], role = (m.role === 'assistant') ? 'assistant' : 'user', txt = m.text || '';
+          convo.push({ role: role, text: txt });
+          if (role === 'user') { bubble('is-user', txt); }
+          else {
+            var v = appendAssistant();
+            var ex = m.httpExchanges || [];
+            for (var k = 0; k < ex.length; k++) { if (ex[k] && ex[k].request && ex[k].response) v.addHttp(ex[k]); }
+            v.showText(); v.setText(txt); v.hideStatus(); v.renderMd();
+          }
+        }
+        setActiveThread(id);
+        loadingThread = false;
+        logBottom();
+        if (input) input.focus();
+      })
+      .catch(function () { loadingThread = false; });
+  }
+  function deleteThread(id, row) {
+    if (!API_KEY) return;
+    fetch(THREADS_URL + '/' + encodeURIComponent(id), { method: 'DELETE', headers: authHeaders(), credentials: 'same-origin' })
+      .then(function (r) {
+        if (!r.ok && r.status !== 404) throw new Error('http ' + r.status);
+        threads = threads.filter(function (t) { return t.id !== id; });
+        if (id === threadId) resetConversation();
+        renderHistory();
+      })
+      .catch(function () {});
   }
 
   if (filesToggle) {
-    filesToggle.addEventListener('click', function () { setFilesOpen(!filesOpen()); });
+    filesToggle.addEventListener('click', function () { setLeftMode(leftMode() === 'files' ? '' : 'files'); });
   }
-  // Honor the saved visibility preference (default: open).
+  // Composer paperclip — opens the folder directory nav (Files drawer) so the
+  // user can browse + attach a file, mirroring the header Files toggle. Works
+  // in both the editor dock and the floating pop-panel.
+  var composerAttach = document.getElementById('rkAichatAttach');
+  if (composerAttach) {
+    composerAttach.addEventListener('click', function () { setLeftMode(leftMode() === 'files' ? '' : 'files'); });
+  }
+
+  // ─── paste-to-attach: drop a copied image/file straight into the composer ───
+  // Clipboard files (screenshot, copied image, "Copy image") get auto-uploaded
+  // to the user's /temp folder, then attached as a chip just like a picked file.
+  // We show a spinner chip immediately and swap it for the real file on success.
+  function extNameFor(blob, idx) {
+    var ct = (blob && blob.type) || '';
+    var base = ct.indexOf('image/') === 0 ? 'pasted-image' : ct.indexOf('video/') === 0 ? 'pasted-video' : ct.indexOf('audio/') === 0 ? 'pasted-audio' : 'pasted-file';
+    var ext = ct && ct.indexOf('/') > -1 ? ct.split('/')[1].split('+')[0].split(';')[0] : 'bin';
+    if (ext === 'jpeg') ext = 'jpg';
+    var stamp = Date.now().toString(36) + (idx ? '-' + idx : '');
+    return base + '-' + stamp + '.' + ext;
+  }
+  function uploadPastedBlob(blob, fileName, pendingId) {
+    var fd = new FormData();
+    fd.append('file', blob, fileName);
+    var headers = {}; if (API_KEY) headers['vidfarm-api-key'] = API_KEY;
+    fetch(window.location.origin + '/api/v1/user/me/temporary-files/upload', {
+      method: 'POST', credentials: 'same-origin', headers: headers, body: fd
+    }).then(function (r) { return r.json().catch(function () { return {}; }).then(function (j) { if (!r.ok) throw new Error((j && j.error) || ('upload failed (' + r.status + ')')); return j; }); })
+      .then(function (j) {
+        var f = j && j.file;
+        if (!f || !f.viewUrl) throw new Error('upload returned no file');
+        var idx = selected.map(function (s) { return s.id; }).indexOf(pendingId);
+        var item = { id: String(f.id), name: f.fileName || fileName, contentType: f.contentType || (blob && blob.type) || 'application/octet-stream', viewUrl: f.viewUrl };
+        if (idx > -1) selected[idx] = item; else selected.push(item);
+        renderChips();
+      })
+      .catch(function () {
+        // A failed paste-upload just drops its chip — keep the chat log clean.
+        selected = selected.filter(function (s) { return s.id !== pendingId; });
+        renderChips();
+      });
+  }
+  function handlePasteFiles(e) {
+    // Files-only drawer (on /chat) has no composer of its own — let that page's
+    // composer own paste; here we only handle the dock's real chat composer.
+    if (panel.classList.contains('is-files-only')) return;
+    var dt = e.clipboardData || (window.clipboardData);
+    if (!dt) return;
+    var blobs = [];
+    var items = dt.items;
+    if (items && items.length) {
+      for (var i = 0; i < items.length; i++) {
+        if (items[i] && items[i].kind === 'file') { var b = items[i].getAsFile(); if (b) blobs.push(b); }
+      }
+    }
+    if (!blobs.length && dt.files && dt.files.length) { for (var k = 0; k < dt.files.length; k++) blobs.push(dt.files[k]); }
+    if (!blobs.length) return; // plain-text paste → let the textarea handle it
+    e.preventDefault();
+    blobs.forEach(function (blob, idx) {
+      var name = (blob && blob.name) || extNameFor(blob, idx);
+      var pendingId = 'paste-' + Date.now().toString(36) + '-' + idx + '-' + Math.random().toString(36).slice(2, 6);
+      selected.push({ id: pendingId, name: name, contentType: (blob && blob.type) || 'application/octet-stream', pending: true });
+      renderChips();
+      uploadPastedBlob(blob, name, pendingId);
+    });
+    if (input) input.focus();
+  }
+  if (input) input.addEventListener('paste', handlePasteFiles);
+  if (historyToggle) {
+    historyToggle.addEventListener('click', function () { setLeftMode(leftMode() === 'history' ? '' : 'history'); });
+  }
+  // /chat composer's attach button ⇄ files-only drawer (open ↔ close toggle).
+  var chatAttachBtn = document.getElementById('rk-chat-attach');
+  if (chatAttachBtn) {
+    chatAttachBtn.addEventListener('click', function () {
+      if (!panel.hidden && panel.classList.contains('is-files-only')) closePanel();
+      else openPanel(true);
+    });
+  }
+  var filesCloseBtn = document.getElementById('rkFilesClose');
+  if (filesCloseBtn) filesCloseBtn.addEventListener('click', function () {
+    // In the /chat files-only drawer this is the only close affordance → shut the
+    // panel. In the full pop-panel it just collapses the Files drawer back to chat.
+    if (panel.classList.contains('is-files-only')) closePanel();
+    else setLeftMode('');
+  });
+  // Honor the saved drawer mode (default: files open).
   try {
-    setFilesOpen(localStorage.getItem('rk-files-open') !== '0');
-  } catch (e) { setFilesOpen(true); }
-  renderFiles();
+    var savedMode = localStorage.getItem('rk-left-mode');
+    setLeftMode(savedMode === null ? 'files' : savedMode);
+  } catch (e) { setLeftMode('files'); }
+  renderHistory();
 
-  try { if (sessionStorage.getItem('rk-chat-open') === '1') openPanel(); } catch (e) {}
+  try {
+    var reopen = sessionStorage.getItem('rk-chat-open');
+    if (isEditorDock) { /* handled below */ }
+    else if (isChatPage) { if (reopen === 'files') openPanel(true); }
+    else if (reopen === '1') openPanel();
+  } catch (e) {}
+
+  // A handed-off thread (?rk_chat=…) always opens the dock so the conversation
+  // reappears immediately (openPanel → loadBoot → consumeHandoff replays it).
+  // The wide editor dock force-opens itself just below, so skip it here.
+  if (handoffThread && !isChatPage && !editorDockWide) openPanel();
+
+  // Editor dock: force the panel open and pinned as a left column. Reuses the
+  // normal openPanel path so the live /chat-dock/boot fetch + threads + files
+  // all wire up exactly as on the reskin pages.
+  if (editorDockWide) {
+    panel.classList.add('rk-aichat--editor');
+    if (minBtn) minBtn.hidden = true;
+    openPanel();
+    panel.classList.remove('is-right');
+    document.body.classList.add('rk-chat-left');
+    // The editor dock force-opens the panel, but that's a property of the editor
+    // shell, NOT a user choice to keep chat open — so don't let it persist. Otherwise
+    // navigating out (e.g. Back to Library) would re-pop the panel on the next page.
+    try { sessionStorage.removeItem('rk-chat-open'); } catch (e) {}
+    // Start as a clean chat column (Files/History collapsed) WITHOUT persisting a
+    // mode — setLeftMode writes localStorage, which the reskin pages share. The
+    // toggle buttons still open the drawers on demand.
+    panel.classList.remove('has-files', 'has-history');
+    var ftog = document.getElementById('rkFilesToggle');
+    if (ftog) { ftog.classList.remove('is-on'); ftog.setAttribute('aria-pressed', 'false'); }
+    var htog = document.getElementById('rkHistoryToggle');
+    if (htog) { htog.classList.remove('is-on'); htog.setAttribute('aria-pressed', 'false'); }
+    var catog = document.getElementById('rkAichatAttach');
+    if (catog) { catog.classList.remove('is-on'); catog.setAttribute('aria-pressed', 'false'); }
+  }
+})();
+
+// ── subtle per-video loading indicators ──────────────────────────────────────
+// A small spinner appears over ANY <video> while it is actively fetching data
+// (initial buffer OR a mid-playback rebuffer) and fades out the moment the video
+// has enough data to paint/play. Self-contained so it works on every reskin page
+// regardless of the chat dock. It only shows while the browser is genuinely
+// LOADING (networkState === 2), so idle preload="none" videos never spin.
+(function () {
+  function host(v) { return v.parentElement; }
+  function spinner(v, make) {
+    var p = host(v);
+    if (!p) return null;
+    var s = p.querySelector(':scope > .rk-vspin');
+    if (!s && make) {
+      s = document.createElement('span');
+      s.className = 'rk-vspin';
+      s.setAttribute('aria-hidden', 'true');
+      p.appendChild(s);
+    }
+    return s || null;
+  }
+  // NETWORK_LOADING === 2 && readyState < HAVE_FUTURE_DATA (3)
+  function loading(v) { return v.networkState === 2 && v.readyState < 3; }
+  function show(v) { var s = spinner(v, true); if (s) s.classList.add('is-on'); }
+  function hide(v) { var s = spinner(v, false); if (s) s.classList.remove('is-on'); }
+  function sync(v) { if (loading(v)) show(v); else hide(v); }
+  function wire(v) {
+    if (v.__rkVload) return;
+    v.__rkVload = true;
+    // ready / has-data events → definitely stop spinning
+    ['loadeddata', 'canplay', 'canplaythrough', 'playing', 'error', 'abort', 'suspend', 'emptied']
+      .forEach(function (ev) { v.addEventListener(ev, function () { hide(v); }); });
+    // fetch / rebuffer events → spin only if actually loading
+    ['loadstart', 'progress', 'waiting', 'stalled', 'seeking']
+      .forEach(function (ev) { v.addEventListener(ev, function () { sync(v); }); });
+    sync(v);
+  }
+  function scan(root) { (root || document).querySelectorAll('video').forEach(wire); }
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { scan(); });
+  } else { scan(); }
+  // catch lazily-inserted (TikTok viewer) and lazily-hydrated (data-vsrc → src) videos
+  if ('MutationObserver' in window) {
+    new MutationObserver(function (muts) {
+      for (var i = 0; i < muts.length; i++) {
+        var m = muts[i];
+        if (m.type === 'attributes') {
+          if (m.target && m.target.tagName === 'VIDEO') { wire(m.target); sync(m.target); }
+          continue;
+        }
+        if (!m.addedNodes) continue;
+        for (var j = 0; j < m.addedNodes.length; j++) {
+          var n = m.addedNodes[j];
+          if (!n || n.nodeType !== 1) continue;
+          if (n.tagName === 'VIDEO') wire(n);
+          else if (n.querySelectorAll) scan(n);
+        }
+      }
+    }).observe(document.documentElement, { childList: true, subtree: true, attributes: true, attributeFilter: ['src'] });
+  }
 })();`;
 /** Wrap page content in a complete standalone reskin HTML document. */
 export function reskinDocument(input) {
@@ -635,27 +1536,50 @@ export function reskinDocument(input) {
     const active = input.activeSlug ?? null;
     const pageCss = input.pageCss ? `\n/* page-scoped */\n${input.pageCss}\n` : "";
     const chromeScript = chrome === "full" ? `\n<script>${RESKIN_CHROME_SCRIPT}</script>` : "";
-    const script = (input.script ? `\n<script>${input.script}</script>` : "") + chromeScript;
+    // Full-chrome pages carry the chat dock, whose Files drawer is the reusable
+    // directory-explorer component — so its bundle loads on every such page.
+    const baseModules = chrome === "full" ? ["/assets/file-directory-app.js"] : [];
+    const moduleScripts = [...baseModules, ...(input.moduleScripts ?? [])]
+        .map((src) => `\n<script type="module" src="${rkEscape(src)}"></script>`)
+        .join("");
+    const script = (input.script ? `\n<script>${input.script}</script>` : "") + chromeScript + moduleScripts;
     const shell = chrome === "full"
         ? `<div class="rk-app">
-${renderSidebar(active)}
+${renderSidebar(active, input.account)}
 <div class="rk-content">
 ${input.body}
 </div>
 ${renderChatDock(active)}
 </div>`
         : input.body;
+    const pageTitle = rkBrandTitle(input.title);
+    const pageDesc = rkBrandTitle(input.description ?? input.title);
     return `<!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>${rkEscape(input.title.replace("vidfarm reskin", "vidfarm"))}</title>
-<meta name="description" content="${rkEscape((input.description ?? input.title).replace("vidfarm reskin", "vidfarm"))}">
+<link rel="icon" href="/assets/favicon.ico" sizes="any">
+<link rel="apple-touch-icon" href="/assets/logo-vidfarm.png">
+<title>${rkEscape(pageTitle)}</title>
+<meta name="description" content="${rkEscape(pageDesc)}">
+<meta name="theme-color" content="#f8f4eb">
+<meta name="robots" content="index, follow">
+<meta name="application-name" content="${BRAND_NAME}">
+<meta property="og:type" content="website">
+<meta property="og:site_name" content="${BRAND_NAME}">
+<meta property="og:title" content="${rkEscape(pageTitle)}">
+<meta property="og:description" content="${rkEscape(pageDesc)}">
+<meta property="og:url" content="${BRAND_ORIGIN}">
+<meta property="og:image" content="${BRAND_OG_IMAGE}">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="${rkEscape(pageTitle)}">
+<meta name="twitter:description" content="${rkEscape(pageDesc)}">
+<meta name="twitter:image" content="${BRAND_OG_IMAGE}">
 ${RESKIN_FONT_LINKS}
 <style>${RESKIN_CSS}${pageCss}</style>
 </head>
-<body class="rk-root${chrome === "full" ? " rk-has-sidebar" : ""}">
+<body class="rk-root${chrome === "full" ? " rk-has-sidebar" : ""}${input.account?.email?.trim() ? " rk-signed-in" : ""}">
 ${shell}${script}
 </body>
 </html>`;