@mevdragon/vidfarm-devcli 0.17.0 → 0.18.1

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

@@ -1,198 +1,153 @@
-// /reskin/chat — the AI brainstorm chat, ported into the farmville design
-// system as a CLEAN, CALM single-column conversation.
+// /reskin/chat — the AI brainstorm chat, MIGRATED from a static mockup into a
+// REAL working chat wired to the live editor-chat backend.
 //
-// The reskin app now has its own fixed LEFT sidebar nav (rendered by
-// reskinDocument, chrome:"full"), so this page NO LONGER carries its own
-// history sidebar or right-hand context panel — those were redundant and busy.
-// Instead: one centered reading column (~800px) with a compact header, an
-// alternating message thread (ink user bubbles + soft white assistant cards),
-// a few starter chips, and a quiet sticky composer.
+// Like settings-page.ts, this renderer accepts the SAME input object the live
+// chat route already builds (`Parameters<typeof renderChatPage>[0]`). The
+// `input.editorChat` boot carries the REAL streaming endpoint, the vidfarm API
+// key, the template context, and the cached context the agent needs — we embed
+// that boot as JSON in the page and the composer POSTs straight to it.
 //
-// Rich but restrained: a couple of short paragraphs, ONE bulleted hook list,
-// and AT MOST ONE generated-template card with Open/Fork. Gold is used sparingly
-// (Send button + a couple of small accents). Built with ONLY shared rk-*
-// primitives + a page-scoped rk-chat- block + a small self-contained script.
-// No app.ts imports; pure string → reskinDocument(...).
+// What's REAL: the composer sends the user's message to the real editor-chat
+// endpoint (`boot.apiUrl`, with the `vidfarm-api-key` header + same-origin
+// creds + the correct body shape) and renders the streamed assistant reply
+// (SSE `text-delta` events). What's SIMPLIFIED: tool calls are rendered as
+// plain status notes (no rich artifact/HTTP cards), attachments are not wired,
+// and there is no thread-history sidebar (the boot carries no history). The
+// design stays farmville — shared rk-* primitives + a page-scoped rk-chat-
+// block + one self-contained script. No app.ts imports.
 import { reskinDocument, rkEscape } from "./document.js";
+// Default keeps the current zero-arg route (`renderReskinChat()`) compiling.
+// With no editorChat boot the composer degrades gracefully: it renders the
+// user bubble + a friendly "endpoint not available" reply instead of throwing.
+const DEFAULT_INPUT = {
+    userId: "",
+    currentAccountId: "",
+    name: null,
+    email: "",
+    editorChat: null
+};
 // ── icons ───────────────────────────────────────────────────────────────────
 const SEND = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12l16-8-6 16-2.5-6.5L4 12Z"/></svg>`;
