@mevdragon/vidfarm-devcli 0.16.0 → 0.17.0

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

@@ -0,0 +1,414 @@
+// /reskin/chat — the AI brainstorm chat, ported into the farmville design
+// system as a CLEAN, CALM single-column conversation.
+//
+// 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.
+//
+// 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(...).
+import { reskinDocument, rkEscape } from "./document.js";
+// ── 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 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>
+        </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-thread" id="rk-chat-thread">
+      ${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>
+      <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>
+</main>`;
+    const pageCss = `
+/* ── centered single-column chat ───────────────────────────────────────── */
+.rk-chat-page{width:100%;padding:0 var(--rk-gutter);background:var(--rk-bg)}
+.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;
+  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)}
+
+/* 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)}
+
+/* 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)}
+
+/* ── 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);
+  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;
+  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-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-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 ── */
+@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;
+  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 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'; }
+  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 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);
+  }
+  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');
+    bub.innerHTML='<span class="rk-chat-typing"><span></span><span></span><span></span></span>';
+    msg.appendChild(meta); msg.appendChild(bub);
+    if(thread) thread.appendChild(msg);
+    return bub;
+  }
+
+  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);
+  }
+
+  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(); }
+    });
+  }
+
+  // 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){}
+    });
+  });
+
+  // "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(); }
+    window.scrollTo(0,0);
+  });
+
+  // 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();
+      });
+    });
+    root.addEventListener('click',function(ev){
+      if(histMenu.hidden) return;
+      if(!histMenu.contains(ev.target) && ev.target!==histBtn) closeHist();
+    });
+  }
+})();`;
+    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.",
+        activeSlug: "chat",
+        pageCss,
+        body,
+        script
+    });
+}
+//# sourceMappingURL=chat-page.js.map