@mevdragon/vidfarm-devcli 0.16.0 → 0.18.0

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

@@ -0,0 +1,607 @@
+// /reskin/chat — the AI brainstorm chat, MIGRATED from a static mockup into a
+// REAL working chat wired to the live editor-chat backend.
+//
+// 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.
+//
+// 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>`;
+// Full-sentence starter prompts — clicking one sends it straight to the agent.
+const STARTERS = [
+    "Pitch me 5 scroll-stopping hooks I can test on cold TikTok traffic.",
+    "Turn my best idea into a ready-to-shoot UGC ad script.",
+    "Remix a trending short-form format for my product.",
+    "Write word-by-word captions for a 24-second talking-head cut."
+];
+export function renderReskinChat(input = DEFAULT_INPUT) {
+    const boot = input.editorChat ?? 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 starterChips = STARTERS.map((s) => `<button type="button" class="rk-chat-chip" data-rk-prompt="${rkEscape(s)}">${rkEscape(s)}</button>`).join("");
+    const body = `
+<main class="rk-chat-page">
+  <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">
+          <span class="rk-chat-eyebrow">Brainstorm</span>
+          <h1 class="rk-chat-title" id="rk-chat-title">Brainstorm studio</h1>
+          <p class="rk-chat-subhead">Short-form angles, hooks &amp; scripts &mdash; brainstormed live on your own AI keys, never billed by vidfarm.</p>
+        </div>
+        <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>Brainstorm</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">
+        <div class="rk-chat-msg is-assistant">
+          <div class="rk-chat-meta"><span class="rk-chat-avatar" aria-hidden="true">V</span>Copilot</div>
+          <div class="rk-chat-bubble rk-chat-bubble-assistant">
+            <div class="rk-chat-stream">Tell me the offer, who it&rsquo;s for, and where the traffic is cold &mdash; I&rsquo;ll come back with angles, hooks, and scripts you can render. Pick a starter below or just start typing.</div>
+          </div>
+        </div>
+      </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">
+          <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>
+        <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>
+  </div>
+  <script type="application/json" id="rk-chat-boot">${bootJson}</script>
+</main>`;
+    const pageCss = `
+/* ── 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}
+
+/* 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}
+.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 */
+.rk-chat-head{display:flex;align-items:flex-start;gap:12px;
+  padding-bottom:22px;margin-bottom:6px;border-bottom:1px solid var(--rk-border)}
+.rk-chat-head-titles{display:grid;gap:6px;min-width:0;flex:1}
+.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;
+  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}
+
+/* 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}
+.rk-chat-msg{display:grid;gap:8px;min-width:0}
+.rk-chat-msg.is-user{justify-items:end}
+.rk-chat-meta{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.05em;
+  text-transform:uppercase;color:var(--rk-text-faint);padding:0 4px}
+.rk-chat-time{font-weight:600;letter-spacing:.02em;color:var(--rk-n-300);text-transform:none;font-size:11px}
+.rk-chat-avatar{width:20px;height:20px;border-radius:6px;flex:none;display:grid;place-items:center;color:#fff;
+  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}
+.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)}
+.rk-chat-bubble-assistant strong{color:var(--rk-ink);font-weight:700}
+
+/* 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[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);
+  padding:16px 0 22px;display:grid;gap:12px}
+.rk-chat-dock::before{content:"";position:absolute;left:0;right:0;top:-26px;height:26px;pointer-events:none;
+  background:linear-gradient(to top,var(--rk-bg),transparent)}
+.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);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-chip:disabled{opacity:.5;cursor:default;transform:none;box-shadow:var(--rk-shadow-xs)}
+.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 16px;
+  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-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-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)}
+
+/* ── 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-title{font-size:1.5rem}
+  .rk-chat-bubble-user{max-width:100%}
+  .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 thread=root.getElementById('rk-chat-thread');
+  var title=root.getElementById('rk-chat-title');
+  var AVATAR='V';
+
+  var history=[];          // [{role, text}] — the running conversation
+  var threadId=null;       // generated on first send, reused for persistence
+  var busy=false;
+
+  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,148)+'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; }
+  function setBusy(v){ busy=v; if(send){ send.disabled=v; } root.querySelectorAll('[data-rk-prompt]').forEach(function(c){ c.disabled=v; }); }
+
+  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');
+    var meta=el('rk-chat-meta'); meta.innerHTML='You <span class="rk-chat-time">'+nowLabel()+'</span>';
+    var bub=el('rk-chat-bubble rk-chat-bubble-user'); bub.textContent=text;
+    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>';
+    var bub=el('rk-chat-bubble rk-chat-bubble-assistant');
+    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 {
+      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){ textEl.textContent=t; },
+      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); }
+    };
+  }
+
+  // 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.')); }
+  }
+
+  function sendMessage(text){
+    if(busy) return;
+    text=(text||'').trim();
+    if(!text) return;
+
+    history.push({role:'user', text:text});
+    appendUser(text);
+    if(input){ input.value=''; autosize(); }
+    if(title && history.length===1){ title.textContent=text.slice(0,60); }
+    toBottom();
+
+    var view=appendAssistant();
+    toBottom();
+    setBusy(true);
+
+    if(!threadId){ threadId=genId('thread'); }
+    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.slice(0,42),
+      thread_tracers: (TEMPLATE && TEMPLATE.tracers) || [],
+      client_context: clientContext(),
+      user_message: { id:userMsgId, role:'user', text:text, attachments:[] },
+      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 req;
+    try{
+      req=fetch(ENDPOINT,{ method:'POST', headers:headers, credentials:'same-origin', body:JSON.stringify(body) });
+    }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(){
+      view.hideStatus();
+      if(sawText){
+        history.push({role:'assistant', text:acc});
+      } 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){
+      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();
+    });
+  }
+
+  // ── 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;
+
+  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(); return v; }
+  function openThread(id){
+    if(busy || loadingThread) return;
+    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); }
+        }
+        if(title){ title.textContent=t.title || 'Brainstorm studio'; }
+        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(){});
+  }
+  function resetChat(){
+    history=[]; threadId=null;
+    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</div>'+
+        '<div class="rk-chat-bubble rk-chat-bubble-assistant"><div class="rk-chat-stream">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 scripts you can render.</div></div>'+
+      '</div>';
+    }
+    if(title){ title.textContent='Brainstorm studio'; }
+    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();
+
+  // composer wiring
+  if(input){ input.addEventListener('input',autosize); autosize(); }
+  if(send){ send.addEventListener('click',function(){ if(input){ sendMessage(input.value); } }); }
+  if(input){
+    input.addEventListener('keydown',function(ev){
+      if(ev.key==='Enter' && !ev.shiftKey){ ev.preventDefault(); sendMessage(input.value); }
+    });
+  }
+
+  // starter chips send their full prompt directly
+  root.querySelectorAll('[data-rk-prompt]').forEach(function(chip){
+    chip.addEventListener('click',function(){ if(busy) return; sendMessage(chip.getAttribute('data-rk-prompt')||''); });
+  });
+
+  // "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, wired to the live editor-chat backend — a clean single-column conversation with starter chips and a working composer.",
+        activeSlug: "chat",
+        pageCss,
+        body,
+        script
+    });
+}
+//# sourceMappingURL=chat-page.js.map