@mevdragon/vidfarm-devcli 0.18.0 → 0.18.1

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

@@ -28,22 +28,17 @@ const DEFAULT_INPUT = {
 };
 // ── 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 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 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">
+<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>
@@ -57,14 +52,12 @@ export function renderReskinChat(input = DEFAULT_INPUT) {
       <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>
+          <h1 class="rk-chat-title" id="rk-chat-title">Chat with Agent</h1>
         </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="/chat" selected>Chat</option>
               <option value="/inpaint">Create Image</option>
             </select>
             <span class="rk-chat-mode-chev" aria-hidden="true">&#9662;</span>
@@ -72,25 +65,19 @@ export function renderReskinChat(input = DEFAULT_INPUT) {
         </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-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-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="1"
+          <textarea id="rk-chat-input" class="rk-chat-input" rows="3"
             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-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">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>
+        <p class="rk-chat-hint"><kbd>Enter</kbd> to send · <kbd>Shift</kbd>+<kbd>Enter</kbd> for a new line</p>
       </div>
     </div>
   </div>
@@ -126,6 +113,8 @@ export function renderReskinChat(input = DEFAULT_INPUT) {
   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}
@@ -139,13 +128,12 @@ export function renderReskinChat(input = DEFAULT_INPUT) {
   align-items:center;justify-content:center;margin-right:2px;margin-top:2px}
 .rk-chat-histbackdrop{display:none}
 
-/* compact header */
+/* compact header — sticky so the title stays pinned while the thread scrolls */
 .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;
+  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}
@@ -172,16 +160,23 @@ export function renderReskinChat(input = DEFAULT_INPUT) {
   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)}
 .rk-chat-bubble-assistant strong{color:var(--rk-ink);font-weight:700}
+.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 */
@@ -222,12 +217,46 @@ export function renderReskinChat(input = DEFAULT_INPUT) {
 .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;
+
+/* 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-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}
@@ -267,6 +296,8 @@ export function renderReskinChat(input = DEFAULT_INPUT) {
 
   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';
@@ -274,13 +305,174 @@ export function renderReskinChat(input = DEFAULT_INPUT) {
   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,148)+'px'; }
+  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; }
-  function setBusy(v){ busy=v; if(send){ send.disabled=v; } root.querySelectorAll('[data-rk-prompt]').forEach(function(c){ c.disabled=v; }); }
+  // While a reply streams, the Send button becomes an interruptive Stop (stays
+  // clickable so the user can abort); it flips back to Send when 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;
@@ -301,7 +493,7 @@ export function renderReskinChat(input = DEFAULT_INPUT) {
   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');
     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>';
@@ -310,11 +502,14 @@ export function renderReskinChat(input = DEFAULT_INPUT) {
     bub.appendChild(status); bub.appendChild(notes); bub.appendChild(textEl);
     msg.appendChild(meta); msg.appendChild(bub);
     if(thread) thread.appendChild(msg);
+    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){ textEl.textContent=t; },
+      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); }
     };
@@ -360,19 +555,26 @@ export function renderReskinChat(input = DEFAULT_INPUT) {
   function sendMessage(text){
     if(busy) return;
     text=(text||'').trim();
-    if(!text) return;
+    // 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;
 
-    history.push({role:'user', text:text});
-    appendUser(text);
+    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(); }
-    if(title && history.length===1){ title.textContent=text.slice(0,60); }
+    attachments=[]; renderAttachChips();
     toBottom();
 
     var view=appendAssistant();
     toBottom();
     setBusy(true);
 
-    if(!threadId){ threadId=genId('thread'); }
+    if(!threadId){ threadId=genId('thread'); setChatUrl(threadId, true); }
     var userMsgId=genId('user');
     var asstMsgId=genId('assistant');
 
@@ -380,10 +582,10 @@ export function renderReskinChat(input = DEFAULT_INPUT) {
       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_title: (text||line).slice(0,42),
       thread_tracers: (TEMPLATE && TEMPLATE.tracers) || [],
       client_context: clientContext(),
-      user_message: { id:userMsgId, role:'user', text:text, attachments:[] },
+      user_message: { id:userMsgId, role:'user', text:text||line, attachments:atts },
       assistant_message: { id:asstMsgId }
     };
     if(TEMPLATE){ body.template=TEMPLATE; }
@@ -403,9 +605,11 @@ export function renderReskinChat(input = DEFAULT_INPUT) {
       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) });
+      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);
@@ -419,9 +623,11 @@ export function renderReskinChat(input = DEFAULT_INPUT) {
       }
       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.');
@@ -431,6 +637,17 @@ export function renderReskinChat(input = DEFAULT_INPUT) {
       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);
@@ -512,9 +729,10 @@ export function renderReskinChat(input = DEFAULT_INPUT) {
       })
       .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){
+  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' })
@@ -529,7 +747,6 @@ export function renderReskinChat(input = DEFAULT_INPUT) {
           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();
@@ -547,15 +764,37 @@ export function renderReskinChat(input = DEFAULT_INPUT) {
       })
       .catch(function(){});
   }
-  function resetChat(){
+  // 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(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'; }
+    if(!(opts && opts.skipUrl)) setChatUrl(null, false);
+    renderEmptyState();
     setActiveThread(null);
     if(input){ input.value=''; autosize(); input.focus(); }
     window.scrollTo(0,0);
@@ -566,20 +805,27 @@ export function renderReskinChat(input = DEFAULT_INPUT) {
   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}); }
+  });
+
   // composer wiring
   if(input){ input.addEventListener('input',autosize); autosize(); }
-  if(send){ send.addEventListener('click',function(){ if(input){ sendMessage(input.value); } }); }
+  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(); sendMessage(input.value); }
+      if(ev.key==='Enter' && !ev.shiftKey){ ev.preventDefault(); if(busy){ if(pendingAbort){ pendingAbort.abort(); } return; } 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){
@@ -596,9 +842,10 @@ export function renderReskinChat(input = DEFAULT_INPUT) {
   }
 })();`;
     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.",
+        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