@mevdragon/vidfarm-devcli 0.17.0 → 0.18.1

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,47 +22,1423 @@ export function rkEscape(value) {
         .replace(/"/g, """)
         .replace(/'/g, "'");
 }
-function renderSidebar(activeSlug) {
-    const items = RESKIN_PAGES.map((p) => {
+/** 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: "library", label: "Library" },
+    { slug: "calendar", label: "Calendar" },
+    { slug: "help", label: "Guides" },
+    { slug: "settings", label: "Settings" }
+];
+/** 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="/reskin/${p.slug}"${p.slug === activeSlug ? ` aria-current="page"` : ""}>${p.label}</a>`;
+        return `<a class="rk-sidebar-item${active}" href="/${p.slug}"${p.slug === activeSlug ? ` aria-current="page"` : ""}>${p.label}</a>`;
     }).join("");
-    const live = RESKIN_PAGES.find((p) => p.slug === activeSlug)?.live ?? "/";
-    const homeActive = activeSlug === null ? " is-active" : "";
+    // 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="/reskin"><span class="rk-brand-mark">V</span>vidfarm<span class="rk-brand-tag">reskin</span></a>
+  <a class="rk-sidebar-brand" href="/discover"><span class="rk-brand-mark">V</span>VidFarm</a>
+  <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">
-    <a class="rk-sidebar-item${homeActive}" href="/reskin">Gallery</a>
-    <div class="rk-sidebar-sep"></div>
     ${items}
   </nav>
-  <div class="rk-sidebar-foot">
-    <a class="rk-sidebar-foot-link" href="${rkEscape(live)}">↗ Compare with live page</a>
-    <a class="rk-btn rk-btn-ink rk-btn-sm rk-sidebar-cta" href="/">Live site <span class="rk-arrow">→</span></a>
+  ${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. */
+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-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"></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">
+      ${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="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. 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">
+      <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>`;
 }
+/** Chrome behavior: FAB drag (click-vs-drag threshold, viewport clamp, position
+ *  persisted in localStorage) + panel toggle. The panel anchors to whichever
+ *  half of the viewport the FAB sits in so it is never cut off; when it opens
+ *  on the left it replaces the sidebar nav (body.rk-chat-left). Open state
+ *  survives page navigation via sessionStorage. Plain IIFE — no backticks or
+ *  dollar-brace inside (it is embedded in a template literal). */
+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)); }
+
+  // offsetWidth/offsetLeft (not getBoundingClientRect) so the hover/drag/open
+  // transforms never skew the clamp math
+  function placeFab(x, y) {
+    x = clamp(x, MARGIN, window.innerWidth - fab.offsetWidth - MARGIN);
+    y = clamp(y, MARGIN, window.innerHeight - fab.offsetHeight - MARGIN);
+    fab.style.left = x + 'px';
+    fab.style.top = y + 'px';
+    fab.style.bottom = 'auto';
+    return { x: x, y: y };
+  }
+
+  try {
+    var saved = JSON.parse(localStorage.getItem('rk-fab-pos') || 'null');
+    if (saved && typeof saved.x === 'number') placeFab(saved.x, saved.y);
+  } catch (e) {}
+
+  function anchorPanel() {
+    var r = fab.getBoundingClientRect();
+    var onRight = r.left + r.width / 2 > window.innerWidth / 2;
+    panel.classList.toggle('is-right', onRight);
+    document.body.classList.toggle('rk-chat-left', !panel.hidden && !onRight);
+  }
+
+  function openPanel(filesOnly) {
+    panel.hidden = false;
+    panel.classList.toggle('is-files-only', !!filesOnly);
+    fab.classList.add('is-open');
+    fab.setAttribute('aria-expanded', 'true');
+    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 (!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');
+    try { sessionStorage.removeItem('rk-chat-open'); } catch (e) {}
+  }
+
+  var drag = null;
+  fab.addEventListener('pointerdown', function (e) {
+    drag = { sx: e.clientX, sy: e.clientY, ox: fab.offsetLeft, oy: fab.offsetTop, moved: false, last: null };
+    fab.setPointerCapture(e.pointerId);
+  });
+  fab.addEventListener('pointermove', function (e) {
+    if (!drag) return;
+    var dx = e.clientX - drag.sx;
+    var dy = e.clientY - drag.sy;
+    if (!drag.moved && Math.hypot(dx, dy) < 6) return;
+    drag.moved = true;
+    fab.classList.add('is-dragging');
+    drag.last = placeFab(drag.ox + dx, drag.oy + dy);
+  });
+  fab.addEventListener('pointerup', function () {
+    if (!drag) return;
+    var moved = drag.moved;
+    if (drag.last) {
+      try { localStorage.setItem('rk-fab-pos', JSON.stringify(drag.last)); } catch (e) {}
+    }
+    fab.classList.remove('is-dragging');
+    drag = null;
+    if (!moved) openPanel();
+  });
+  fab.addEventListener('pointercancel', function () {
+    fab.classList.remove('is-dragging');
+    drag = null;
+  });
+  fab.addEventListener('click', function (e) {
+    if (e.detail === 0 && panel.hidden) openPanel();
+  });
+
+  if (minBtn) minBtn.addEventListener('click', closePanel);
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape' && !panel.hidden) closePanel();
+  });
+  window.addEventListener('resize', function () {
+    if (fab.style.top) {
+      var pos = placeFab(fab.offsetLeft, fab.offsetTop);
+      try { localStorage.setItem('rk-fab-pos', JSON.stringify(pos)); } catch (e) {}
+    }
+    if (!panel.hidden) anchorPanel();
+  });
+
+  function bubble(kind, text) {
+    var el = document.createElement('div');
+    el.className = 'rk-aichat-msg ' + kind;
+    el.textContent = text;
+    log.appendChild(el);
+    log.scrollTop = log.scrollHeight;
+    return el;
+  }
+  function logBottom() { if (log) log.scrollTop = log.scrollHeight; }
+
+  // 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
+  var threadId = null; // set on first send / when opening a saved thread
+  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 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 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 };
+  }
+  // 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) {
+        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();
+      })
+      .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));
+      }
+    }
+    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;
+  }
+  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-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;
+  }
+
+  // ── 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';
+  }
+
+  // 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 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('');
+  }
+
+  // ── 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();
+  }
+
+  // ── 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();
+      }
+    };
+  }
+
+  // ── 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();
+  }
+
+  function sendMessage(text) {
+    if (busy) return;
+    text = (text || '').trim();
+    var picked = (typeof selected !== 'undefined' ? selected : []).slice();
+    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;
+    }
+
+    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();
+    var outMessages = convo.map(function (m, i) {
+      var t = m.text;
+      if (ctxBlock && m.role === 'user' && i === convo.length - 1) t = t + ctxBlock;
+      return { role: m.role, content: [{ type: 'text', text: t }] };
+    });
+    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 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 = null;
+    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(); });
+  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();
+    if (input) input.focus();
+  }
+  function renderChips() {
+    if (!chipsEl) return;
+    chipsEl.innerHTML = '';
+    selected.forEach(function (f, i) {
+      var chip = document.createElement('span');
+      chip.className = 'rk-aichat-chip';
+      chip.setAttribute('data-id', f.id);
+      var label = document.createElement('button');
+      label.type = 'button';
+      label.className = 'rk-aichat-chip-label';
+      label.title = 'Preview ' + f.name;
+      label.textContent = f.name;
+      if (f.viewUrl) label.addEventListener('click', function () { openFilePreview(selected, i); });
+      var x = document.createElement('button');
+      x.type = 'button';
+      x.setAttribute('aria-label', 'Remove ' + f.name);
+      x.textContent = '×';
+      x.addEventListener('click', function () {
+        selected = selected.filter(function (s) { return s.id !== f.id; });
+        renderChips();
+      });
+      chip.appendChild(label); chip.appendChild(x);
+      chipsEl.appendChild(chip);
+    });
+  }
+  function flashChip(id) {
+    var chip = chipsEl && chipsEl.querySelector('[data-id="' + id + '"]');
+    if (!chip) return;
+    chip.style.transition = 'none';
+    chip.style.transform = 'scale(1.08)';
+    setTimeout(function () { chip.style.transition = 'transform .18s'; chip.style.transform = 'none'; }, 20);
+  }
+  function clearChips() { selected = []; renderChips(); }
+
+  // ─── 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', mode === 'files');
+      filesToggle.setAttribute('aria-pressed', mode === 'files' ? 'true' : 'false');
+    }
+    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() {
+    // 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 () { setLeftMode(leftMode() === 'files' ? '' : 'files'); });
+  }
+  // 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'); });
+  }
+  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 {
+    var savedMode = localStorage.getItem('rk-left-mode');
+    setLeftMode(savedMode === null ? 'files' : savedMode);
+  } catch (e) { setLeftMode('files'); }
+  renderHistory();
+
+  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) {}
+
+  // 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) {
     const chrome = input.chrome ?? "full";
     const active = input.activeSlug ?? null;
     const pageCss = input.pageCss ? `\n/* page-scoped */\n${input.pageCss}\n` : "";
-    const script = input.script ? `\n<script>${input.script}</script>` : "";
+    const chromeScript = chrome === "full" ? `\n<script>${RESKIN_CHROME_SCRIPT}</script>` : "";
+    // 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)}</title>
-<meta name="description" content="${rkEscape(input.description ?? input.title)}">
+<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>