-const CLIP = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 11.5l-8.4 8.4a5 5 0 0 1-7.1-7.1l8.5-8.5a3.3 3.3 0 0 1 4.7 4.7l-8.5 8.5a1.7 1.7 0 0 1-2.4-2.4l7.8-7.8"/></svg>`;
-function p(html) {
-    return `<p class="rk-chat-p">${html}</p>`;
-}
-function hookList(items) {
-    return `<div class="rk-chat-hooks">${items
-        .map((h) => `<div class="rk-chat-hook">
-        <span class="rk-chat-hook-dot" aria-hidden="true"></span>
-        <span class="rk-chat-hook-text"><strong>${rkEscape(h.angle)}</strong> &mdash; &ldquo;${rkEscape(h.text)}&rdquo;</span>
-      </div>`)
-        .join("")}</div>`;
-}
-function note(label, text) {
-    return `<p class="rk-chat-note"><strong>${rkEscape(label)}</strong> ${rkEscape(text)}</p>`;
-}
-function artifact(a) {
-    return `<div class="rk-chat-art">
-    <div class="rk-chat-poster">
-      <span class="rk-chat-poster-dur">${rkEscape(a.dur)}</span>
-      <span class="rk-chat-poster-play" aria-hidden="true">&#9654;</span>
-    </div>
-    <div class="rk-chat-art-main">
-      <span class="rk-chat-art-eyebrow">${rkEscape(a.eyebrow)}</span>
-      <h4 class="rk-chat-art-title">${rkEscape(a.title)}</h4>
-      <p class="rk-chat-art-meta">${rkEscape(a.meta)}</p>
-      <p class="rk-chat-art-desc">${rkEscape(a.desc)}</p>
-      <div class="rk-chat-art-actions">
-        <button type="button" class="rk-btn rk-btn-ink rk-btn-sm">Open in editor <span class="rk-arrow">&rarr;</span></button>
-        <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm">Fork</button>
-      </div>
-    </div>
-  </div>`;
-}
-const SAMPLE = [
-    {
-        role: "user",
-        time: "9:41 AM",
-        text: "I'm launching a $39 magnesium sleep gummy for stressed founders. Give me short-form ideas that'll convert cold TikTok traffic — I keep drawing a blank."
-    },
-    {
-        role: "assistant",
-        time: "9:41 AM",
-        body: p("Great starting point — a founder audience plus a sleep product is a hook goldmine. Here are the three angles I'd test first, each pulling a different psychological lever:") +
-            hookList([
-                { angle: "Problem-aware", text: "POV: it's 2am and your brain won't stop pitching investors." },
-                { angle: "Contrarian", text: "Melatonin is why you wake up groggy. Here's what founders take instead." },
-                { angle: "Demo", text: "I swapped my nightcap for one gummy for 14 nights. Night 12 broke me." }
-            ]) +
-            note("Format —", "talking-head UGC, 22–28s, hard cut every ~2s. Shoot vertical in natural light and read it like a voice memo, not an ad.")
-    },
-    {
-        role: "user",
-        time: "9:43 AM",
-        text: "The '2am' one is 🔥. Turn it into a full UGC ad script and spin up a template I can hand to a creator."
-    },
-    {
-        role: "assistant",
-        time: "9:43 AM",
-        body: p("Here's that hook as a ready-to-shoot 24-second cut — the emotional turn lands right before the CTA:") +
-            artifact({
-                dur: "0:24",
-                eyebrow: "Proposed template",
-                title: "The 2am Founder — UGC cut",
-                meta: "9:16 · 24s · Talking-head · word-by-word captions",
-                desc: "Wired to your hook and a five-beat script, with captions timed to the read. Fork it to swap the shot list or recut for a specific creator."
-            }) +
-            p("Want me to draft the on-screen captions and lock a trending sound? Say the word and I'll build the shot list.")
-    }
-];
-const STARTERS = [
-    { label: "Pitch 5 hooks" },
-    { label: "Turn this into a UGC ad" },
-    { label: "Remix a trending format" },
-    { label: "Write scroll-stopping captions" }
-];
-// recent brainstorms — surfaced only in the unobtrusive "History" menu now that
-// the standing history sidebar is gone.
-const RECENTS = [
-    { title: "Magnesium sleep gummy — cold TikTok", when: "2m", active: true },
-    { title: "Founder productivity app — launch week", when: "1h" },
-    { title: "Skincare serum — before/after", when: "Yesterday" },
-    { title: "AI notetaker — demo cuts", when: "Mon" }
-];
-// ── render ───────────────────────────────────────────────────────────────────
-function renderMessage(m) {
-    if (m.role === "user") {
-        return `<div class="rk-chat-msg is-user">
-      <div class="rk-chat-meta">You <span class="rk-chat-time">${rkEscape(m.time)}</span></div>
-      <div class="rk-chat-bubble rk-chat-bubble-user">${rkEscape(m.text)}</div>
-    </div>`;
-    }
-    return `<div class="rk-chat-msg is-assistant">
-    <div class="rk-chat-meta"><span class="rk-chat-avatar" aria-hidden="true">V</span>Copilot <span class="rk-chat-time">${rkEscape(m.time)}</span></div>
-    <div class="rk-chat-bubble rk-chat-bubble-assistant">${m.body}</div>
-  </div>`;
-}
-export function renderReskinChat() {
-    const thread = SAMPLE.map(renderMessage).join("");
-    const starterChips = STARTERS.map((s) => `<button type="button" class="rk-chat-chip" data-rk-prompt="${rkEscape(s.label)}">${rkEscape(s.label)}</button>`).join("");
-    const historyItems = RECENTS.map((r) => `<button type="button" class="rk-chat-hist-item${r.active ? " is-active" : ""}" data-rk-title="${rkEscape(r.title)}">
-      <span class="rk-chat-hist-title">${rkEscape(r.title)}</span>
-      <span class="rk-chat-hist-when">${rkEscape(r.when)}</span>
-    </button>`).join("");
+const STOP = `<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="6" width="12" height="12" rx="2.5"/></svg>`;
+const CLIP = `<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>`;
+export function renderReskinChat(input = DEFAULT_INPUT, opts = {}) {
+    const boot = input.editorChat ?? null;
+    const initialThreadId = opts.initialThreadId ?? null;
+    // Embed the real boot as JSON. Escaping only `<` is the correct (and
+    // sufficient) way to keep a `<script type="application/json">` block from
+    // breaking out; HTML-entity escaping would corrupt JSON.parse.
+    const bootJson = JSON.stringify(boot).replace(/</g, "\\u003c");
     const body = `
-<main class="rk-chat-page">
-  <div class="rk-chat-col">
-    <header class="rk-chat-head">
-      <div class="rk-chat-head-titles">
-        <span class="rk-chat-eyebrow">Brainstorm</span>
-        <h1 class="rk-chat-title" id="rk-chat-title">Magnesium sleep gummy — cold TikTok</h1>
-        <p class="rk-chat-subhead">Short-form angles, hooks &amp; a ready-to-render template — brainstormed on your own AI keys.</p>
-      </div>
-      <div class="rk-chat-head-actions">
-        <div class="rk-chat-history">
-          <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm" id="rk-chat-history-btn" aria-haspopup="true" aria-expanded="false">History <span class="rk-chat-caret" aria-hidden="true">▾</span></button>
-          <div class="rk-chat-hist-menu" id="rk-chat-history-menu" hidden>
-            <div class="rk-chat-hist-head">Recent brainstorms</div>
-            ${historyItems}
-          </div>
+<main class="rk-chat-page"${initialThreadId ? ` data-initial-thread="${rkEscape(initialThreadId)}"` : ""}>
+  <aside class="rk-chat-history" id="rk-chat-history" aria-label="Chat history">
+    <div class="rk-chat-history-head">
+      <span class="rk-chat-history-title">Chats</span>
+      <button type="button" class="rk-chat-newbtn" id="rk-chat-new"><span class="rk-chat-plus" aria-hidden="true">＋</span> New</button>
+    </div>
+    <div class="rk-chat-history-list" id="rk-chat-history-list"></div>
+  </aside>
+  <div class="rk-chat-histbackdrop" id="rk-chat-histbackdrop" hidden></div>
+  <div class="rk-chat-main">
+    <div class="rk-chat-col">
+      <header class="rk-chat-head">
+        <button type="button" class="rk-chat-histtoggle" id="rk-chat-histtoggle" aria-label="Show chat history">☰</button>
+        <div class="rk-chat-head-titles">
+          <h1 class="rk-chat-title" id="rk-chat-title">Chat with Agent</h1>
         </div>
-        <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm rk-chat-new" id="rk-chat-new"><span class="rk-chat-plus" aria-hidden="true">＋</span> New</button>
-      </div>
-    </header>
+        <div class="rk-chat-head-actions">
+          <label class="rk-chat-mode" aria-label="Studio mode">
+            <select class="rk-chat-mode-select" id="rk-chat-mode">
+              <option value="/chat" selected>Chat</option>
+              <option value="/inpaint">Create Image</option>
+            </select>
+            <span class="rk-chat-mode-chev" aria-hidden="true">&#9662;</span>
+          </label>
+        </div>
+      </header>
 
-    <div class="rk-chat-thread" id="rk-chat-thread">
-      ${thread}
-    </div>
+      <div class="rk-chat-thread" id="rk-chat-thread"></div>
 
-    <div class="rk-chat-dock">
-      <div class="rk-chat-starters" aria-label="Starter prompts">
-        ${starterChips}
-      </div>
-      <div class="rk-chat-composer" id="rk-chat-composer">
-        <button type="button" class="rk-chat-attach" aria-label="Attach a file">${CLIP}</button>
-        <textarea id="rk-chat-input" class="rk-chat-input" rows="1"
-          placeholder="Describe your offer, audience, or the problem to solve…"></textarea>
-        <button type="button" class="rk-btn rk-btn-gold rk-chat-send" id="rk-chat-send">Send ${SEND}</button>
+      <div class="rk-chat-dock">
+        <div class="rk-chat-chips" id="rk-chat-chips" aria-label="Attached files"></div>
+        <div class="rk-chat-composer" id="rk-chat-composer">
+          <textarea id="rk-chat-input" class="rk-chat-input" rows="3"
+            placeholder="Describe your offer, audience, or the problem to solve…"></textarea>
+          <div class="rk-chat-composer-actions">
+            <button type="button" class="rk-chat-attach" id="rk-chat-attach" aria-label="Attach a file" title="Attach a file">${CLIP}</button>
+            <button type="button" class="rk-btn rk-btn-gold rk-chat-send" id="rk-chat-send">Send ${SEND}</button>
+          </div>
+        </div>
+        <p class="rk-chat-hint"><kbd>Enter</kbd> to send · <kbd>Shift</kbd>+<kbd>Enter</kbd> for a new line</p>
       </div>
-      <p class="rk-chat-hint">Brainstormed on your own AI keys — never billed by vidfarm. <kbd>Enter</kbd> to send · <kbd>Shift</kbd>+<kbd>Enter</kbd> for a new line.</p>
     </div>
   </div>
+  <script type="application/json" id="rk-chat-boot">${bootJson}</script>
 </main>`;
     const pageCss = `
-/* ── centered single-column chat ───────────────────────────────────────── */
-.rk-chat-page{width:100%;padding:0 var(--rk-gutter);background:var(--rk-bg)}
+/* ── two-pane: history sidebar + centered chat column ─────────────────────── */
+.rk-chat-page{display:flex;width:100%;background:var(--rk-bg);min-height:100vh}
+.rk-chat-main{flex:1;min-width:0;display:flex;justify-content:center;padding:0 var(--rk-gutter)}
 .rk-chat-col{width:min(800px,100%);margin:0 auto;display:flex;flex-direction:column;
   min-height:100vh;padding-top:34px}
 
-/* compact header */
-.rk-chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
-  padding-bottom:22px;margin-bottom:6px;border-bottom:1px solid var(--rk-border)}
-.rk-chat-head-titles{display:grid;gap:6px;min-width:0}
-.rk-chat-eyebrow{display:inline-flex;align-items:center;font-size:12px;font-weight:700;
-  letter-spacing:.06em;text-transform:uppercase;color:var(--rk-gold-700)}
-.rk-chat-title{font-family:var(--rk-font-display);font-weight:800;font-size:1.7rem;letter-spacing:-.025em;
+/* history sidebar (real editor-chat threads) */
+.rk-chat-history{flex:none;width:266px;background:var(--rk-surface);border-right:1px solid var(--rk-border);
+  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
+.rk-chat-history-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
+  padding:20px 16px 12px;flex:none}
+.rk-chat-history-title{font-family:var(--rk-font-display);font-weight:800;font-size:16px;color:var(--rk-ink);letter-spacing:-.01em}
+.rk-chat-newbtn{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border-radius:var(--rk-r-full);
+  border:1px solid var(--rk-gold-600);background:var(--rk-gold-tint);color:var(--rk-ink);cursor:pointer;
+  font-family:var(--rk-font-body);font-size:12.5px;font-weight:700;transition:background var(--rk-dur) var(--rk-ease)}
+.rk-chat-newbtn:hover{background:var(--rk-gold-tint2)}
+.rk-chat-history-list{flex:1;min-height:0;overflow-y:auto;padding:4px 10px 16px;display:grid;gap:2px;align-content:start}
+.rk-chat-hrow{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border-radius:var(--rk-r-lg);
+  border:0;background:transparent;cursor:pointer;text-align:left;font-family:inherit;min-width:0;
+  transition:background var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
+.rk-chat-hrow:hover{background:var(--rk-n-50);box-shadow:var(--rk-shadow-xs)}
+.rk-chat-hrow.is-active{background:var(--rk-gold-tint)}
+.rk-chat-hrow-main{flex:1;min-width:0;display:grid;gap:1px}
+.rk-chat-hrow-title{font-size:13px;font-weight:600;color:var(--rk-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rk-chat-hrow-sub{font-size:11px;color:var(--rk-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rk-chat-hrow-del{flex:none;border:0;background:transparent;color:var(--rk-n-400);cursor:pointer;font-size:15px;
+  line-height:1;padding:2px 5px;border-radius:var(--rk-r-sm);opacity:0;
+  transition:opacity var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
+.rk-chat-hrow:hover .rk-chat-hrow-del{opacity:1}
+/* touch: the history panel is the primary mobile surface — keep delete visible */
+@media(hover:none){.rk-chat-hrow-del{opacity:1}}
+.rk-chat-hrow-del:hover{color:var(--rk-red);background:var(--rk-red-tint)}
+.rk-chat-history-note{padding:16px 14px;font-size:12.5px;color:var(--rk-text-muted);line-height:1.55;display:grid;gap:9px;justify-items:start}
+.rk-chat-history-note a{color:var(--rk-gold-700);font-weight:600}
+.rk-chat-history-note button{font-family:inherit;font-size:12px;font-weight:600;color:var(--rk-ink);cursor:pointer;
+  background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-full);padding:5px 12px}
+.rk-chat-history-note button:hover{background:var(--rk-n-100)}
+
+/* narrow-screen history toggle + slide-over (hidden on wide) */
+.rk-chat-histtoggle{display:none;flex:none;width:34px;height:34px;border-radius:var(--rk-r-lg);
+  border:1px solid var(--rk-border);background:#fff;color:var(--rk-n-600);cursor:pointer;font-size:15px;
+  align-items:center;justify-content:center;margin-right:2px;margin-top:2px}
+.rk-chat-histbackdrop{display:none}
+
+/* compact header — sticky so the title stays pinned while the thread scrolls */
+.rk-chat-head{display:flex;align-items:flex-start;gap:12px;
+  position:sticky;top:0;z-index:20;background:var(--rk-bg);
+  padding-top:18px;margin-top:-18px;padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--rk-border)}
+.rk-chat-head-titles{display:grid;gap:5px;min-width:0;flex:1}
+.rk-chat-title{font-family:var(--rk-font-display);font-weight:800;font-size:1.6rem;letter-spacing:-.025em;
   line-height:1.15;color:var(--rk-ink);min-width:0}
 .rk-chat-subhead{font-size:14.5px;color:var(--rk-text-muted);line-height:1.5;max-width:56ch}
 .rk-chat-head-actions{display:flex;align-items:center;gap:9px;flex:none}
 .rk-chat-plus{font-size:14px;font-weight:700;line-height:1;margin-right:1px}
-.rk-chat-caret{font-size:11px;color:var(--rk-text-faint)}
-
-/* history popover */
-.rk-chat-history{position:relative}
-.rk-chat-hist-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:20;width:min(300px,80vw);
-  background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);
-  box-shadow:var(--rk-shadow-lg);padding:8px;display:grid;gap:2px}
-.rk-chat-hist-menu[hidden]{display:none}
-.rk-chat-hist-head{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
-  color:var(--rk-text-faint);padding:8px 10px 6px}
-.rk-chat-hist-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
-  text-align:left;cursor:pointer;font-family:var(--rk-font-body);background:transparent;border:1px solid transparent;
-  border-radius:var(--rk-r-lg);padding:9px 11px;transition:background var(--rk-dur) var(--rk-ease)}
-.rk-chat-hist-item:hover{background:var(--rk-n-100)}
-.rk-chat-hist-item.is-active{background:var(--rk-gold-tint)}
-.rk-chat-hist-title{font-size:13px;font-weight:600;color:var(--rk-ink);min-width:0;white-space:nowrap;
-  overflow:hidden;text-overflow:ellipsis}
-.rk-chat-hist-when{flex:none;font-size:11px;font-weight:600;color:var(--rk-text-faint)}
+
+/* studio mode select (Brainstorm ↔ Create Image → /reskin/inpaint) */
+.rk-chat-mode{position:relative;display:inline-flex;align-items:center}
+.rk-chat-mode-select{appearance:none;-webkit-appearance:none;font-family:var(--rk-font-body);font-size:13px;font-weight:700;
+  color:var(--rk-ink);background:var(--rk-surface);border:1px solid var(--rk-border-strong);border-radius:var(--rk-r-full);
+  padding:9px 32px 9px 15px;cursor:pointer;box-shadow:var(--rk-shadow-xs);
+  transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
+.rk-chat-mode-select:hover{border-color:var(--rk-gold-600)}
+.rk-chat-mode-select:focus{outline:none;border-color:var(--rk-gold-600);box-shadow:var(--rk-ring-gold)}
+.rk-chat-mode-chev{position:absolute;right:13px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:11px;color:var(--rk-n-500)}
 
 /* thread — flex:1 pushes the dock to the bottom when the page is short */
 .rk-chat-thread{flex:1;display:grid;gap:28px;align-content:start;padding:30px 0 26px}
@@ -205,44 +160,49 @@ export function renderReskinChat() {
   font-family:var(--rk-font-display);font-weight:800;font-size:11px;line-height:1;
   background:linear-gradient(142deg,var(--rk-gold-500),var(--rk-violet))}
 
-/* bubbles — uniform 1px hairline on all four sides, no colored side stripes */
-.rk-chat-bubble{border-radius:var(--rk-r-2xl);padding:16px 20px;font-size:15px;line-height:1.65}
+/* bubbles — uniform 1px hairline on all four sides, no colored side stripes.
+   overflow-wrap keeps a long pasted URL/token in a USER bubble from forcing
+   horizontal page scroll on phones (assistant text already wraps via -stream). */
+.rk-chat-bubble{border-radius:var(--rk-r-2xl);padding:16px 20px;font-size:15px;line-height:1.65;overflow-wrap:anywhere}
 .rk-chat-bubble-user{max-width:min(78%,560px);background:var(--rk-ink);color:#f4f4f5;
   border:1px solid var(--rk-n-800);box-shadow:var(--rk-shadow-sm)}
 .rk-chat-bubble-assistant{width:100%;background:var(--rk-surface);color:var(--rk-n-700);
   border:1px solid var(--rk-border);box-shadow:var(--rk-shadow-card)}
-
-/* rich (but calm) assistant content */
-.rk-chat-p{margin:0}
-.rk-chat-p + *{margin-top:14px}
 .rk-chat-bubble-assistant strong{color:var(--rk-ink);font-weight:700}
-.rk-chat-hooks{display:grid;gap:12px}
-.rk-chat-hook{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:start}
-.rk-chat-hook-dot{width:7px;height:7px;border-radius:50%;background:var(--rk-gold-500);
-  box-shadow:0 0 0 3px var(--rk-gold-tint);margin-top:8px}
-.rk-chat-hook-text{color:var(--rk-n-700);line-height:1.55}
-.rk-chat-note{margin-top:16px;font-size:13.5px;color:var(--rk-text-muted);line-height:1.6}
-.rk-chat-note strong{color:var(--rk-ink);font-weight:700}
-
-/* generated-template card (nested card keeps its own full hairline) */
-.rk-chat-art{display:flex;gap:16px;margin-top:16px;padding:15px;border-radius:var(--rk-r-2xl);
-  background:var(--rk-n-50);border:1px solid var(--rk-border)}
-.rk-chat-art-main{display:grid;gap:7px;align-content:start;min-width:0}
-.rk-chat-art-eyebrow{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--rk-gold-700)}
-.rk-chat-art-title{font-family:var(--rk-font-display);font-weight:800;font-size:16px;color:var(--rk-ink);letter-spacing:-.01em}
-.rk-chat-art-meta{font-size:12.5px;color:var(--rk-text-faint);font-weight:500}
-.rk-chat-art-desc{font-size:13.5px;color:var(--rk-text-muted);line-height:1.55}
-.rk-chat-art-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
-
-/* 9:16 poster tile */
-.rk-chat-poster{position:relative;width:116px;aspect-ratio:9/16;flex:none;overflow:hidden;
-  border-radius:var(--rk-r-xl);box-shadow:var(--rk-shadow-sm);
-  background:linear-gradient(160deg,#3b2f73,#8256c9)}
-.rk-chat-poster-dur{position:absolute;top:8px;right:8px;font-size:10px;font-weight:700;color:#fff;
-  background:rgba(0,0,0,.42);padding:2px 7px;border-radius:var(--rk-r-full);letter-spacing:.02em}
-.rk-chat-poster-play{position:absolute;inset:0;margin:auto;width:34px;height:34px;border-radius:50%;
-  background:rgba(255,255,255,.94);color:var(--rk-ink);display:grid;place-items:center;font-size:11px;
-  padding-left:2px;box-shadow:var(--rk-shadow-sm)}
+.rk-chat-bubble-assistant em{font-style:italic}
+.rk-chat-bubble-assistant a{color:var(--rk-gold-700);font-weight:600;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
+
+/* streamed assistant text — pre-wrap keeps the model's own line breaks */
+.rk-chat-stream{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--rk-n-700);line-height:1.65}
+.rk-chat-stream a{color:var(--rk-gold-700);font-weight:600;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
+.rk-chat-stream strong{color:var(--rk-ink);font-weight:700}
+.rk-chat-stream em{font-style:italic}
+.rk-chat-stream[hidden]{display:none}
+
+/* thinking / status row */
+.rk-chat-status{display:flex;align-items:center;gap:10px;color:var(--rk-text-faint);font-size:13.5px}
+.rk-chat-status[hidden]{display:none}
+.rk-chat-status-label{font-size:13px;color:var(--rk-text-muted)}
+
+/* simplified tool-call notes (rich artifact/HTTP cards are intentionally omitted) */
+.rk-chat-notes{display:grid;gap:6px;margin-bottom:10px}
+.rk-chat-notes:empty{display:none}
+.rk-chat-toolnote{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--rk-text-muted);
+  font-family:var(--rk-font-mono);background:var(--rk-n-50);border:1px solid var(--rk-border);
+  border-radius:var(--rk-r-lg);padding:5px 10px;width:fit-content}
+.rk-chat-toolnote::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rk-gold-500);flex:none}
+
+/* error surface */
+.rk-chat-error{margin-top:2px;font-size:13.5px;color:#b42318;background:var(--rk-n-50);
+  border:1px solid var(--rk-border);border-radius:var(--rk-r-lg);padding:10px 12px;white-space:pre-wrap}
+
+/* typing indicator */
+.rk-chat-typing{display:inline-flex;gap:4px;align-items:center;padding:2px 0}
+.rk-chat-typing span{width:7px;height:7px;border-radius:50%;background:var(--rk-n-400);
+  animation:rk-chat-blink 1.2s var(--rk-ease) infinite}
+.rk-chat-typing span:nth-child(2){animation-delay:.18s}
+.rk-chat-typing span:nth-child(3){animation-delay:.36s}
+@keyframes rk-chat-blink{0%,80%,100%{opacity:.28;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
 
 /* ── quiet sticky composer dock ── */
 .rk-chat-dock{position:sticky;bottom:0;z-index:10;background:var(--rk-bg);
@@ -252,70 +212,274 @@ export function renderReskinChat() {
 .rk-chat-starters{display:flex;flex-wrap:wrap;gap:9px}
 .rk-chat-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--rk-r-full);
   font-family:var(--rk-font-body);font-size:13px;font-weight:600;color:var(--rk-n-700);cursor:pointer;
-  background:var(--rk-surface);border:1px solid var(--rk-border);box-shadow:var(--rk-shadow-xs);
+  background:var(--rk-surface);border:1px solid var(--rk-border);box-shadow:var(--rk-shadow-xs);text-align:left;
   transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
 .rk-chat-chip:hover{border-color:var(--rk-gold-600);background:var(--rk-gold-tint);color:var(--rk-ink);
   transform:translateY(-1px);box-shadow:var(--rk-shadow-sm)}
-.rk-chat-composer{display:flex;align-items:flex-end;gap:9px;background:var(--rk-surface);
-  border:1px solid var(--rk-border-strong);border-radius:var(--rk-r-3xl);padding:9px 9px 9px 12px;
+.rk-chat-chip:disabled{opacity:.5;cursor:default;transform:none;box-shadow:var(--rk-shadow-xs)}
+
+/* empty new-chat state — no greeting, just a few subtle suggestions */
+.rk-chat-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
+  min-height:min(46vh,360px);text-align:center;padding:24px 0}
+.rk-chat-empty-hint{font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--rk-text-faint)}
+.rk-chat-suggests{display:flex;flex-direction:column;gap:8px;width:min(420px,100%)}
+.rk-chat-suggest{display:block;width:100%;text-align:left;padding:12px 15px;border-radius:var(--rk-r-xl);
+  border:1px solid var(--rk-border);background:var(--rk-surface);color:var(--rk-n-600);cursor:pointer;
+  font-family:var(--rk-font-body);font-size:13.5px;font-weight:500;line-height:1.4;box-shadow:var(--rk-shadow-xs);
+  transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-chat-suggest:hover{border-color:var(--rk-gold-600);background:var(--rk-gold-tint);color:var(--rk-ink);
+  transform:translateY(-1px);box-shadow:var(--rk-shadow-sm)}
+/* composer = one bordered "text area" box: textarea fills the top, the attach +
+   send controls sit inside it along the bottom row */
+.rk-chat-composer{display:flex;flex-direction:column;gap:9px;background:var(--rk-surface);
+  border:1px solid var(--rk-border-strong);border-radius:var(--rk-r-2xl);padding:11px 12px 10px;
   box-shadow:var(--rk-shadow-card);transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
 .rk-chat-composer:focus-within{border-color:var(--rk-gold-600);box-shadow:var(--rk-ring-gold)}
-.rk-chat-attach{flex:none;width:40px;height:40px;border-radius:var(--rk-r-full);border:0;cursor:pointer;
-  display:grid;place-items:center;background:var(--rk-n-100);color:var(--rk-n-600);
-  transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
-.rk-chat-attach:hover{background:var(--rk-n-200);color:var(--rk-ink)}
-.rk-chat-attach svg{width:19px;height:19px}
-.rk-chat-input{flex:1;min-width:0;border:0;background:transparent;resize:none;font-family:var(--rk-font-body);
-  font-size:15px;line-height:1.5;color:var(--rk-ink);padding:10px 2px;max-height:148px}
+.rk-chat-composer-actions{display:flex;align-items:center;gap:9px}
+.rk-chat-composer-actions .rk-chat-send{margin-left:auto}
+
+/* attach button — opens the file-explorer drawer (chrome script wires it) */
+.rk-chat-attach{flex:none;width:38px;height:38px;border-radius:var(--rk-r-full);border:1px solid var(--rk-border);
+  background:#fff;color:var(--rk-n-500);cursor:pointer;display:grid;place-items:center;
+  transition:background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-chat-attach:hover{border-color:var(--rk-gold-600);background:var(--rk-gold-tint);color:var(--rk-ink)}
+.rk-chat-attach svg{width:18px;height:18px}
+
+/* attached-file chips (populated when a file is picked from the drawer) */
+.rk-chat-chips{display:flex;flex-wrap:wrap;gap:7px}
+.rk-chat-chips:empty{display:none}
+.rk-chat-attach-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 8px 5px 12px;border-radius:var(--rk-r-full);
+  background:var(--rk-gold-tint2);color:var(--rk-gold-700);font-size:12.5px;font-weight:600;max-width:230px}
+.rk-chat-attach-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rk-chat-attach-chip button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
+.rk-chat-attach-chip .rk-chat-attach-preview{font-family:inherit;font-size:12.5px;font-weight:600;padding:0;max-width:200px;
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:underline;text-underline-offset:2px;text-decoration-color:transparent}
+.rk-chat-attach-chip .rk-chat-attach-preview:hover{text-decoration-color:currentColor}
+.rk-chat-input{width:100%;min-width:0;min-height:76px;border:0;background:transparent;resize:none;font-family:var(--rk-font-body);
+  font-size:15px;line-height:1.5;color:var(--rk-ink);padding:4px 4px 0;max-height:210px}
 .rk-chat-input:focus{outline:none;box-shadow:none}
 .rk-chat-input::placeholder{color:var(--rk-n-400)}
 .rk-chat-send{flex:none;padding:11px 18px}
 .rk-chat-send svg{width:16px;height:16px}
+.rk-chat-send:disabled{opacity:.55;cursor:default}
 .rk-chat-hint{text-align:center;font-size:11.5px;color:var(--rk-text-faint);line-height:1.5}
 .rk-chat-hint kbd{font-family:var(--rk-font-mono);font-size:10.5px;background:var(--rk-n-100);
   border:1px solid var(--rk-border);border-radius:5px;padding:1px 5px;color:var(--rk-n-600)}
 
-/* typing indicator (appended on send) */
-.rk-chat-typing{display:inline-flex;gap:4px;align-items:center;padding:2px 0}
-.rk-chat-typing span{width:7px;height:7px;border-radius:50%;background:var(--rk-n-400);
-  animation:rk-chat-blink 1.2s var(--rk-ease) infinite}
-.rk-chat-typing span:nth-child(2){animation-delay:.18s}
-.rk-chat-typing span:nth-child(3){animation-delay:.36s}
-@keyframes rk-chat-blink{0%,80%,100%{opacity:.28;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
-
-/* ── narrow: bubbles go full-width, header stacks ── */
+/* ── narrow: history becomes a slide-over, bubbles go full-width ── */
+@media(max-width:900px){
+  .rk-chat-histtoggle{display:inline-flex}
+  .rk-chat-history{position:fixed;left:0;top:0;bottom:0;height:auto;z-index:70;width:min(300px,86vw);
+    transform:translateX(-100%);box-shadow:var(--rk-shadow-xl);transition:transform var(--rk-dur) var(--rk-ease)}
+  .rk-chat-history.is-open{transform:none}
+  .rk-chat-histbackdrop{display:block;position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.28)}
+  .rk-chat-histbackdrop[hidden]{display:none}
+}
 @media(max-width:720px){
   .rk-chat-col{padding-top:24px}
-  .rk-chat-head{flex-direction:column;gap:14px}
-  .rk-chat-head-actions{align-self:flex-start}
   .rk-chat-title{font-size:1.5rem}
   .rk-chat-bubble-user{max-width:100%}
-}
-@media(max-width:560px){
-  .rk-chat-art{flex-direction:column}
-  .rk-chat-poster{width:132px}
   .rk-chat-thread{gap:22px}
 }
 `;
     const script = `
 (function(){
   var root=document;
+
+  // ── read the real editor-chat boot (endpoint + auth + context) ──────────
+  var boot=null;
+  try{ var bootEl=root.getElementById('rk-chat-boot'); if(bootEl){ boot=JSON.parse(bootEl.textContent||'null'); } }catch(e){ boot=null; }
+  var ENDPOINT=(boot && boot.apiUrl) || '/api/v1/editor-chat';
+  var API_KEY=(boot && boot.vidfarmApiKey) || null;
+  var TEMPLATE=(boot && boot.template) || null;
+  var CACHED=(boot && boot.cachedContext) || null;
+
   var input=root.getElementById('rk-chat-input');
   var send=root.getElementById('rk-chat-send');
+  var SEND_HTML=${JSON.stringify('Send ' + SEND)};
+  var STOP_HTML=${JSON.stringify('Stop ' + STOP)};
   var thread=root.getElementById('rk-chat-thread');
   var title=root.getElementById('rk-chat-title');
   var AVATAR='V';
-  var REPLIES=[
-    "On it. Give me a beat — I'll shape that into hooks, a tight script, and a template you can render.",
-    "Good direction. I'll pull a trending format that fits and draft the on-screen captions to match.",
-    "Love it. Let me turn that into three testable angles and flag which one is cheapest to shoot first."
-  ];
-  var replyTurn=0;
-
-  function autosize(){ if(!input)return; input.style.height='auto'; input.style.height=Math.min(input.scrollHeight,148)+'px'; }
+
+  var history=[];          // [{role, text}] — the running conversation
+  var threadId=null;       // generated on first send, reused for persistence
+  var busy=false;
+  var pendingAbort=null;   // AbortController for the in-flight reply (Stop button)
+  var attachments=[];      // files picked from the file-explorer drawer
+  var chipsEl=root.getElementById('rk-chat-chips');
+
+  // Render the pending-attachment chips above the composer.
+  function renderAttachChips(){
+    if(!chipsEl) return;
+    chipsEl.innerHTML='';
+    attachments.forEach(function(f, i){
+      var chip=el('rk-chat-attach-chip');
+      var label=root.createElement('button'); label.type='button'; label.className='rk-chat-attach-preview';
+      label.title='Preview '+f.name; label.textContent=f.name;
+      if(f.viewUrl){ label.addEventListener('click',function(){ openFilePreview(attachments, i); }); }
+      chip.appendChild(label);
+      var x=root.createElement('button'); x.type='button'; x.setAttribute('aria-label','Remove '+f.name); x.textContent='\\u00d7';
+      x.addEventListener('click',function(){ attachments=attachments.filter(function(a){ return a.id!==f.id; }); renderAttachChips(); });
+      chip.appendChild(x); chipsEl.appendChild(chip);
+    });
+  }
+  // The file-explorer drawer (chrome script) hands picked files over via a DOM
+  // event — it lives in a separate script, so a CustomEvent is the bridge.
+  document.addEventListener('rk-chat-attach-file',function(ev){
+    var d=(ev && ev.detail)||{};
+    if(!d.id || !d.viewUrl) return;
+    if(attachments.some(function(a){ return a.id===String(d.id); })) return;
+    attachments.push({ id:String(d.id), name:d.name||'file', contentType:d.contentType||'application/octet-stream', viewUrl:d.viewUrl });
+    renderAttachChips();
+    if(input) input.focus();
+  });
+
+  // Each conversation has its own URL (/chat/<id>); a fresh page is /chat.
+  var pageEl=root.querySelector('.rk-chat-page');
+  var INITIAL_THREAD=(pageEl && pageEl.getAttribute('data-initial-thread')) || null;
+  function chatScopePrefix(){ var m=(location.pathname||'').match(/^(\\/u\\/[^/]+)\\/chat/); return m ? m[1] : ''; } // preserve account scope
+  function chatUrlFor(id){ return chatScopePrefix()+(id ? '/chat/'+encodeURIComponent(id) : '/chat'); }
+  function threadFromLocation(){ var m=(location.pathname||'').match(/\\/chat\\/(.+)$/); return m ? decodeURIComponent(m[1]) : null; }
+  function setChatUrl(id, replace){
+    // NB: the local "history" var is the message list — use window.history here.
+    var h=window.history; if(!h || (!h.pushState && !h.replaceState)) return;
+    var url=chatUrlFor(id);
+    try{ if(replace){ h.replaceState(null,'',url); } else { h.pushState(null,'',url); } }catch(e){}
+  }
+  function genId(p){ return p+'-'+Date.now().toString(36)+'-'+Math.random().toString(36).slice(2,8); }
+  function autosize(){ if(!input)return; input.style.height='auto'; input.style.height=Math.min(input.scrollHeight,210)+'px'; }
   function toBottom(){ try{ window.scrollTo({top:document.body.scrollHeight,behavior:'smooth'}); }catch(e){ window.scrollTo(0,document.body.scrollHeight); } }
   function nowLabel(){ try{ return new Date().toLocaleTimeString([], {hour:'numeric', minute:'2-digit'}); }catch(e){ return ''; } }
   function el(cls){ var d=root.createElement('div'); d.className=cls; return d; }
+  // While a reply streams, the Send button becomes an interruptive Stop (stays
+  // clickable so the user can abort); it flips back to Send when the reply ends.
+  function setBusy(v){ busy=v; if(send){ send.innerHTML=v?STOP_HTML:SEND_HTML; send.classList.toggle('is-stop',v); } root.querySelectorAll('[data-rk-prompt]').forEach(function(c){ c.disabled=v; }); }
+
+  // Inline markdown → HTML (escape first, then bold/italic/links). pre-wrap on
+  // the container keeps the model's own line breaks, so no block handling needed.
+  function escapeHtml(s){ return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+  function mdToHtml(text){
+    var s=escapeHtml(text);
+    s=s.replace(/\\*\\*([^*]+)\\*\\*/g,'<strong>$1</strong>');
+    s=s.replace(/(^|[^\\w*])\\*([^*\\n]+)\\*/g,'$1<em>$2</em>');
+    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;
+  }
+
+  // ── file preview modal (shares the rk-aichat-preview styling from theme.ts):
+  // images carousel, video, audio, pdf, and text (json pretty-print, md render,
+  // txt/csv/srt/vtt as <pre>) ──
+  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';
+  }
+  // Block-level markdown for .md previews (headings, lists, quotes, rules, code,
+  // plus the inline bold/italic/link handling from mdToHtml).
+  function renderMarkdownBlock(src){
+    var BT=String.fromCharCode(96), FENCE=BT+BT+BT;
+    function inline(s){ return mdToHtml(s).replace(new RegExp(BT+'([^'+BT+']+)'+BT,'g'),'<code>$1</code>'); }
+    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 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=el('rk-aichat-modal-back');
+    var modal=el('rk-aichat-modal rk-aichat-preview');
+    var head=el('rk-aichat-modal-head');
+    var nameEl=root.createElement('span'); nameEl.className='rk-aichat-http-url rk-aichat-preview-name';
+    var openLink=root.createElement('a'); openLink.className='rk-aichat-preview-open'; openLink.target='_blank'; openLink.rel='noopener noreferrer'; openLink.textContent='Open \\u2197';
+    var xBtn=root.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=el('rk-aichat-modal-body rk-aichat-preview-body');
+    var nav=el('rk-aichat-preview-nav');
+    var prev=root.createElement('button'); prev.type='button'; prev.className='rk-aichat-preview-btn'; prev.innerHTML='\\u2039 Prev';
+    var counter=root.createElement('span'); counter.className='rk-aichat-preview-count';
+    var next=root.createElement('button'); next.type='button'; next.className='rk-aichat-preview-btn'; next.innerHTML='Next \\u203a';
+    nav.appendChild(prev); nav.appendChild(counter); nav.appendChild(next);
+    function renderUnknown(container, it, msg){
+      var wrap=el('rk-aichat-preview-empty');
+      var p=root.createElement('div'); p.textContent=msg||'No inline preview for this file type.'; wrap.appendChild(p);
+      var a=root.createElement('a'); a.href=it.viewUrl; a.target='_blank'; a.rel='noopener noreferrer'; a.className='rk-aichat-preview-dl'; a.textContent='Open / download \\u2197'; wrap.appendChild(a);
+      container.appendChild(wrap);
+    }
+    function renderText(container, it, kind){
+      var loading=el('rk-aichat-preview-loading'); loading.textContent='Loading\\u2026'; 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 pretty=txt; try{ pretty=JSON.stringify(JSON.parse(txt),null,2); }catch(e){} var pj=root.createElement('pre'); pj.className='rk-aichat-http-pre rk-aichat-preview-text'; pj.textContent=pretty; container.appendChild(pj); return; }
+          if(kind==='markdown'){ var md=el('rk-aichat-preview-md'); md.innerHTML=renderMarkdownBlock(txt); container.appendChild(md); return; }
+          var pre=root.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\\u2019t 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=root.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=root.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=el('rk-aichat-preview-audiowrap'); var a=root.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=root.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 clientContext(){
+    var now=new Date(); var 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 appendUser(text){
     var msg=el('rk-chat-msg is-user');
@@ -324,88 +488,364 @@ export function renderReskinChat() {
     msg.appendChild(meta); msg.appendChild(bub);
     if(thread) thread.appendChild(msg);
   }
+
+  // Returns a small controller for the streaming assistant bubble.
   function appendAssistant(){
     var msg=el('rk-chat-msg is-assistant');
     var meta=el('rk-chat-meta');
-    meta.innerHTML='<span class="rk-chat-avatar" aria-hidden="true">'+AVATAR+'</span>Copilot <span class="rk-chat-time">'+nowLabel()+'</span>';
+    meta.innerHTML='Agent <span class="rk-chat-time">'+nowLabel()+'</span>';
     var bub=el('rk-chat-bubble rk-chat-bubble-assistant');
-    bub.innerHTML='<span class="rk-chat-typing"><span></span><span></span><span></span></span>';
+    var status=el('rk-chat-status');
+    status.innerHTML='<span class="rk-chat-typing"><span></span><span></span><span></span></span><span class="rk-chat-status-label">Thinking…</span>';
+    var notes=el('rk-chat-notes');
+    var textEl=el('rk-chat-stream'); textEl.hidden=true;
+    bub.appendChild(status); bub.appendChild(notes); bub.appendChild(textEl);
     msg.appendChild(meta); msg.appendChild(bub);
     if(thread) thread.appendChild(msg);
-    return bub;
+    var lastText='';
+    return {
+      setStatus:function(s){ var l=status.querySelector('.rk-chat-status-label'); if(l && s){ l.textContent=s; } },
+      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 as markdown (bold/italic/links).
+      renderMd:function(){ if(lastText){ textEl.innerHTML=mdToHtml(lastText); } },
+      addNote:function(t){ var n=el('rk-chat-toolnote'); n.textContent=t; notes.appendChild(n); },
+      fail:function(m){ status.hidden=true; var er=el('rk-chat-error'); er.textContent=m||'Something went wrong.'; bub.appendChild(er); }
+    };
   }
 
-  function sendMessage(){
-    if(!input) return;
-    var text=input.value.trim();
-    if(!text) return;
-    appendUser(text);
-    input.value=''; autosize(); toBottom();
-    var bub=appendAssistant(); toBottom();
-    var line=REPLIES[replyTurn % REPLIES.length]; replyTurn++;
-    setTimeout(function(){
-      if(bub){ bub.innerHTML='<p class="rk-chat-p"></p>'; bub.firstChild.textContent=line; toBottom(); }
-    }, 850);
+  // Minimal SSE reader — mirrors the live client's text/event-stream parsing.
+  function readStream(response, h){
+    if(!response.body || !response.body.getReader){
+      // No streaming reader available — fall back to reading the whole body.
+      return response.text().then(function(t){ parseEvents(t, h); });
+    }
+    var reader=response.body.getReader();
+    var decoder=new TextDecoder();
+    var buffer='';
+    function pump(){
+      return reader.read().then(function(res){
+        if(res.done){ if(buffer){ parseEvents(buffer, h); buffer=''; } 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 parseEvents(blob, h){ blob.split('\\n\\n').forEach(function(ev){ handleEvent(ev, h); }); }
+  function handleEvent(raw, h){
+    var lines=raw.split('\\n');
+    var 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==='status'){ var s=(typeof chunk.status==='string')?chunk.status:((typeof chunk.message==='string')?chunk.message:null); if(s){ h.onStatus(s); } }
+    else if(chunk.type==='tool-call' && typeof chunk.toolName==='string'){ h.onToolCall(chunk.toolName); }
+    else if(chunk.type==='error'){ h.onError((typeof chunk.errorText==='string')?chunk.errorText:((chunk.error && chunk.error.message)||'Unable to read assistant response.')); }
   }
 
-  if(input){ input.addEventListener('input',autosize); autosize(); }
-  if(send){ send.addEventListener('click',sendMessage); }
-  if(input){
-    input.addEventListener('keydown',function(ev){
-      if(ev.key==='Enter' && !ev.shiftKey){ ev.preventDefault(); sendMessage(); }
+  function sendMessage(text){
+    if(busy) return;
+    text=(text||'').trim();
+    // Attachments picked from the drawer travel in user_message.attachments;
+    // sending is allowed with only files (no text) too.
+    var atts=attachments.map(function(f){ return { id:String(f.id), fileName:f.name, contentType:f.contentType, viewUrl:f.viewUrl }; });
+    if(!text && !atts.length) return;
+
+    var line=text;
+    if(attachments.length){ line=(text?text+'  ':'')+'(attached: '+attachments.map(function(f){ return f.name; }).join(', ')+')'; }
+
+    clearEmptyState();
+    history.push({role:'user', text:text||line});
+    appendUser(line);
+    if(input){ input.value=''; autosize(); }
+    attachments=[]; renderAttachChips();
+    toBottom();
+
+    var view=appendAssistant();
+    toBottom();
+    setBusy(true);
+
+    if(!threadId){ threadId=genId('thread'); setChatUrl(threadId, true); }
+    var userMsgId=genId('user');
+    var asstMsgId=genId('assistant');
+
+    var body={
+      messages: history.map(function(m){ return { role:m.role, content:[{ type:'text', text:m.text }] }; }),
+      thread_id: threadId,
+      thread_template_id: (TEMPLATE && TEMPLATE.templateId) || 'chat-brainstorm',
+      thread_title: (text||line).slice(0,42),
+      thread_tracers: (TEMPLATE && TEMPLATE.tracers) || [],
+      client_context: clientContext(),
+      user_message: { id:userMsgId, role:'user', text:text||line, attachments:atts },
+      assistant_message: { id:asstMsgId }
+    };
+    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='';
+    var sawText=false;
+    var errored=false;
+
+    var handlers={
+      onDelta:function(d){ if(!sawText){ sawText=true; view.showText(); } acc+=d; view.setText(acc); toBottom(); },
+      onStatus:function(s){ if(!sawText){ view.setStatus(s); } },
+      onToolCall:function(name){ view.addNote('Running '+name+'…'); toBottom(); },
+      onError:function(m){ errored=true; view.fail(m); toBottom(); }
+    };
+
+    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){
+      // Synchronous fetch failure (e.g. invalid URL) — never let it throw uncaught.
+      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){
+        history.push({role:'assistant', text:acc});
+        view.renderMd();
+      } else if(!errored){
+        view.showText();
+        view.setText('The assistant finished without returning any text.');
+      }
+      setBusy(false);
+      if(input){ input.focus(); }
+      toBottom();
+      loadHistory();
+    }).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){ history.push({role:'assistant', text:acc}); view.renderMd(); }
+        else{ view.showText(); view.setText('Stopped.'); }
+        setBusy(false);
+        if(input){ input.focus(); }
+        toBottom();
+        return;
+      }
+      var msg=(err && err.message) ? err.message : String(err);
+      if(!API_KEY){ msg=msg+'\\n\\nAdd an AI provider key in Settings to brainstorm on your own keys.'; }
+      view.fail(msg);
+      setBusy(false);
+      if(input){ input.focus(); }
+      toBottom();
     });
   }
 
-  // starter chips fill + focus the composer
-  root.querySelectorAll('[data-rk-prompt]').forEach(function(chip){
-    chip.addEventListener('click',function(){
-      if(!input)return;
-      input.value=chip.getAttribute('data-rk-prompt')+': ';
-      autosize(); input.focus();
-      try{ input.setSelectionRange(input.value.length,input.value.length); }catch(e){}
-    });
-  });
+  // ── real chat history (editor-chat threads) ────────────────────────────
+  var THREADS_URL=(boot && boot.threadsUrl) || '/api/v1/editor-chat/threads';
+  var TEMPLATE_ID=(TEMPLATE && TEMPLATE.templateId) || 'chat-brainstorm';
+  var histList=root.getElementById('rk-chat-history-list');
+  var histAside=root.getElementById('rk-chat-history');
+  var histBackdrop=root.getElementById('rk-chat-histbackdrop');
+  var histToggle=root.getElementById('rk-chat-histtoggle');
+  var loadingThread=false;
 
-  // "New" resets the thread to a warm empty state
-  root.getElementById('rk-chat-new') && root.getElementById('rk-chat-new').addEventListener('click',function(){
-    if(thread){
-      thread.innerHTML='<div class="rk-chat-msg is-assistant">'+
-        '<div class="rk-chat-meta"><span class="rk-chat-avatar" aria-hidden="true">'+AVATAR+'</span>Copilot <span class="rk-chat-time">'+nowLabel()+'</span></div>'+
-        '<div class="rk-chat-bubble rk-chat-bubble-assistant"><p class="rk-chat-p">Fresh page. Tell me the offer, who it\\u2019s for, and where the traffic is cold \\u2014 I\\u2019ll come back with angles, hooks, and a template you can render.</p></div>'+
-      '</div>';
-    }
-    if(title) title.textContent='New brainstorm';
-    if(input){ input.focus(); }
+  function authHeaders(extra){ var h=extra||{}; 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=el('rk-chat-history-note');
+    var p=root.createElement('div'); p.textContent=text; wrap.appendChild(p);
+    if(opts && opts.href){ var a=root.createElement('a'); a.href=opts.href; a.textContent=opts.linkText||'Open'; wrap.appendChild(a); }
+    if(opts && opts.retry){ var b=root.createElement('button'); b.type='button'; b.textContent='Try again'; b.addEventListener('click',function(){ loadHistory(); }); wrap.appendChild(b); }
+    return wrap;
+  }
+  function setActiveThread(id){
+    threadId=id;
+    if(!histList) return;
+    var rows=histList.querySelectorAll('.rk-chat-hrow');
+    for(var i=0;i<rows.length;i++){ rows[i].classList.toggle('is-active', rows[i].getAttribute('data-id')===id); }
+  }
+  function renderHistory(threads){
+    if(!histList) return;
+    histList.innerHTML='';
+    if(!threads.length){ histList.appendChild(histNote('No conversations yet. Start one below \\u2014 it saves automatically.')); return; }
+    threads.forEach(function(t){
+      var row=root.createElement('button');
+      row.type='button'; row.className='rk-chat-hrow'; row.setAttribute('data-id', t.id);
+      if(t.id===threadId){ row.classList.add('is-active'); }
+      var main=el('rk-chat-hrow-main');
+      var ti=el('rk-chat-hrow-title'); ti.textContent=t.title || 'Untitled chat';
+      var sub=el('rk-chat-hrow-sub');
+      var count=(typeof t.messageCount==='number')?t.messageCount:0;
+      var when=relTime(t.lastMessageAt || t.updatedAt);
+      sub.textContent=(count?count+' message'+(count===1?'':'s'):'')+((count&&when)?' \\u00b7 ':'')+(when||'');
+      main.appendChild(ti); main.appendChild(sub);
+      var del=root.createElement('button');
+      del.type='button'; del.className='rk-chat-hrow-del'; del.setAttribute('aria-label','Delete chat'); del.textContent='\\u00d7';
+      del.addEventListener('click', function(ev){ ev.stopPropagation(); deleteThread(t.id, row); });
+      row.appendChild(main); row.appendChild(del);
+      row.addEventListener('click', function(){ openThread(t.id); });
+      histList.appendChild(row);
+    });
+  }
+  function loadHistory(){
+    if(!histList) return;
+    if(!API_KEY){ histList.innerHTML=''; histList.appendChild(histNote('Add an AI provider key in Settings to sync your saved chats.', {href:'/settings', linkText:'Open Settings'})); return; }
+    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){ return {threads:[], _auth:true}; }
+        if(!r.ok) throw new Error('http '+r.status);
+        return r.json();
+      })
+      .then(function(j){
+        if(j && j._auth){ histList.innerHTML=''; histList.appendChild(histNote('Sign in to sync your saved chats.', {href:'/login', linkText:'Sign in'})); return; }
+        renderHistory((j && j.threads) || []);
+      })
+      .catch(function(){ if(histList){ histList.innerHTML=''; histList.appendChild(histNote('Couldn\\u2019t load your chats.', {retry:true})); } });
+  }
+  function appendAssistantStatic(text){ var v=appendAssistant(); v.showText(); v.setText(text||''); v.hideStatus(); v.renderMd(); return v; }
+  function openThread(id, opts){
+    if(busy || loadingThread) return;
+    if(!(opts && opts.skipUrl)) setChatUrl(id, false);
+    loadingThread=true;
+    closeHistoryOverlay();
+    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'); }
+        history=[];
+        if(thread){ thread.innerHTML=''; }
+        var msgs=t.messages||[];
+        for(var i=0;i<msgs.length;i++){
+          var m=msgs[i]; var role=(m.role==='assistant')?'assistant':'user'; var txt=m.text||'';
+          history.push({role:role, text:txt});
+          if(role==='user'){ appendUser(txt); } else { appendAssistantStatic(txt); }
+        }
+        setActiveThread(id);
+        loadingThread=false;
+        toBottom();
+      })
+      .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);
+        if(row && row.parentNode){ row.parentNode.removeChild(row); }
+        if(id===threadId){ resetChat(); }
+        if(histList && !histList.querySelector('.rk-chat-hrow')){ loadHistory(); }
+      })
+      .catch(function(){});
+  }
+  // A fresh chat opens empty — no greeting message — with a few subtle
+  // suggestion pills the user can tap to start (or just type their own).
+  function renderEmptyState(){
+    if(!thread) return;
+    thread.innerHTML='';
+    var suggestions=[
+      'Give me 10 ad hooks for my offer',
+      'What angle works best for cold traffic?',
+      'Help me plan a cold-start strategy'
+    ];
+    var wrap=el('rk-chat-empty');
+    var hint=el('rk-chat-empty-hint'); hint.textContent='Ask anything, or try one of these';
+    var list=el('rk-chat-suggests');
+    suggestions.forEach(function(s){
+      var b=root.createElement('button');
+      b.type='button'; b.className='rk-chat-suggest'; b.textContent=s;
+      b.addEventListener('click',function(){ if(busy) return; sendMessage(s); });
+      list.appendChild(b);
+    });
+    wrap.appendChild(hint); wrap.appendChild(list);
+    thread.appendChild(wrap);
+  }
+  function clearEmptyState(){
+    if(!thread) return;
+    var e=thread.querySelector('.rk-chat-empty');
+    if(e && e.parentNode){ e.parentNode.removeChild(e); }
+  }
+  function resetChat(opts){
+    history=[]; threadId=null;
+    if(!(opts && opts.skipUrl)) setChatUrl(null, false);
+    renderEmptyState();
+    setActiveThread(null);
+    if(input){ input.value=''; autosize(); input.focus(); }
     window.scrollTo(0,0);
+  }
+  function openHistoryOverlay(){ if(histAside){ histAside.classList.add('is-open'); } if(histBackdrop){ histBackdrop.hidden=false; } }
+  function closeHistoryOverlay(){ if(histAside){ histAside.classList.remove('is-open'); } if(histBackdrop){ histBackdrop.hidden=true; } }
+  if(histToggle){ histToggle.addEventListener('click', openHistoryOverlay); }
+  if(histBackdrop){ histBackdrop.addEventListener('click', closeHistoryOverlay); }
+  loadHistory();
+
+  // Deep-link: /chat/<id> opens that saved thread on load; otherwise the page
+  // starts on the empty new-chat state with subtle suggestions.
+  if(INITIAL_THREAD){ openThread(INITIAL_THREAD, {skipUrl:true}); }
+  else{ renderEmptyState(); }
+  // Back/forward between conversations — sync the visible thread to the URL.
+  window.addEventListener('popstate',function(){
+    if(busy || loadingThread) return;
+    var id=threadFromLocation();
+    if(id){ if(id!==threadId){ openThread(id, {skipUrl:true}); } }
+    else if(threadId){ resetChat({skipUrl:true}); }
   });
 
-  // unobtrusive history popover
-  var histBtn=root.getElementById('rk-chat-history-btn');
-  var histMenu=root.getElementById('rk-chat-history-menu');
-  function closeHist(){ if(histMenu){ histMenu.hidden=true; } if(histBtn){ histBtn.setAttribute('aria-expanded','false'); } }
-  if(histBtn && histMenu){
-    histBtn.addEventListener('click',function(ev){
-      ev.stopPropagation();
-      var open=histMenu.hidden;
-      histMenu.hidden=!open; histBtn.setAttribute('aria-expanded', open?'true':'false');
-    });
-    histMenu.querySelectorAll('[data-rk-title]').forEach(function(it){
-      it.addEventListener('click',function(){
-        histMenu.querySelectorAll('[data-rk-title]').forEach(function(x){ x.classList.toggle('is-active',x===it); });
-        if(title){ var t=it.getAttribute('data-rk-title'); if(t) title.textContent=t; }
-        closeHist();
-      });
+  // composer wiring
+  if(input){ input.addEventListener('input',autosize); autosize(); }
+  if(send){ send.addEventListener('click',function(){ if(busy){ if(pendingAbort){ pendingAbort.abort(); } return; } if(input){ sendMessage(input.value); } }); }
+  if(input){
+    input.addEventListener('keydown',function(ev){
+      if(ev.key==='Enter' && !ev.shiftKey){ ev.preventDefault(); if(busy){ if(pendingAbort){ pendingAbort.abort(); } return; } sendMessage(input.value); }
     });
-    root.addEventListener('click',function(ev){
-      if(histMenu.hidden) return;
-      if(!histMenu.contains(ev.target) && ev.target!==histBtn) closeHist();
+  }
+
+  // "New" resets the conversation to the warm empty state (shared resetChat)
+  var newBtn=root.getElementById('rk-chat-new');
+  if(newBtn){
+    newBtn.addEventListener('click',function(){ if(busy) return; resetChat(); });
+  }
+
+  // studio mode: choosing "Create Image" navigates to the inpaint workbench
+  var modeSel=root.getElementById('rk-chat-mode');
+  if(modeSel){
+    modeSel.addEventListener('change',function(){
+      var dest=modeSel.value;
+      if(dest && dest!=='/chat'){ window.location.href=dest; }
     });
   }
 })();`;
     return reskinDocument({
-        title: "vidfarm reskin — Brainstorm",
-        description: "Reskinned vidfarm AI brainstorm chat — a clean, calm single-column conversation with a compact header, starter chips, and a quiet composer.",
+        title: "vidfarm — Chat with Agent",
+        description: "Vidfarm AI agent chat, wired to the live editor-chat backend — a clean single-column conversation that opens empty with subtle suggestions and a working composer.",
         activeSlug: "chat",
+        account: { name: input.name, email: input.email },
         pageCss,
         body,
         script